Plot.plot({
height: 800,
width: 800,
fx: { padding: 0.1, tickPadding: 0, ticks: [] },
fy: { padding: 0.15, tickPadding: 0, ticks: [] },
facet: {
data: views,
x: (_d, i) => i % noColumns,
y: (_d, i) => Math.floor(i / noColumns)
},
projection: {
type: "identity",
inset: 32,
domain: views[0].projection(continentsDisputedAreasTopo[0])
},
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: 5,
strokeOpacity: 0.7,
fillOpacity: 1
}),
Plot.geo(views, {
geometry: (d) => d.projection(d.disputed),
stroke: "red",
fill: "red",
strokeWidth: 2,
strokeOpacity: 0.4,
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.
