Ph.D. Student at UC Berkeley EECS. Prev. @FormidableLabs.
Public
Edited
Aug 27, 2021
10 stars
topojson = require('topojson-client@3')
us = d3.json('https://d3js.org/us-10m.v1.json')
states = topojson.feature(us, us.objects.states).features
path = d3.geoPath();
statesPaths = states.map((feature) => ({
id: feature.id,
d: path(feature),
centroid: path.centroid(feature)
}));
statesPathsLTR = [...statesPaths].sort((a, b) => a.centroid[0] - b.centroid[0]);
statesLTR = {
replayLTR;
return svg`
<svg width=${width} height="600" viewBox="0 0 ${width} 600">
<g>
${statesPathsLTR.map((path, i) => {
const node = d3
.select(
svg`<path d=${path.d} fill="steelblue" fill-opacity="0.1" stroke="steelblue" opacity="0" />`
)
.call(stagger(i))
.node();
return node;
})}
</g>
</svg>
`;
}
statesPathsBTT = [...statesPaths].sort((a, b) => b.centroid[1] - a.centroid[1]);
statesBTT = {
replayBTT;
return svg`
<svg width=${width} height="600" viewBox="0 0 ${width} 600">
<g>
${statesPathsBTT.map((path, i) => {
const node = d3
.select(
svg`<path d=${path.d} fill="steelblue" fill-opacity="0.1" stroke="steelblue" opacity="0" />`
)
.call(stagger(i))
.node();
return node;
})}
</g>
</svg>
`;
}
statesPathsDiagonal = [...statesPaths].sort((a, b) => (a.centroid[0] - b.centroid[0]) + (b.centroid[1] - a.centroid[1]));
statesDiagonal = {
replayDiagonal;
return svg`
<svg width=${width} height="600" viewBox="0 0 ${width} 600">
<g>
${statesPathsDiagonal.map((path, i) => {
const node = d3
.select(
svg`<path d=${path.d} fill="steelblue" fill-opacity="0.1" stroke="steelblue" opacity="0" />`
)
.call(stagger(i))
.node();
return node;
})}
</g>
</svg>
`;
}
stagger = (i) => (path) => {
path.transition()
.duration(500)
.ease(d3.easeLinear)
.delay(i * 50)
.attr("opacity", 1);
}
d3 = require('d3@6');
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.
