Published
Edited
Aug 27, 2020
1 star
labels = d3.shuffle(
us.objects.states.geometries
.filter(d => d.properties.name !== 'District of Columbia')
.map(d => d.properties.name)
)
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 1024, 610]);
svg
.append("g")
.selectAll("text")
.data(
topojson
.feature(us, us.objects.states)
.features.filter(d => d.properties.name !== 'District of Columbia')
)
.join("text")
.attr("transform", d => {
const centroid = path.centroid(d);
const offset = offsets[d.properties.name] || [0, 0];
const x = offset[0] + centroid[0];
const y = offset[1] + centroid[1];
const angle =
(rotations[d.properties.name] || 0) + (975 / 2 - centroid[0]) / 40;
return `translate(${x},${y}) rotate(${angle})`;
})
.attr("text-anchor", d => anchors[d.properties.name] || "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.text((d, i) => labels[i]);
svg
.append("path")
.datum(topojson.mesh(us, us.objects.states))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
topojson.feature(us, us.objects.states).features[0]
path = d3.geoPath()
us = FileAttachment("states-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
import {legend} from "@d3/color-legend"
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.
