The avatar for @notionparallax
Ben
Public
Edited
Jan 20, 2023
1
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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more