Plot.plot({
fx: { padding: 0.1, axis: null },
fy: { padding: 0.2, axis: null },
facet: {
data: views,
x: (_d, i) => i % noColumns,
y: (_d, i) => Math.floor(i / noColumns),
label: null
},
projection: {
type: "identity",
inset: 2,
domain: {
type: "MultiPoint",
coordinates: [
[0, 0],
[1000, 1000]
]
}
},
marks: [
Plot.frame({
fill: "steelblue",
fillOpacity: 0.1,
stroke: "#222"
}),
Plot.text(views, {
text: "name",
frameAnchor: "top",
dy: -20,
label: null,
fontSize: 16
}),
Plot.geo(views, {
geometry: (d) => d.projection(worldTopo),
fill: "#fff",
stroke: "#222",
strokeWidth: 0.5
}),
Plot.geo(views, {
geometry: (d) => d.projection(d.disputed),
stroke: "red",
fill: "red",
strokeWidth: 2,
strokeOpacity: 0.5,
fillOpacity: 1
})
]
})
pr = require("d3-geo-projection@4")
views = continentsDisputedAreasTopo.map((d, i) => ({
name: continentNames[i],
disputed: d,
projection: (
(proj) => (u) =>
pr.geoProject(u, proj)
)(
d3
.geoMercator()
.rotate([-d3.geoCentroid(d)[0], 0])
.fitSize([1000, 1000], d)
)
}))
worldTopo = topojson.feature(world, world.objects.ne_10m_admin_0_countries_rus)
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.
