function draw(context) {
context.moveTo(10, 10); // move current point to ⟨10,10⟩
context.lineTo(100, 10); // draw straight line to ⟨100,10⟩
context.arcTo(150, 150, 300, 10, 40); // draw an arc, the turtle ends up at ⟨194.4,108.5⟩
context.lineTo(300, 10); // draw straight line to ⟨300,10⟩
// etc.
return context; // not mandatory, but will make it easier to chain operations
}
{
const context = DOM.context2d(width, 150);
context.beginPath();
draw(context);
context.stroke();
return context.canvas;
}
draw(d3.path()).toString()
<svg>
<path stroke="black" fill="none" d="${draw(d3.path())}" />
</svg>
d3.create("svg")
.call(svg => svg.append("path")
.style("stroke", "black")
.style("fill", "none")
.attr("d", draw(d3.path())))
.node()
function square(context) {
context.rect(10, 10, 140, 140);
return context;
}
function circle(context) {
context.moveTo(150, 80);
context.arc(80, 80, 70, 0, Math.PI * 2);
return context;
}
quadrature = {
const p = d3.path();
square(p);
circle(p);
return p.toString(); // the resulting SVG path contains both square and circle
}
<svg>
<path stroke="black" fill="none" d="${quadrature}" />
</svg>
<svg>
<path stroke="none" fill="orange" d="${square(d3.path())}" />
<path stroke="none" fill="red" d="${circle(d3.path())}" />
</svg>
draw(d3.pathRound()).toString()
{
const context = DOM.context2d(width, 150);
const path = new Path2D("M10,10L100,10L129.5,92.6A40,40,0,0,0,194.4,108.4L300,10");
context.stroke(path);
return context.canvas;
}
html`<style>
.chart { width: 450px; max-width: 100%; height: auto; overflow: visible; }
.chart .u-line { stroke: #aaa; stroke-dasharray: 2 2; }
.chart .u-path { stroke: orange; fill: none; }
.chart .u-point circle { fill: orange; }
.chart { text-anchor: middle; font: 11px var(--sans-serif); user-select:none; }
</style>`
function update(chart, points, labels, lines, draw) {
d3.select(chart)
.select(".u-path")
.attr("d", draw());
d3.select(chart)
.selectAll(".u-point")
.data(points)
.join(enter =>
enter
.append("g")
.classed("u-point", true)
.call(g => {
g.append("circle").attr("r", 3);
g.append("text")
.text((d, i) => labels[i])
.attr("dy", d => (d[1] > 100 ? 15 : -5));
})
)
.attr("transform", d => `translate(${d})`);
d3.select(chart)
.selectAll(".u-line")
.data(lines)
.join("line")
.attr("x1", d => d[0][0])
.attr("y1", d => d[0][1])
.attr("x2", d => d[1][0])
.attr("y2", d => d[1][1])
.classed("u-line", true);
}
function draggable(chart, points, labels, lines, draw) {
update(chart, points, labels, lines, draw);
const dist = (p, m) => {
return Math.sqrt((p[0] - m[0]) ** 2 + (p[1] - m[1]) ** 2);
};
var subject, dx, dy;
function dragSubject(event) {
const p = d3.pointer(event.sourceEvent, chart);
subject = d3.least(points, (a, b) => dist(p, a) - dist(p, b));
if (dist(p, subject) > 48) subject = null;
if (subject)
d3.select(chart)
.style("cursor", "hand")
.style("cursor", "grab");
else d3.select(chart).style("cursor", null);
return subject;
}
d3.select(chart)
.on("mousemove", event => dragSubject({sourceEvent: event}))
.call(
d3
.drag()
.subject(dragSubject)
.on("start", event => {
if (subject) {
d3.select(chart).style("cursor", "grabbing");
dx = subject[0] - event.x;
dy = subject[1] - event.y;
}
})
.on("drag", event => {
if (subject) {
subject[0] = event.x + dx;
subject[1] = event.y + dy;
}
})
.on("end", () => {
d3.select(chart).style("cursor", "grab");
})
.on("start.render drag.render end.render", () =>
update(chart, points, labels, lines, draw)
)
);
}
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.
