svg`
<svg height="896" width="800">
<g>
<text x="0" y="0" fill="#222" style="font-weight: bold; alignment-baseline: hanging; font-size: 32px;">
Disputed borders and territories
</text>
<text x="0" y="38" fill="#222" style="font-family: Verdana;alignment-baseline: hanging; font-size: 16px;">
<tspan fill="#e50000" style="alignment-baseline: hanging; font-size: 16px; font-weight: bold;">Disputes</tspan> over the possession or control of land between two or more political entities
</text>
</g>
<g transform="translate(482,729)" style="font-weight: bold; " >
<text fill="#222" style="alignment-baseline: middle;font-size: 96px; text-anchor: end;">
${totalDisputes}
</text>
<text dy="-11" dx="24" fill="#222" style="alignment-baseline: baseline;font-size: 48px;">
Ongoing
</text>
<text dy="-5" dx="24" fill="#e50000" style="alignment-baseline: hanging;font-size: 48px;">
Disputes
</text>
</g>
<g transform="translate(0,${896 - 4})" style="font-family: Verdana">
<text x="0" y="0" fill="#707070" style="">
Source: Natural Earth
</text>
<text x="${800}" y="0" fill="#707070" style="font-size: 16px; font-style: italic; text-anchor: end;">
© explained.media
</text>
</g>
<g transform="translate(0,68)">
${Plot.plot({
height: 800,
width: 800,
marginBottom: 24,
fx: { padding: 0.1, axis: null },
fy: { padding: 0.15, axis: null },
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.04
}),
Plot.text(views, {
text: (d) => `${d.name} (${d.amount} disputes)`,
frameAnchor: "bottom",
dy: 18,
label: null,
fontSize: 14,
fontFamily: "Verdana"
}),
Plot.geo(views, {
geometry: (d) => d.projection(worldTopo),
fill: "#f1f1f1",
stroke: "#222",
strokeWidth: 0.5
}),
Plot.geo(views, {
geometry: (d) => d.projection(d.disputed),
stroke: "#e50000",
fill: "#e50000",
strokeWidth: 7,
strokeOpacity: 0.7,
fillOpacity: 1
}),
Plot.geo(views, {
geometry: (d) => d.projection(d.disputed),
stroke: "#e50000",
fill: "#e50000",
strokeWidth: 2,
strokeOpacity: 0.4,
fillOpacity: 1
}),
Plot.frame({
stroke: "#fff",
strokeWidth: 1
})
]
})}
</g>
</svg>
`
pr = require("d3-geo-projection@4")
views = continentsDisputedAreasTopo.map((d, i) => ({
name: continentNames[i].replace(" (open ocean)", ""),
amount: d.features.length,
disputed: d,
projection: (
(proj) => (u) =>
pr.geoProject(u, proj)
)(
d3
.geoMercator()
.rotate([-d3.geoCentroid(d)[0], 0])
.fitSize([1000, 1000], d)
)
}))
totalDisputes = views.reduce((p, c) => (p += c.amount), 0)
worldTopo = topojson.feature(world, world.objects.ne_10m_admin_0_countries)
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.
