News and graphics at @ClimateLab, a project of @PostGraphics.
Public
Edited
May 20, 2023
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, size, size])
.attr("width", Math.min(width, size))
.style("overflow", "visible");
const arc = svg.selectAll(".arc")
.data(data)
.join("g")
.attr("class", "arc");
arc.append("polyline")
.attr("fill", "none")
.attr("points", d => d)
.attr("stroke", "black");
arc.append("text")
.attr("dy", 4)
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("paint-order", "stroke fill")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 8)
.attr("text-anchor", "middle")
.attr("transform", d => {
const y = (
d.offset < 0 ? d3.min(d, d0 => d0[1]) :
d.offset > 0 ? d3.max(d, d0 => d0[1]) :
size / 2
)
return `translate(${ [ size / 2, y ]})`
})
.text(d => d.offset);
return svg.node();
}
a = [0, size * 0.5]
b = [size, size * 0.5]
size = 500
data = d3
.range(-1, 1 + interval, interval)
.map(n => {
const offset = +n.toFixed(1);
const P = swoopy.arc(a, b, offset);
P.offset = offset;
return P;
});
interval = sequence[i] / 10
sequence = [1, 2, 4, 5, 10, 20]
swoopy = require("swoopy@0.0.12")
require.resolve("swoopy")
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.
