color = ({
label: "color pivot: " + middleColor,
type: "diverging",
pivot: 5,
domain: [0,10],
range: ["#003EA0", // blue
"#516F9F",
"#D6DEEC",
"white",
"#F1DBD3",
"#D2512D",
"#B12700" // red
],
legend: true,
clamp: true,
})
color1 = ({
label: "color pivot: " + medianThisYear,
scheme: "rdbu",
reverse: true,
type: "diverging",
pivot: medianThisYear,
domain: [0, medianThisYear * 2],
legend: true,
})
color2 = ({
label: "color pivot: " + 5,
scheme: "rdbu",
reverse: true,
type: "diverging",
pivot: 5,
domain: [0,5,5 * 2],
legend: true,
})
colorThresholds = ({
label: "threshold (%)",
domain: [
3,
4,
6,
10,
14
],
range: [
d3.interpolateRdBu(0.9),
d3.interpolateRdBu(0.7),
"#ddd",
d3.interpolateRdBu(0.3),
d3.interpolateRdBu(0.1),
d3.interpolateRdBu(0)
],
legend: true,
type: "threshold"
})
colorDomain = [0, middleColor, middleColor * 2]
function colorMyMap(color, data, width) {
return Plot.carto({
projection: "identity",
marks: [
// projection fitExtent comes from first feature mark
Plot.feature(topojson.feature(us, us.objects.states), {
strokeWidth: 0.5
}),
Plot.features(topojson.feature(us, us.objects.counties).features, {
fill: (d) => data.get(d.id),
strokeWidth: 1,
stroke: (d) => data.get(d.id)
}),
Plot.feature(topojson.feature(us, us.objects.states), {
strokeWidth: .5,
stroke: "white"
}),
Plot.feature(topojson.feature(us, us.objects.nation), {
strokeWidth: 1,
stroke: "black"
})
],
width,
height: width * 2/3,
color
})}
colorMap = new Map([
["median for that year", medianThisYear],
["median for all years", d3.median(unemployment2000to2020, d => d.rate)],
["5%", 5],
["4%", 4],
["6%", 6],
])
medianThisYear = d3.median(unemploymentSingleYear, d => d.rate)
Array.from(unemploymentYears.get(year.toString()).values())
unemploymentMap = new Map(unemploymentSingleYear.map(d => [d.id, d.rate]))
unemploymentSingleYear = unemploymentYears.get(year.toString())
unemploymentKeyYears = [
...unemploymentYears.get("2007"),
...unemploymentYears.get("2009"),
...unemploymentYears.get("2019"),
...unemploymentYears.get("2020")
]
unemploymentYears = d3.group(unemployment2000to2020, d => d.year)
unemployment2000to2020
import {unemployment2000to2020, us, collectionPreviews, header} from "@observablehq/sources-for-outlier-2022-notebooks"
Plot = require("@observablehq/plot@0.4.0").then(makeCarto)
import {makeCarto} from "@fil/plot-carto-0-4"
import { Scrubber } from "@mbostock/scrubber"
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.
