land
Plot.plot({
projection: "equal-earth",
marks: [
Plot.geo(land, { fill: "grey", stroke: "red" })
]
})
import {land} from "@observablehq/plot-live-earthquake-map"
meteorites = FileAttachment("meteorites.json").json()
d3.extent(meteorites, (d) => d.year)
viewof year = Inputs.range(d3.extent(meteorites, (d) => d.year), {label: "Pick a year", step: 10})
import {us} from "@observablehq/plot-us-choropleth"
us
states = topojson.feature(us, us.objects.counties)
import {us_power_plants} from "@observablehq/build-your-first-map-with-observable-plot"
Choropleth Map
Plot.plot({
projection: "albers-usa",
color: {
legend: true,
type: "quantile",
n: 9,
scheme: "Blues",
label: "Unemployment rate (%)"
},
marks: [
Plot.geo(counties, Plot.centroid({
fill: (d) => d.properties.unemployment,
channels: {
county: (d) => d.properties.name,
// "unemployment rate": (d) => d.properties.unemployment
},
tip: true
}))
]
})
massMunicipalities = FileAttachment("mass-municipalities.geojson").json()
counties_polym = FileAttachment("COUNTIES_POLYM.geojson").json()
Plot.plot({
marks: [
Plot.geo(counties_polym)
]
})
townGeo = FileAttachment("TOWN.geo.json").json()
Plot.plot({
color: {
legend: true,
type: "quantile",
scheme: "Greens",
n: 7
},
marks: [
Plot.geo(townGeo, Plot.centroid({
fill: (d) => d.properties.POP2000,
stroke: "white",
tip: true
}))
]
})
maps_substance_data = FileAttachment("maps_susbtance_data.json").json()
screenShot20231206At120844Am = FileAttachment("Screen Shot 2023-12-06 at 12.08.44 AM.png").image()
substance2000 = maps_substance_data.data[0]
substance2000Features = townGeo.features.map((g) => ({
...g,
properties: {
substance2000: substance2000.values[g.properties.TOWN_1],
town: g.properties.TOWN_1
}
}))
substance2000Geo = {
return {
type: "FeatureCollection",
features: substance2000Features
}
}
Plot.plot({
x: {
axis: null
},
y: {
axis: null
},
color: {
legend: true,
type: "quantile",
scheme: "PuBuGn",
n: 8,
tickFormat: ".2f"
},
marks: [
Plot.geo(substance2000Geo, Plot.centroid({
fill: (d) => d.properties.substance2000,
stroke: "white",
tip: true
})),
Plot.axisX(substance2000, {
label: "2000",
anchor: "bottom",
labelAnchor: "center",
fontSize: 15, fontWeight: 700, color: "purple"
})
]
})
townGeo.features[0]
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.
