Plot.plot({
projection: {
type: "equirectangular",
domain: worldGeo,
rotate: [-13, 0]
},
width,
marks: [
Plot.geo(worldGeo, {
fill: "#efefef",
stroke: "#222",
strokeWidth: 0.5,
strokeOpacity: 0.4
}),
Plot.dot(enriched_vpp, {
x: (d) => d[1][0].centroid[0],
y: (d) => d[1][0].centroid[1],
r: (d) => d[1].length,
fill: "red",
fillOpacity: 0.6,
stroke: "red",
range: [0, 100]
}),
Plot.tip(
enriched_vpp,
Plot.pointer({
x: (d) => d[1][0].centroid[0],
y: (d) => d[1][0].centroid[1],
maxRadius: 10,
title: (d) => [`${d[1][0].Location} (${d[1].length} instance)`]
})
)
]
})
projection = d3.geoNaturalEarth1()
worldGeo = {
const data = await FileAttachment(
"World_Countries_Generalized.geojson"
).json();
const featuresWithoutAntarctica = data.features.filter(
(f) => f.properties.ISO !== "AQ"
);
const transformedData = { ...data };
transformedData.features = featuresWithoutAntarctica;
return transformedData;
}
rScale = d3
.scaleSqrt()
.domain([0, d3.max(enriched_vpp.map((d) => d[1].length))])
.range([0, 1000000])
enriched_vpp1 = FileAttachment("enriched_VPP.json").json()
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.
