Plot.geo(counties, {fill: (d) => d.properties.unemployment}).plot({
projection: "albers-usa",
color: {
type: "quantile",
n: 8,
scheme: "blues",
label: "Unemployment (%)",
legend: true
}
})
land = FileAttachment("land.json").json() // multi-polygon representing land area
beagle = FileAttachment("beagle.json").json() // line representing the Beagle’s route
london = ({type: "Point", coordinates: [-0.13, 51.5]}) // London’s longitude and latitude
Plot.geo([land, beagle, london]).plot({projection: "equirectangular"})
Plot.plot({
projection: "equal-earth",
marks: [
Plot.geo(land, {fill: "currentColor"}),
Plot.graticule(),
Plot.line(beagle.coordinates, {stroke: (d, i) => i, z: null, strokeWidth: 2}),
Plot.geo(london, {fill: "red", r: 5}),
Plot.sphere()
],
caption: htl.html`The voyage of Charles Darwin aboard HMS <i>Beagle</i>, 1831–1836.`
})
Plot.plot({
inset: 4,
height: 400,
projection: {type: "orthographic", rotate: [0, -35, 20]},
marks: [Plot.graticule({strokeOpacity: 0.5}), Plot.sphere()]
})
earthquakes = (await fetch("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson")).json()
Plot.plot({
projection: "equirectangular",
marks: [
Plot.graticule(),
Plot.geo(land, {fill: "#ccc"}),
Plot.geo(earthquakes, {r: d => Math.exp(d.properties.mag)}),
Plot.sphere()
]
})
Plot.plot({
projection: {
type: "equal-earth",
rotate: [90, 0]
},
color: {
legend: true,
label: "Distance from Tonga (km)",
transform: (d) => 111.2 * d, // degrees to km
nice: true
},
marks: [
Plot.geo(land, { fill: (d) => palette2[9]}),
Plot.geo(radii, {
geometry: d3
.geoCircle()
.center(tonga)
.radius((r) => r),
stroke: (r) => palette2[r%9],
strokeWidth: 2
}),
Plot.geo({ type: "Point", coordinates: tonga }, { fill: "red", r: 4 }),
Plot.sphere()
]
})
chartTmp = Plot.plot({
projection: {
type: "albers-usa",
rotate: [96, 0],
domain: counties,
},
color: {
type: "ordinal",
legend: true,
},
marks: [
Plot.geo(counties, { fill: (d ,i) => palette3[i % palette3.length]}),
]
})
chartTmp4 = Plot.plot({
projection: {
type: "albers-usa",
rotate: [96, 0],
domain: counties,
},
marks: [
Plot.geo(counties, { fill: (d ,i) => palette5[i % palette5.length]}),
]
})
// Manually set the colors using the `range`
Plot.legend({
color: {
type: "categorical",
domain: d3.range(palette5.length).map(d => `Category ${d + 1}`),
range: palette5
}
})
palette2 = ["rgb(158, 1, 66)", "rgb(214, 66, 75)", "rgb(244, 125, 77)", "rgb(253, 190, 112)", "rgb(254, 237, 161)", "rgb(240, 248, 169)", "rgb(190, 229, 160)", "rgb(119, 198, 167)", "rgb(67, 143, 180)", "rgb(94, 79, 162)"]
viewof nb = Inputs.range([2, 100], { label: "nb", step: 1, value: 10 })
viewof color1 = Inputs.color({ label: "color1", value: "#f4e153" })
viewof color2 = Inputs.color({ label: "color2", value: "#38134e" })
palette5 = d3.quantize(d3.interpolateHcl(color1, color2), nb)
palette3 = d3.quantize(d3.interpolateHcl("#bb1b2b", "#2f65bc"), nb)
{
const h = 30;
const boxw = width / nb;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, h]);
svg
.selectAll("rect")
.data(palette5)
.join("rect")
.attr("x", (d, i) => i * boxw)
.attr("y", 0)
.attr("height", h)
.attr("width", boxw)
.attr("fill", (d) => d)
.attr("stroke", "black")
.attr("stroke-width", 0.1);
return svg.node();
}
radii = d3.range(10, 171, 10) // degrees radii of circles to be centered around Tonga
tonga = [-175.38, -20.57]
us = FileAttachment("us-counties-10m.json").json()
nation = topojson.feature(us, us.objects.nation)
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
counties = {
const rate = new Map(unemployment.map(({id, rate}) => [id, rate]));
const counties = topojson.feature(us, us.objects.counties);
for (const county of counties.features) county.properties.unemployment = rate.get(county.id);
return counties;
}
unemployment = (await FileAttachment("us-county-unemployment.csv").csv()).map(({rate, ...rest}) => ({...rest, rate: +rate}))
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.
