Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
May 3, 2020
2 forks
19 stars
map = html`<svg viewBox="0 0 975 610" stroke-miterlimit="1">
<defs>
<path id="${outlineId.id}" d="${path(topojson.mesh(us, states, (a, b) => a === b))}"></path>
<clipPath id="${clipId.id}">
<use xlink:href="${outlineId.href}"></use>
</clipPath>
</defs>
<g clip-path="${clipId}" fill-opacity="0.7">${polygons.features.map(d => svg`
<path d="${project(d)}" fill="${color[d.properties.color % color.length]}"></path>`)}
<path d="${path(topojson.mesh(us, states, (a, b) => a !== b))}" fill="none" stroke="white"></path>
<path d="${project(voronoi.cellMesh())}" fill="none" stroke="black"></path>
</g>
<g text-anchor="middle" font-family="sans-serif" font-size="10">${polygons.features.map(d => svg`
<g transform="translate(${projection(d.properties.sitecoordinates).join(",")})">
<circle r="2"></circle>
<text y="-6">${d.properties.site[2]}</text>
</g>`)}
</g>
</svg>`
neighbors = voronoi.delaunay.neighbors
polygons = {
const polygons = voronoi.polygons(), {features} = polygons;
for (const [i, feature] of features.entries()) {
feature.properties.color = d3.max(neighbors[i], j => features[j].properties.color) + 1 | 0;
}
return polygons;
}
data = d3.csvParse(await FileAttachment("us-state-capitals.csv").text(), ({name, longitude, latitude}) => [+longitude, +latitude, name, undefined])
voronoi = d3.geoVoronoi(data)
us = FileAttachment("states-albers-10m.json").json()
states = ({type: "GeometryCollection", geometries: us.objects.states.geometries.filter(d => d.id !== "02" && d.id !== "15")})
projection = d3.geoAlbers().scale(1300).translate([487.5, 305])
path = d3.geoPath()
project = d3.geoPath(projection)
outlineId = DOM.uid("outline")
clipId = DOM.uid("clip")
color = d3.schemeTableau10
topojson = require("topojson-client@3")
d3 = require("d3-array@2", "d3-dsv@1", "d3-geo@1", "d3-geo-voronoi@1", "d3-scale-chromatic@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.
