Interested in dataviz and looking forward to a world where human brains are freed from being occupied with boring, repetitive, manual, click-copy-paste tasks.
Public
Edited
Jun 14, 2024
1 fork
1 star
chart = Plot.plot({
width: 960,
height: 600,
projection: {
type: "azimuthal-equal-area",
rotate: [-13, -59],
domain: {
type: "MultiPoint",
coordinates: focus
}
},
color: {
domain: sources,
range: colors
},
marks: [
Plot.sphere({ fill: "white" }),
Plot.geo(land),
Plot.graticule(),
Plot.geo(countries, {
stroke: "#333",
strokeWidth: 0.2,
fill: "#e1e1e1",
title: (d) => d.id
}),
Plot.geo(countrymesh, { stroke: "#999", strokeWidth: 0.5 }),
Plot.geo(upper_zones, {
stroke: "#FFF",
strokeWidth: 0.5,
fill: (d) => d.properties.legal_status,
fillOpacity: 0.5,
title: (d) =>
`${d.properties.name}\nlegal status: ${d.properties.legal_status}`
}),
Plot.text(
// -6.174316,68.015798
[{ longitude: -18, latitude: 67.85, label: "Upper airspace" }],
{
// Add text to the map using data from us_power_plants
x: "longitude",
y: "latitude",
text: "label",
fontSize: 22,
fontWeight: 400,
stroke: "white", // Adds white outer stroke to text (for readability)
fill: "black", // Text fill color
textAnchor: "start", // Left align text with the x- and y-coordinates
dx: 0 // Shifts text to the right (starting from left alignment with coordinate)
}
),
sources.map(
// Adding legend with circle swatches
(source, i) => [
Plot.dot([1], {
frameAnchor: "left",
r: 7,
fill: [source],
fillOpacity: 0.5,
stroke: "black",
strokeWidth: 0.7,
dy: i * 24 - 275,
dx: 682
}),
Plot.text([1], {
frameAnchor: "left",
fontSize: 22,
stroke: "white", // Adds white outer stroke to text (for readability)
fill: "black", // Text fill color
text: () =>
source == "1"
? "state body"
: source == "2"
? "State-owned enterprise"
: source == "3"
? "International organisation"
: "Public Private Partnership",
dy: i * 24 - 275 - 1,
dx: 705
})
]
),
lower_airspace_inset(),
Plot.sphere({ stroke: "#aaa" })
]
})
sources = [1, 2, 3, 4]
colors = [
state_body,
state_owned,
international_org,
public_private_partnership
]
state_body = d3.rgb(154, 163, 73)
state_owned = d3.rgb(120, 180, 240)
international_org = d3.rgb(0, 51, 102)
public_private_partnership = d3.rgb(225, 240, 96)
lower_zones = {
const zones = lower;
const subs = new Map(
status.map(({ id, legal_status }) => [id, { legal_status }])
);
for (const zone of zones.features) {
const v = subs.get(+zone.properties.id);
zone.properties.legal_status = v ? v.legal_status : undefined;
}
// filter out excluded zones
zones.features = zones.features.filter(
(d) => !excluded_zones.includes(d.properties.id)
);
return zones;
}
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.
