Public
Edited
Mar 28, 2023
Insert cell
Insert cell
Plot.geo(counties, {fill: (d) => d.properties.unemployment}).plot({
projection: "albers-usa",
color: {
type: "quantile",
n: 8,
scheme: "blues",
label: "Unemployment (%)",
legend: true
}
})
Insert cell
Insert cell
Insert cell
land = FileAttachment("land.json").json() // multi-polygon representing land area
Insert cell
beagle = FileAttachment("beagle.json").json() // line representing the Beagle’s route
Insert cell
london = ({type: "Point", coordinates: [-0.13, 51.5]}) // London’s longitude and latitude
Insert cell
Plot.geo([land, beagle, london]).plot({projection: "equirectangular"})
Insert cell
Insert cell
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.`
})
Insert cell
Insert cell
Insert cell
Plot.plot({
inset: 4,
height: 400,
projection: {type: "orthographic", rotate: [0, -35, 20]},
marks: [Plot.graticule({strokeOpacity: 0.5}), Plot.sphere()]
})
Insert cell
Insert cell
Insert cell
earthquakes = (await fetch("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson")).json()
Insert cell
Plot.plot({
projection: "equirectangular",
marks: [
Plot.graticule(),
Plot.geo(land, {fill: "#ccc"}),
Plot.geo(earthquakes, {r: d => Math.exp(d.properties.mag)}),
Plot.sphere()
]
})
Insert cell
Insert cell
Insert cell
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()
]
})
Insert cell
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]}),
]
})
Insert cell
chartTmp4 = Plot.plot({
projection: {
type: "albers-usa",
rotate: [96, 0],
domain: counties,
},
marks: [
Plot.geo(counties, { fill: (d ,i) => palette5[i % palette5.length]}),
]
})
Insert cell
// Manually set the colors using the `range`
Plot.legend({
color: {
type: "categorical",
domain: d3.range(palette5.length).map(d => `Category ${d + 1}`),
range: palette5
}
})
Insert cell
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)"]

Insert cell
viewof nb = Inputs.range([2, 100], { label: "nb", step: 1, value: 10 })
Insert cell
viewof color1 = Inputs.color({ label: "color1", value: "#f4e153" })
Insert cell
viewof color2 = Inputs.color({ label: "color2", value: "#38134e" })
Insert cell
palette5 = d3.quantize(d3.interpolateHcl(color1, color2), nb)
Insert cell
palette3 = d3.quantize(d3.interpolateHcl("#bb1b2b", "#2f65bc"), nb)
Insert cell
{
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();
}
Insert cell
radii = d3.range(10, 171, 10) // degrees radii of circles to be centered around Tonga
Insert cell
tonga = [-175.38, -20.57]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
us = FileAttachment("us-counties-10m.json").json()
Insert cell
nation = topojson.feature(us, us.objects.nation)
Insert cell
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
Insert cell
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;
}
Insert cell
Insert cell
unemployment = (await FileAttachment("us-county-unemployment.csv").csv()).map(({rate, ...rest}) => ({...rest, rate: +rate}))
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more