Published
Edited
Mar 8, 2019
map = {
const width = 960
const height = 600
const graticule = d3.geoGraticule()
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
// Add county basemap
svg.append("g")
.selectAll("path")
.data(counties)
.join("path")
.attr("fill", "#F9F9F9")
.attr("stroke", "#ddd")
.attr("stroke-width", "0.5")
.attr("vector-effect", "non-scaling-stroke")
.attr("d", path)
// Add states
svg.append("path")
.datum(states)
.attr("fill", "none")
.attr("stroke", "#8DA2B4")
.attr("stroke-width", "0.5")
.attr("stroke-linejoin", "round")
.attr("vector-effect", "non-scaling-stroke")
.attr("d", path)
// Add nation outline
svg.append("path")
.datum(nation)
.attr("fill", "none")
.attr("stroke", "#8DA2B4")
.attr("stroke-linejoin", "round")
.attr("stroke-width", "0.5")
.attr("d", path)
return svg.node()
}
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.
