Public
Edited
Jul 20, 2023
1 fork
Importers
2 stars
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 900,
projection: {
type: "orthographic",
domain: states
},
caption: "Composing two different geo datasets for state and local government regions and a text mark for each state",
marks: [
Plot.text(
states.features.map((f) => ({centroid: d3.geoCentroid(f), name: f.properties.admin1Name})),
{
x: (d) => d.centroid[0], // longitude
y: (d) => d.centroid[1], // latitude
text: "name",
textAnchor: "middle",
stroke: "white",
fill: "black"
}
),
Plot.geo(states, { strokeWidth: 2}),
Plot.geo(lgas, { strokeOpacity: 0.3, strokeWidth: 0.5})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
lgas = FileAttachment("ngaadmbndaadm2osgof20170222.geojson").json()
Insert cell
states = FileAttachment("ngaadmbndaadm1osgof20161215.geojson").json()
Insert cell
zoom = 6//smaller numbers zooms in - larger zooms out
Insert cell
renderGeo(country)
Insert cell
renderGeo(country_simplified)
Insert cell
renderGeo(states_simplified, states_simplified)
Insert cell
renderGeo(states_complex)
Insert cell
renderGeo(lga_simplified, lgas.features[1])
Insert cell
renderGeo(states_simplified, states_simplified)
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
renderGeo(states_simplified, anotherBound.geometry)
Insert cell
renderGeo(states_complex, anotherBound.geometry)
Insert cell
anotherBound = ({type: "Feature", geometry: { type: "MultiPoint", coordinates: d3.geoBounds(states.features[9])}})
Insert cell
Insert cell
lga_complex = FileAttachment("geoBoundaries-NGA-ADM2.geojson").json()
Insert cell
states_complex = FileAttachment("geoBoundaries-NGA-ADM1.geojson").json()
Insert cell
states_simplified = FileAttachment("geoBoundaries-NGA-ADM1_simplified.geojson").json()
Insert cell
country = FileAttachment("geoBoundaries-NGA-ADM0.geojson").json()
Insert cell
Insert cell
lgasGeojson = FileAttachment("lgas.geojson.json").json()
Insert cell
country_simplified = FileAttachment("geoBoundaries-NGA-ADM0_simplified.geojson").json()
Insert cell

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.
Learn more