Public
Edited
Jan 20, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
draw = SVG().addTo('#box1').size(250, 250);
Insert cell
Insert cell
c = draw.circle(100).fill('#f06')// if you add: .center(0, 0) it'll draw the circle with its centre at 0, 0 (https://gitter.im/svgdotjs/svg.js?at=63bfb90b378d512c185aa738)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
o_pt = draw2.circle(o_diameter)
.fill('rgb(255, 0, ' + o_diameter + ')')
.move(-0.5 * o_diameter, -0.5 * o_diameter)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
o_pt2 = draw3.circle()
Insert cell
o_pt2.attr({cx:0, cy:0, r:o_diameter2/2}).fill('rgb(255, 0, '+o_diameter2+')')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof deskRot1 = Inputs.range([0, 360], {label: "Desk Rotation in degrees", step: 1, value: 5})
Insert cell
Insert cell
Insert cell
draw5 = SVG().addTo('#box5').size(750, 250);
Insert cell
desk5 = draw5.use('desk', new URL("", location))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
draw6 = SVG().addTo('#box6').size(750, 250);
Insert cell
daaask = draw6.use('desk', new URL("", location))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
panzoom = (await import('https://unpkg.com/@svgdotjs/svg.panzoom.js?module'))
Insert cell
dragable = (await import('https://unpkg.com/@svgdotjs/svg.draggable.js?module'))
Insert cell
draw8 = SVG()
.addTo('#box8')
.size(750, 250)
.viewbox('0 0 750 250')
.panZoom({ zoomMin: 0.5, zoomMax: 30 });
Insert cell
Insert cell
fixed_c = draw8.circle()
Insert cell
drag_group = draw8.group()
Insert cell
draggable_c = drag_group.circle()
Insert cell
labelText = drag_group.text()
Insert cell
{
fixed_c.cx(100).cy(150).radius(100).fill("rgb(255, 0, 102)").back()//.stroke("black")
draggable_c.cx(100).cy(150).radius(80).fill("#10a778").stroke("black")
labelText.text("Zoomies").x(100).y(150).font({family: 'Helvetica', size: 14, anchor: 'middle', leading: '1.5em'}).front()
drag_group.draggable()
// TODO: this isn't showing the draggable circle, it's behind the fixed circle, so it thinks it's panning, not dragging Done, by setting the order explicity with .front() and back() https://svgjs.dev/docs/3.0/manipulating/#back
//TODO: the drag isn't releasing. I suspect it's an interaction between the drag and the pan, and it's getting confused
}
Insert cell
Insert cell
Insert cell
draw9 = SVG()
.addTo('#box9')
.size(750, 250)
.viewbox('0 0 750 250')
.panZoom({ zoomMin: 0.5, zoomMax: 30 });
Insert cell
circles = "ABCDEFG".split('').map((x,i)=> draw9.circle().data({name:x, number:i}))
Insert cell
{
circles.forEach(c=>{
c.x(c.data().number*100+50)
.y(150)
.radius(40)
// .fill(colours[c.data().number].rgb)
.dblclick(function() {
console.log(this.data());
if(this.data().fill_number){
c.data().fill_number = c.data.number+1;
} else {
c.data().fill_number++;
let num = c.fill_number % 12
console.log(num)
c.fill(colours[num].rgb)
}
// console.log(this.target);
} )
// .on(document, 'keydown', function(e) {
// if(e.keyCode == 40){console.log("up")}
// if(e.keyCode == 38){console.log("down")}
// e.preventDefault()
// })
})
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more