height = width * 0.5
csv = FileAttachment("2018-Edited.csv").csv({typed: true})
// exporters = new Set(["MLI", "BEN", "BFA", "CIV", "TGO", "BEN", "GHA"])
exporters = new Set(["HRV"])
data = {
//const data = csv.filter(d => exporters.has(d.ISO));
const data = emigration.filter(d => exporters.has(d.ISO));
const total = d3.sum(data, d => d["Gross Export"]);
return data
.map(d => ({
source: d.ISO,
target: d.PartnerISO,
value: d["Gross Export"] / total
}))
.sort((a, b) => b.value - a.value);
}
emigration.filter(d => exporters.has(d.ISO))
// identify top import destinations
// importers = new Set(d3.rollups(data, v => d3.sum(v, d => d.value), d => d.target).filter(([,v]) => v > 0.02).map(([k,]) => k));
importers = new Set(
d3
.rollups(data, v => d3.sum(v, d => d.value), d => d.target)
.filter(([, v]) => v > 0.05)
.map(([k]) => k)
)
graph = {
// filter to importers
let paths = data
.filter(d => importers.has(d.target))
.map(d => Object.assign({}, d));
// add stops
paths.forEach(d => (d.stops = ["TUR"]));
// paths.forEach(d => {
// if (centroid(d.target)[0] > width / 2) d.stops = [...d.stops, "ESP"];
// });
// define nodes
const nodes = Array.from(
new Set(paths.flatMap(d => [d.source, ...d.stops, d.target])),
// new Set(paths.flatMap(d => [d.source, d.target])),
iso => {
const [x, y] = centroid(iso);
return { id: iso, x, y };
}
);
// define links
let links = [],
linkValues = new Map();
for (let path of paths) {
const stops = [path.source, ...path.stops, path.target];
// const stops = [path.source, path.target];
let pairs = d3
.pairs(stops)
.map(([source, target]) => ({ source, target, value: path.value }));
for (let pair of pairs) {
const key = `${pair.source} - ${pair.target}`;
const value = linkValues.get(key) || 0;
if (!value) links.push(pair);
linkValues.set(key, value + pair.value);
}
}
links.forEach(d => (d.value = linkValues.get(`${d.source} - ${d.target}`)));
return { nodes, links };
}
// import the inner workings of d3-sankey
import { sankey, sankeyLinkHorizontal } with { id, computeNodeValues, computeNodeBreadths } from "@bayre/deconstructed-sankey-diagram"
id = d => d.id
function computeNodeValues({nodes}) {
for (const node of nodes) {
node.value = Math.max(d3.sum(node.sourceLinks, d => d.value), d3.sum(node.targetLinks, d => d.value))
}
}
strokeWidth = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([0, 8])
function computeNodeBreadths({nodes}) {
for (const node of nodes) {
const height = strokeWidth(node.value);
node.x0 = node.x1 = node.x;
node.y0 = node.y - height / 2;
node.y1 = node.y0 + height;
for (const link of node.sourceLinks) {
link.width = strokeWidth(link.value);
}
}
reorderLinks(nodes);
}
function reorderLinks(nodes) {
for (const {sourceLinks, targetLinks} of nodes) {
sourceLinks.sort(ascendingTargetY);
targetLinks.sort(ascendingSourceY);
}
}
ascendingTargetY = (a, b) => a.target.y - b.target.y
ascendingSourceY = (a, b) => a.source.y - b.source.y
countries = {
const world = await FileAttachment("WorldMapSimplified-2.json").json();
return topojson.feature(world, world.objects.ne_10m_admin_0_countries_lakes).features;
}
poi = ({
type: "FeatureCollection",
features: countries.filter(d => exporters.has(d.properties.ISO_A3) || importers.has(d.properties.ISO_A3))
})
projection = proj4d3("+proj=laea +lon_0=53.44 +lat_0=19.67 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs")
.fitExtent([[20, 20], [width - 20, height - 20]], poi)
path = d3.geoPath(projection)
emigration = {
let retval = d3.csvParse(
await FileAttachment('export2019@2.csv').text(),
d3.autoType
);
return retval;
}
function centroid(iso) {
const country = countries.find(f => f.properties.ISO_A3 === iso);
return path.centroid(country);
}
d3 = require("d3@6")
topojson = require("topojson-client@3")
import { proj4d3 } from "@fil/proj4js-d3"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.