Published
Edited
Nov 8, 2018
3 forks
1 star
Insert cell
Insert cell
chart = {
const width = 960;
const height = 600;
const path = d3.geoPath();
const radius = d3.scaleSqrt().domain([0, 1e6]).range([0, 15]);

const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");

svg.append("path")
.datum(topojson.feature(us, us.objects.nation))
.attr("fill", "#ccc")
.attr("d", path);

svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
Insert cell
us = d3.json("https://unpkg.com/us-atlas@1/us/10m.json")
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more