svg`
<svg height="496" 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(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: 400,
width: 400,
marginBottom: 24,
projection: {
inset: 32,
type: "mercator",
domain: continentsDisputedAreasTopo[0]
},
marks: [
Plot.frame({
fill: "steelblue",
fillOpacity: 1
}),
Plot.geo(worldTopo, {
fill: "#f1f1f1",
stroke: "#222",
strokeWidth: 0.5
}),
Plot.geo([continentsDisputedAreasTopo[0]], {
stroke: "#e50000",
fill: "#e50000",
strokeWidth: 7,
strokeOpacity: 0.7,
fillOpacity: 1
}),
Plot.geo([continentsDisputedAreasTopo[0]], {
stroke: "#e50000",
fill: "#e50000",
strokeWidth: 2,
strokeOpacity: 0.4,
fillOpacity: 1
}),
Plot.geo([continentsDisputedAreasTopo[0]], {
stroke: "#222",
strokeWidth: 0.5
})
]
})}
</g>
<g transform="translate(400,68)">
${Plot.plot({
height: 400,
width: 400,
marginBottom: 24,
projection: {
inset: 32,
type: "mercator",
domain: continentsDisputedAreasTopo[0]
},
marks: [
Plot.frame({
fill: "steelblue",
fillOpacity: 1
}),
Plot.geo(worldTopo, {
fill: "#f1f1f1",
stroke: "#222",
strokeWidth: 0.5
}),
Plot.geo([continentsDisputedAreasTopo[0]], {
stroke: "#e50000",
fill: "#e50000",
strokeWidth: 7,
strokeOpacity: 0.7,
fillOpacity: 1
}),
Plot.geo([continentsDisputedAreasTopo[0]], {
stroke: "#e50000",
fill: "#e50000",
strokeWidth: 2,
strokeOpacity: 0.4,
fillOpacity: 1
}),
Plot.geo([continentsDisputedAreasTopo[0]], {
stroke: "#222",
strokeWidth: 0.5
})
]
})}
</g>
</svg>
`
world = FileAttachment("ne_10m_admin_0_countries (2).json").json()
worldTopo = topojson.feature(world, world.objects.world)
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.
