Plot.plot({
height: 4 * 400 + 3 * 8,
width: 2 * 400 + 8,
margin: 0,
marks: [
plots.map(
(p, i) => (a, b, c, context) =>
svg`
<g transform="translate(${i % 2 === 0 ? 0 : 408}, ${
Math.floor(i / 2) * 408
})">
${p}
</g>`
)
]
})
plots = continentsDisputedAreasTopo.map((da) => {
return Plot.plot({
projection: {
type: "mercator",
inset: 12,
domain: da,
rotate: [-12, 0]
},
// size and margins
height: 400,
width: 400,
margin: 0,
marks: [
Plot.frame({ fill: "#f7fbfd" }),
Plot.graticule({ stroke: "#737373" }),
Plot.geo(worldTopo, {
fill: "#fff",
stroke: "#222",
strokeWidth: 0.5
}),
Plot.geo(da, {
stroke: "red",
fill: "red",
strokeWidth: 10,
strokeOpacity: 0.5,
fillOpacity: 1
}),
Plot.frame()
]
});
})
world = FileAttachment("russiaPOV.json").json()
disputedAreasTopo = topojson.feature(
disputedAreas,
disputedAreas.objects.ne_10m_admin_0_disputed_areas
)
continentsDisputedAreas = d3.group(disputedAreasTopo.features, (d) => d.properties.CONTINENT)
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.
