RendererSpatial JSON ViewerGrid map allocationGridded Region EditorCensus 2021 ExplorerUK Election 2024: Boundary DataAlpha shapesPolyLabelProjectionData TidierHello Colour MixingHello modern colour spacesGDS GraphSeeded Random NumbersAOC UtilitiesCalculating Stream Order from Open Rivers dataCurved Text MarkInteractive Time Range Input
GeoJSON Generator
{
const data = new GeoJSON().polygon([
[-5, 55],
[5, 55],
[5, 45],
[-5, 45]
]).featureCollection;
return Plot.plot({
width: 250,
projection: { type: "equal-earth", domain: data },
marks: [Plot.geo(data, { fill: "tan" })]
});
}
new GeoJSON().point([-5, 55], { id: 1 }).featureCollection
traj = new GeoJSON().line(
[
[-5, 55],
[2, 40]
],
{ id: 1, properties: { name: "Trajectory 1" } }
).featureCollection
{
const bounds = new GeoJSON()
.points([
[-8, 35],
[8, 60]
])
.boundingRect();
return Plot.plot({
height: 150,
width: 120,
projection: { type: "orthographic", domain: bounds },
marks: [
Plot.geo(traj, { stroke: "tan", strokeWidth: 2 }),
Plot.geo(bounds, { stroke: "lightGrey" })
]
});
}
{
const data = new GeoJSON()
.polygon([
[-3, 45],
[4, 45],
[4, 52],
[-3, 52]
])
.polygon([
[-3, 59],
[4, 59],
[4, 52],
[-3, 52]
]).featureCollection;
return Plot.plot({
height: 200,
width: 100,
inset: 4,
projection: { type: "orthographic", domain: data },
marks: [Plot.geo(data, { fill: "tan", stroke: "black" })]
});
}
{
const data = new GeoJSON()
.polygons(
[
[
[
[-3, 45],
[4, 45],
[4, 52],
[-3, 52]
]
],
[
[
[6, 48],
[9, 47],
[6.5, 46]
]
]
],
{ properties: { name: "Southland" } }
)
.polygon(
[
[-3, 59],
[4, 59],
[4, 52],
[-3, 52]
],
{ properties: { name: "Northville" } }
).featureCollection;
return Plot.plot({
height: 200,
width: 200,
inset: 4,
color: { legend: true },
projection: { type: "orthographic", domain: data },
marks: [Plot.geo(data, { fill: (d) => d.properties.name, stroke: "black" })]
});
}
{
const ukData = (
await new GeoJSON().from(
"https://gicentre.github.io/data/uk/ukRegions.json",
"regions"
)
).featureCollection; // Wait for file to load before extracting feature collection.
return Plot.plot({
width: 300,
projection: { type: "transverse-mercator", domain: ukData },
marks: [
Plot.geo(ukData, { fill: (d) => d.properties.shortName, opacity: 0.5 })
]
});
}
{
const worldData = (
await new GeoJSON().from(
"https://cdn.jsdelivr.net/npm/world-atlas/countries-110m.json",
"land"
)
).polygon([
[-20, -25],
[-30, -25],
[-30, 52],
[-20, 52]
]).featureCollection;
return Plot.plot({
projection: { type: "equal-earth", domain: worldData },
marks: [Plot.geo(worldData, { fill: "tan" })]
});
}
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.
