recolor = {
let classes = "f6 link dim ph3 pv2 mb2 dib white bg-dark-blue";
if (button == 0) {
classes.split(" ").forEach(d => viewof button[0].classList.add(d));
viewof button.classList.remove(viewof button.classList[0]);
};
// Change the color stuff when you click the button
if (button % 2) {
chart.recolor(d3.scaleQuantize([1, 10], d3.schemeReds[9]))
} else {
chart.recolor(d3.scaleQuantize([1, 10], d3.schemeBlues[9]))
};
return classes.split(" ")
}
viewof button = Button("Click to recolor stuff")
chart = {
const width = 975;
const height = 610;
let state = d3.select(null), target, color = 'steelblue';
let colors = d3.scaleQuantize([1, 10], d3.schemeBlues[9]);
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.on("dblclick", (event) => event.stopPropagation())
.on("click", reset);
const g = svg.append("g");
const states = g.append("g")
.attr("class", "nation")
.attr("fill", color)
.attr("cursor", "pointer")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.on("click", clicked)
.attr("d", path);
states.append("title")
.text(d => d.properties.name);
g.append("path")
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none")
.attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));
const counties = g.append("g")
.attr("fill", "#444")
.attr("stroke", "#444")
.attr("pointer-events", "none")
svg.call(zoom).on("wheel.zoom", null)
function reset() {
if (!target) return;
target = null;
state.style("fill", color);
states.transition().duration(750).style("fill", null);
counties.selectAll("path").remove();
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
);
}
function clicked(event, d) {
const [[x0, y0], [x1, y1]] = path.bounds(d);
event.stopPropagation();
if (target == d.id) {
return reset();
} else {
target = d.id;
}
state = d3.select(this).style("fill", color);
states.transition().style("fill", null);
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)))
.translate(-(x0 + x1) / 2, -(y0 + y1) / 2),
d3.pointer(event, svg.node())
);
counties.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features.filter(d => d.id.slice(0,2) == target))
.join("path")
.attr("d", path)
.attr("fill", d => colors(data.get(d.id)))
.style("stroke", "white")
.style("stroke-linejoin", "round")
.on("click", reset)
}
function zoomed(event) {
const {transform} = event;
g.attr("transform", transform);
g.attr("stroke-width", 1 / transform.k);
}
function recolor(d) {
colors = d;
color = colors();
g.select("g.nation").attr("fill", colors(7));
counties.selectAll("path")
.attr("fill", d => colors(data.get(d.id)))
}
return Object.assign(svg.node(), {
recolor: recolor
});
}
data = new Map(unemployment.map(d => [d.id, d.rate]));
import { unemployment } from "@d3/choropleth"
path = d3.geoPath()
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
import {Button} from "@observablehq/inputs"
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.
