Public
Edited
Jun 2, 2023
3 forks
57 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
/// Can you see Nepal above? By default, data passed to plot with no additional context shows up on a global projection
Plot.geo(moha_admin0).plot({
projection: "mercator",
height: 400
})
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: {
type: "mercator",
// this tells Plot that I wish to focus on an area that is specific to the spatial extents of my geo data file
domain: moha_admin0
},
// this tells Plot to use the Plot.geo mark to draw my geo data file
marks: [Plot.geo(moha_admin0)],
height: 400
})
Insert cell
moha_admin0
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: {
type: "mercator",
// D3 and Plot expect coordinates to be specified as [longitude, latitude], so if you're setting your center point by grabbing coordinates from Google Maps, you'll need to reverse them.
domain: d3.geoCircle().center([85.3, 27.7]).radius(radius)(),
inset: 2
},
marks: [Plot.geo(ghimire_admin3, { stroke: "blue", strokeWidth: 0.4 })],
height: 300
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: {
...projection,
domain: moha_admin0 // this allows us to "focus" on our target polygon
},
marks: [
// see: https://github.com/observablehq/plot/blob/main/README.md#plotgraticuleoptions
Plot.geo(d3.geoGraticule().step([1, 1])(), { strokeOpacity: 0.1 }),
Plot.geo(moha_admin0),
Plot.geo(ghimire_admin3, {
//clip: "frame",
stroke: "blue",
strokeOpacity: 0.1
})
],
height: 400
})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: {
domain: kathmandu_cad,
type,
inset
},
marks: [
Plot.geo(kathmandu_cad, {
strokeWidth: 0.3
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
// This happens commonly with files I download from Overpass Turbo
Plot.plot({
projection: {
type: "mercator",
domain: osm_bagmati_admin7
},
marks: [
Plot.geo(osm_bagmati_admin7, {
stroke: "brown"
})
],
height: 300
})
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: {
type: "mercator",
domain: rewind(osm_bagmati_admin7)
},
marks: [
Plot.geo(rewind(osm_bagmati_admin7), {
stroke: "brown",
strokeWidth: 0.4
})
],
height: 400
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: {
type: "equirectangular",
// rotate: [-90, 0],
domain: moha_admin0 // this allows us to "focus" on our target polygon
},
marks: [
// Plot's default here is d3.geoGraticule10(), which is a convenience function using d3.geoGraticule()()
// To adjust the step, simply define your desired grid interval in degrees
// The first parameter controls longitude and the second controls latitude
// see: https://github.com/observablehq/plot/blob/main/README.md#plotgraticuleoptions
// see also: https://github.com/d3/d3-geo/blob/main/README.md#geoGraticule10
Plot.geo(d3.geoGraticule().step([1, 1])(), {
stroke: "red",
strokeOpacity: 0.3
}),
Plot.geo(moha_admin0),
Plot.geo(
await FileAttachment("ghimire_admin3_municipal_simplified-1.json").json(),
{ clip: "frame", stroke: "blue", strokeOpacity: 0.1 }
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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