d3 = require('d3@5')
topojson = require('topojson-client@3')
us = d3.json('https://d3js.org/us-10m.v2.json')
data = topojson.feature(us, us.objects.states).features
{
// Create an empty SVG with 960px width and 600px height.
const svg = DOM.svg(960, 600);
// Create an instance of geoPath.
const path = d3.geoPath();
// Use the path to plot the US map based on the geometry data.
d3.select(svg)
.append('g')
.selectAll('path')
.data(data)
.enter()
.append('path')
.attr('d', path);
return svg;
}
html`
<style>
path {
fill: #fff;
stroke: #000;
}
</style>`
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.
