Public
Edited
Sep 17, 2023
{
const width = 975;
const height = 610;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
return svg.node();
}
us = FileAttachment("counties-albers-10m.json").json()
namemap = new Map(us.objects.states.geometries.map(d => [d.properties.name, d.id]))
{
const width = 975;
const height = 610;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const states = topojson.feature(us, us.objects.states);
const statemap = new Map(states.features.map(d => [d.id, d]));
const path = d3.geoPath();
svg.append("g")
.selectAll("path")
.data(states.features)
.join("path")
.attr("fill", "steelblue")
.attr("stroke", "black")
.attr("d", path);
return svg.node();
}
{
const width = 975;
const height = 610;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const states = topojson.feature(us, us.objects.states);
const statemap = new Map(states.features.map(d => [d.id, d]));
const path = d3.geoPath();
svg.append("path")
// .datum(topojson.mesh(us, us.objects.states)) // This includes all the border
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) // The only includes the intersection of borders between states
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", path);
return svg.node();
}
{
const width = 975;
const height = 610;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const states = topojson.feature(us, us.objects.states);
const statemap = new Map(states.features.map(d => [d.id, d]));
const path = d3.geoPath();
svg.append("g")
.selectAll("path")
.data(states.features)
.join("path")
.attr("fill", "steelblue")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white") // Change border to white
.attr("d", path);
return svg.node();
}
unemployment = FileAttachment("unemployment201907.csv").csv({typed: true})
unemployment[0].rate
d3.extent(unemployment, d => d.rate)
valuemap = new Map(unemployment.map(d => [namemap.get(d.name), d.rate]))
{
const width = 975;
const height = 610;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const states = topojson.feature(us, us.objects.states);
const statemap = new Map(states.features.map(d => [d.id, d]));
const path = d3.geoPath();
const color = d3.scaleQuantize([1, 10], d3.schemeBlues[9]);
svg.append("g")
.selectAll("path")
.data(states.features)
.join("path")
.attr("fill", d => color(valuemap.get(d.id)))
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path);
return svg.node();
}
import {Legend} from "@d3/color-legend"
{
const width = 975;
const height = 610;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const states = topojson.feature(us, us.objects.states);
const statemap = new Map(states.features.map(d => [d.id, d]));
const path = d3.geoPath();
const color = d3.scaleQuantize([1, 10], d3.schemeBlues[9]);
svg.append("g")
.selectAll("path")
.data(states.features)
.join("path")
.attr("fill", d => color(valuemap.get(d.id)))
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path);
const legendWidth = 260;
svg.append("g")
.attr("transform", `translate(${width-legendWidth - 100}, 20)`)
.append(() => Legend(color, {title: "Unemployment rate(%)", width: legendWidth}));
return svg.node();
}
{
const width = 975;
const height = 610;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const states = topojson.feature(us, us.objects.states);
const statemap = new Map(states.features.map(d => [d.id, d]));
const path = d3.geoPath();
const color = d3.scaleQuantize([1, 10], d3.schemeBlues[9]);
svg.append("g")
.selectAll("path")
.data(states.features)
.join("path")
.attr("fill", d => color(valuemap.get(d.id)))
.attr("d", path)
.on("pointerenter pointermove", pointermoved)
.on("pointerleave", pointerleft)
.on("touchstart", event => event.preventDefault());
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path);
const legendWidth = 260;
svg.append("g")
.attr("transform", `translate(${width-legendWidth - 100}, 20)`)
.append(() => Legend(color, {title: "Unemployment rate(%)", width: legendWidth}));
const tooltip = svg.append("g");
function pointermoved(event) {
if (event == null) return;
const pointer = d3.pointer(event);
const pointerY = pointer[1]
tooltip.style("display", null);
tooltip.attr("transform", `translate(${pointer[0]}, ${pointerY})`);
const data = d3.select(this).data()[0];
const stateName = data['properties']['name'];
const stateUnemploymentRate = valuemap.get(data['id']);
const text = tooltip.selectAll("text")
.attr("text-anchor", 'middle') // Align text to middle
.data([,])
.join("text")
.call(text => text.selectAll("tspan")
.data([stateName, stateUnemploymentRate])
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => (pointerY + 50 > height) ? `-${1.1 * i + 1.6}em` : `${1.1 * i + 1.6}em`) // Allow Hawaii by display text at the top
.attr("font-weight", (_, i) => i ? null : "bold")
.style("opacity", (_, i) => i ? 0.5 : 0.6)
.text(d => d));
}
function pointerleft() {
tooltip.style("display", "none");
}
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.
