svg = {
return d3.create("svg")
.attr("viewBox", "0 0 960 600")
.style("width", "50%")
.style("height", "auto")
}
legend ={
const width = 240;
const svgLegend = d3.create("svg")
.style("width", "200")
.style("height", "100")
const legendGroup = svgLegend.append("g")
.attr("transform", "translate(10, 50)")
.attr('class', 'legend')
legendGroup.append("image")
.attr("width", width)
.attr("height", 8)
.attr("preserveAspectRatio", "none")
.attr("xlink:href", ramp(color.interpolator()).toDataURL());
legendGroup.append("text")
.attr("class", "caption")
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.title);
legendGroup.call(d3.axisBottom(d3.scalePoint(["lowest", "median", "highest"], [0, width]))
.tickSize(13))
.select(".domain")
.remove();
return svgLegend.node()
}
data = Object.assign(new Map(await d3.csv("https://gist.githubusercontent.com/mbostock/682b782da9e1448e6eaac00bb3d3cd9d/raw/0e0a145ded8b1672701dc8b2a702e51c648312d4/unemployment.csv", ({id, rate}) => [id, +rate])), {title: "Unemployment rate (quantile)"})
color = d3.scaleSequentialQuantile([...data.values()], t => d3.interpolatePiYG(1 - t))
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json")
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {ramp} from "@mbostock/color-ramp"
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.
