News and graphics at @ClimateLab, a project of @PostGraphics.
Public
Edited
Oct 27, 2022
1 fork
11 stars
{
const svg = d3.create("svg")
.attr("class", "viz")
.attr("width", size + margin.left + margin.right)
.attr("height", size + margin.top + margin.bottom);
svg.append("style").html(css);
const g = svg.append("g")
.attr("transform", `translate(${[margin.left, margin.top]})`);
const cell = g.selectAll(".cell")
.data(cells.features)
.join("path")
.attr("class", "cell")
.attr("d", path);
const outline = g.append("path")
.datum(square)
.attr("class", "outline")
.attr("d", path);
const line = g.selectAll("line")
.data(data)
.join("line")
.attr("stroke", (d, i) => c(i / sticks))
.attr("y2", -margin.top + 15)
.attr("transform", d => `translate(${projection(d)})`);
return svg.node()
}
c = d3.interpolateSinebow
margin = ({left: 1, right: 1, top: 50, bottom: 1});
size = Math.min(width, 400);
projection = d3.geoEquirectangular()
.reflectY(true)
.rotate([rotation, -rotation * 2, 0])
.fitSize([size, size], cells);
path = d3.geoPath(projection);
square = {
const { cos, PI, round, sin } = Math;
const x = n => round(cos(n));
const y = n => round(sin(n));
return {
type: "Polygon",
coordinates: [ d3.range(1, PI * 2.5, PI * 0.25).map(n => [x(n), y(n)]) ]
}
}
cells = {
const i = 0.4;
const r = d3.range(-1, 1, i);
return {
type: "FeatureCollection",
features: d3
.cross(r, r)
.map(([lon, lat]) => ({
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[lon, lat],
[lon, lat + i],
[lon + i, lat + i],
[lon + i, lat],
[lon, lat]
]
]
}
}))
};
}
data = Array.from({ length: sticks }).map(d => ([random(), random()]));
random = d3.randomUniform(-1, 1);
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.
