Public
Edited
May 19, 2023
1 fork
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
const g = svg.append("g");
// Set up zoom
const zoom = d3.zoom()
.scaleExtent([1, 3])
.on("zoom", zoomed);
svg.call(zoom);
// Function for zooming
function zoomed(event) {
const {transform} = event;
g.attr("transform", transform);
g.attr("stroke-width", 1 / transform.k);
}
g.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("fill", d => data.get(d.id) ? color(data.get(d.id)) : "lightgrey")
.attr("d", path)
.append("title")
.text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
${format(data.get(d.id))}`);
g.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "grey")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
data = Object.assign(new Map(d3.csvParse(await FileAttachment("totals.csv").text(), ({GEOID10, total}) => [GEOID10, parseFloat(total).toFixed(2)])), {title: "Total"})
color = d3.scaleLog()
.domain([50,917,23000])
.range(["lightblue", "purple", "red"])
path = d3.geoPath()
format = d => `${d}`
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
import {Legend} from "@d3/color-legend"
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.
