A thin veil of professionalism and a mild headache.
Published
Edited
May 29, 2019
md`# Arcs`
d3 = require('d3');
chart = {
const data = Array.from(Array(100), (v, i) => Math.sin(i / 10) * 200 + 200);
const svg = d3.select(DOM.svg(2000, 500));
svg.selectAll("rect").data(data).enter()
.append("rect")
.attr("fill", "black")
.attr("x", (d, i) => i * 10)
.attr("width", 5)
.attr("height", d => d );
return svg.node();
}
arcs = {
const data = Array.from(Array(12), (v, i) => (i + 1)**2);
const max = data[data.length - 1] * 7;
const viz = d3.select(DOM.svg(max, max));
var t = d3.transition()
.duration(5000);
const start = d3.arc()
.innerRadius(d => d * 2)
.outerRadius(d => d * 2 + 15)
.startAngle(0)
.endAngle(0);
const sweep = d3.arc()
.innerRadius(d => d * 2)
.outerRadius(d => d * 2 + 15)
.startAngle(0)
.endAngle(d => d * 0.01 * Math.PI);
viz.selectAll("path").data(data).enter().append("path")
.attr("d", start)
.attr("fill", "blue")
.attr("transform", `translate(${max / 2}, ${max / 2})`)
.transition(t)
.attr("d", sweep);
return viz.node();
}
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.
