Public
Edited
Jan 22, 2024
scaledDownTopo = FileAttachment("scaled-down.topo.json").json()
mapOfUSA = {
const map = topojson.feature(scaledDownTopo, 'counties')
const width = 800
const height = 700
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Paths
const path = d3.geoPath()
// Data
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: 'purple'
}))
// Function to draw the map with svg
const drawMap = (el) => {
el.selectAll('path')
.data(mapData)
.join('path')
.attr('d', d => d.d)
.style('fill', d => d.fill)
}
const g = svg
.append('g')
// .attr('transform')
drawMap(g)
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.
