globe.plot({
projection: {type: "equirectangular", rotate: [160, 0, 0], inset: -450},
width: width,
height: 500,
})
globe = Plot.marks([Plot.graticule(), Plot.geo(land, {fill: "currentColor"}), Plot.sphere()])
globe.plot({height: 640, inset: -100, projection: {type: "orthographic", rotate: [160, -30]}})
globe.plot({
width: 360,
projection: {
type: "azimuthal-equidistant",
rotate: [0, 90],
clip: 30, // 🇦🇶 comment this line out
domain: d3.geoCircle().center([0, -90]).radius(30)(),
inset: 2
}
})
Plot.plot({
projection: { type: "identity", domain: westport },
marks: [Plot.geo(westport)]
})
globe.plot({
width: 350,
height: 454,
projection: {
type: "conic-conformal",
rotate: [60, 0],
parallels: [-5, -42],
domain: {type: "MultiPoint", coordinates: [[-90, 0], [-30, 0], [-60, 15], [-60, -60]]}
}, marks: [Plot.frame()]
})
Plot.plot({
width: 320,
height: 200,
projection: {
type: "conic-equal-area",
rotate: [96, 0],
parallels: [29.5, 45.5],
domain: states48
},
marks: [Plot.geo(states48, { strokeWidth: 1.5 })]
})
Plot.plot({
width: 320,
height: 200,
projection: "albers",
marks: [
Plot.geo(statesMesh, { strokeOpacity: 0.5 }), // see appendix for statesMesh and nation
Plot.geo(states48, { strokeWidth: 1.5 })
]
})
Plot.plot({
width: 1152,
projection: "albers-usa",
marks: [
Plot.geo(countiesMesh, { strokeOpacity: 0.15 }),
Plot.geo(statesMesh, { strokeOpacity: 0.5 }),
Plot.geo(nation, {
strokeWidth: 1.5
})
]
})
globe.plot({
width: 454,
height: 454,
projection: {
type: "azimuthal-equal-area",
rotate: [-10, -52],
domain: {type: "MultiPoint", coordinates: [[-16, 52], [42, 52], [10, 32], [10, 70]]}
}, marks: [Plot.frame()]
})
globe.plot({
width: 454,
height: 454,
marginBottom: 2,
projection: {
type: "mercator",
rotate: [-133, 27],
domain: {type: "MultiPoint", coordinates: [[113, -24], [154, -28], [141, -10.5], [146, -44]]}
}, marks: [Plot.frame()]
})
globe.plot({
width: 454,
height: 454,
projection:
{
type: "equirectangular",
domain: {
type: "MultiPoint",
coordinates: [
[54, 12],
[21, -36],
[-19, 14],
[10, 39]
]
}
}
})
<div style="display: flex;">
${globeF().plot({
width: 454,
height: 454,
projection: {
type: "azimuthal-equidistant",
rotate: [0, -90],
domain: {type:"MultiPoint", coordinates: [[-90, 65], [90, 65]]},
}
})}
${globeF().plot({
width: 474,
height: 454,
marginLeft: 20,
projection: {
type: "azimuthal-equidistant",
rotate: [0, 90],
domain: {type:"MultiPoint", coordinates: [[-90, -65], [90, -65]]},
}
})}
</div>
world = FileAttachment("land-110m.json").json()
land = topojson.feature(world, world.objects.land)
us = FileAttachment("us-counties-10m.json").json()
nation = topojson.feature(us, us.objects.nation)
counties48 = us.objects.counties.geometries.filter(
({ id }) =>
!["02", "15", "60", "66", "69", "72", "78"].includes(id.slice(0, 2)) // removes Alaska, Hawaii etc.
)
states48 = topojson.merge(us, counties48)
statesMesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
countiesMesh = topojson.mesh(us, us.objects.counties, (a, b) => a !== b)
westport = FileAttachment("westport-house.json").json()
// a version of globe that clips to the frame
globeF = (marks) =>
Plot.marks([
Plot.graticule({ clip: "frame" }),
Plot.geo(land, { fill: "currentColor", clip: "frame" }),
Plot.sphere(),
marks
])
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.
