Public
Edited
Jan 23, 2023
SVG = modulesNeeded[0].SVG
panzoom = modulesNeeded[1]
sydney_l111 = FileAttachment("Sydney_L11-1.svg").text()
draw.circle()
daaask = draw.use('desk', new URL("", location))
deskSVG = document
.importNode(new DOMParser()
.parseFromString(await FileAttachment("desk_playground_3.svg").text(), "image/svg+xml")
.documentElement, true)
{
// const deskSVG = document.importNode(new DOMParser()
// .parseFromString(await FileAttachment("desk_playground_3.svg").text(), "image/svg+xml")
// .documentElement, true) // I don't know if this is needed, I think the file is in the global namespace, but it's here just in case
const w = form1.size;
const h = form1.size;
daaask
.height(h)
.width(w)
.x(form1.xPos)
.y(form1.yPos)
.transform({
rotate: form1.deskRot,
// origin: { x: form1.xPos+ w, y: form1.yPos+ h*0.5 }
origin: "right center"
})
return "draw the desk, in a way that rotates around the back, middle point"
}
daaasks = [...Array(100)].map(x => {
return {
desk_use: draw.use('desk', new URL("", location)),
x:Math.random()*1000,
y:Math.random()*1000,
width:25,
height:25,
rotation: (Math.random()*36)*10,
text: "random words to come"
}
})
// {
// const w = form1.size;
// const h = form1.size;
// daaasks.forEach(d=>
// d.desk_use
// .height(d.width)
// .width(d.height)
// .x(d.x)
// .y(d.y)
// .transform({
// rotate: d.rotation,//form1.deskRot,
// origin: "right center"
// })
// )
// return "draw the desks, all over the map, in a way that rotates around the back, middle point"
// }
moreDaaasks = deskData.map(d => {
return {
desk_use: draw.use('desk', new URL("", location)),
x:+d.position.x + 80, //+ casts to number
y:(+d.position.y * -1) -80,
width:25,
height:25,
rotation: d.rotation,
text: d.names
}
})
{
const w = form1.size;
const h = form1.size;
moreDaaasks.forEach( d => {
console.log(d)
d.desk_use
.height(d.width)
.width(d.height)
.x(d.x)
.y(d.y)
.transform({
rotate: d.rotation,//form1.deskRot,
origin: "right center"
})
// .class("nice")
}
)
return "draw the desks, based on some data pulled from illustrator"
}
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.
