Learn Flowfield 5: Do it myselfCandy BallLightningKoisChinese LanternThe Annual Ring V2Rough Canvas Squaresd3 in 3D with three-forcegraph exampleThree.js CubesThree.js Animated Cubes
Rough Circle Packing: SVG, Canvas and roughJS Canvas
{
const c = DOM.context2d(width, height);
// c.translate(300, 300)
d3.range(18).forEach(d => {
c.beginPath()
// circle merge?
c.arc(d * 100, d * 50, d*10,0, Math.PI * 2)
c.fillStyle = "white"
c.fill()
c.strokeStyle = "black"
c.lineWidth = 3
c.stroke()
c.globalCompositeOperation = "screen"
})
return c.canvas
}
{
const svgHTML = html`<svg width="${width}" height="${height}"></svg>`;
const svg = d3.select(svgHTML)
.style("width", "100%")
.style("height", "auto")
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
const leaf = svg.selectAll("g")
.data(packedData.leaves())
.enter().append("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
leaf.append("circle")
.attr("r", d => d.r)
.attr("fill", d => "#bbccff");
return svg.node()
}
canvas = {
const c = DOM.context2d(width, height);
// context.fillStyle = "hsl(216deg 100% 13%)";
// context.fillRect(0, 0, width, height);
c.translate(300,300);
c.fillStyle = "white"
c.fillRect(-200, -200, 700, 700); // make sure to clear or fill the rect
for (const { x, y, r, fill } of circles) {
c.beginPath();
c.arc(x, y, r, 0, 2*Math.PI);
c.fillStyle = fill;
c.fill();
}
return c.canvas;
}
{
const c = DOM.context2d(width, height);
c.beginPath()
c.arc(width/2, height/2, 200, 0, Math.PI * 2)
c.arc(width/3, height/4, 100, 0, Math.PI * 2)
c.arc(width/1.1, height/4, 100, 0, Math.PI * 2)
c.closePath()
c.fillStyle='white';
c.fill()
// c.lineWidth = 20
// c.strokeStyle = "black"
c.stroke()
c.closePath()
c.shadowColor = "rgb(230,230,230)"
c.shadowBlur = 100
c.fill()
// c.beginPath()
// c.moveTo(width/3 + 100, height/4)
// c.arc(width/3, height/4, 100, 0, Math.PI * 2)
// c.lineWidth = 20
// c.strokeStyle = "black"
// c.stroke()
// c.fill()
return c.canvas
}
https://stackoverflow.com/questions/29395369/javascript-canvas-intersecting-circle-holes-in-rectangle-or-how-to-merge-multi
{
const c = DOM.context2d(width, height);
c.beginPath()
c.arc(width/2, height/2, 200, 0, Math.PI * 2)
c.stroke()
c.closePath()
c.beginPath()
c.arc(width/3, height/4, 100, 0, Math.PI * 2)
c.stroke()
c.closePath()
c.beginPath()
c.arc(width/1.1, height/4, 100, 0, Math.PI * 2)
c.closePath()
c.fillStyle='white';
c.fill()
c.stroke()
c.lineWidth = 20
c.strokeStyle = "red"
// c.stroke()
// c.closePath()
// c.shadowColor = "rgb(230,230,230)"
// c.shadowBlur = 100
// c.fill()
// c.beginPath()
// c.moveTo(width/3 + 100, height/4)
// c.arc(width/3, height/4, 100, 0, Math.PI * 2)
// c.lineWidth = 20
// c.strokeStyle = "black"
// c.stroke()
// c.fill()
return c.canvas
}
{
const c = DOM.context2d(width, height);
c.beginPath()
c.arc(width/2, height/2, 200, 0, Math.PI * 2)
c.arc(width/3, height/4, 100, 0, Math.PI * 2)
c.beginPath()
c.arc(width/1.1, height/4, 100, 0, Math.PI * 2)
c.closePath()
c.fillStyle='red'
c.fill()
// c.lineWidth = 20
// c.strokeStyle = "black"
c.stroke()
c.shadowColor = "rgb(230,230,230)"
c.shadowBlur = 100
c.fill()
// c.beginPath()
// c.moveTo(width/3 + 100, height/4)
// c.arc(width/3, height/4, 100, 0, Math.PI * 2)
// c.lineWidth = 20
// c.strokeStyle = "black"
// c.stroke()
// c.fill()
return c.canvas
}
height = 600
data ={
const jsonData = await d3.csv("https://raw.githubusercontent.com/johnhaldeman/talk-on-d3-basics/master/Summary_sommaire_2017_2026.csv")
const data = jsonData.slice(1)
return d3.rollup(data, v => d3.sum(v, d => +d.Employment), d => d.Occupation_Name)
}
hierarData = d3.hierarchy(data).sum(d =>d[1])
packedData = {
const pack = d3.pack()
.size([width, height])
return pack(hierarData)
}
circles = d3.packSiblings(canvasData.map((d) => ({
r: d.r,
x: d.x,
y: d.y,
group: random.rangeFloor(1,10),
fill: 'rebeccapurple'
}))).sort((a,b) => b.r - a.r);
circles.filter(d => d.group == 3)
canvasData = packedData.children
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.
