Published
Edited
Dec 16, 2021
1 fork
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, title: data.title, width: 260}));
let tip;
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("fill", d => color(data.get(d.properties.name)))
.attr("d", path)
.on("mouseover mousemove", function(event) {
const pointer = d3.pointer(event);
d3.select(this)
.style("fill", "green")
.each(d => tip.call(hover, pointer, [d.properties.name, format(data.get(d.properties.name))]))
})
.on("mouseout", function() {
d3.select(this).style("fill", d => color(data.get(d.properties.name)))
tip.call(hover, null)
})
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
tip = svg.append("g")
.attr("transform", "translate(0, -10)")
.selectAll(".hover")
.data([""])
.join("g")
.attr("class", "hover")
.style("pointer-events", "none")
.style("text-anchor", "middle")
return svg.node();
}
import {countrymesh} from "@d3/world-choropleth"
import {Choropleth} from "@d3/choropleth"
data = Object.assign(new Map(d3.csvParse(await FileAttachment("unemployment201907.csv").text(), ({name, rate}) => [name, +rate])), {title: "Unemployment rate (%)"})
color = d3.scaleQuantize([1, 7], d3.schemeBlues[6])
path = d3.geoPath()
format = d => `${d}%`
us = FileAttachment("states-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
import {hover} from "@mkfreeman/plot-tooltip"
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.
