Public
Edited
May 1
chart = {
const width = 928;
const height = width;
// Change this line to not destructure colors since they're no longer in data
const {names, linkValues, countryToContinent} = data;
const outerRadius = Math.min(width, height) * 0.5 - 70;
const innerRadius = outerRadius - 10;
const tickStep = d3.tickStep(0, d3.sum(data.flat()), 100);
const formatValue = d3.format(".1~%");
const chord = d3.chord()
.padAngle(10 / innerRadius)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
const ribbon = d3.ribbon()
.radius(innerRadius - 1)
.padAngle(1 / innerRadius);
// Use the dynamic color scale based on selection
const color = getColorScale(colorScheme, names, data, countryToContinent);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "width: 100%; height: auto; font: 10px sans-serif;");
// Add CSS styles for hover effects
svg.append("style").text(`
.chord-arc {
opacity: 1;
}
.chord-arc.fade {
opacity: 0.2;
}
.chord-arc:hover {
opacity: 0.9;
}
.chord-ribbon {
opacity: 0.8;
mix-blend-mode: multiply;
}
.chord-ribbon.fade {
opacity: 0.1;
}
`);
const chords = chord(data);
const group = svg.append("g")
.selectAll("g")
.data(chords.groups)
.join("g");
group.append("path")
.attr("class", "chord-arc")
.attr("fill", d => color(names[d.index]))
.attr("d", arc)
.attr("id", d => `arc-${d.index}`)
.on("mouseenter", function(event, d) {
// Fade all chords and arcs
svg.selectAll(".chord-ribbon, .chord-arc")
.classed("fade", true);
// Build array of connected indices
const connectedIndices = new Set();
// First identify all direct connections through ribbons
svg.selectAll(`.chord-ribbon.source-${d.index}, .chord-ribbon.target-${d.index}`)
.each(function(ribbonData) {
// Only add the connected index (not this arc's index)
if (ribbonData.source.index === d.index) {
connectedIndices.add(ribbonData.target.index);
} else {
connectedIndices.add(ribbonData.source.index);
}
})
.classed("fade", false);
// Add the current arc index
connectedIndices.add(d.index);
// Unfade only directly connected arcs and current arc
connectedIndices.forEach(index => {
svg.select(`#arc-${index}`).classed("fade", false);
});
})
.on("mouseleave", function() {
// Reset all elements to normal state
svg.selectAll(".chord-ribbon, .chord-arc")
.classed("fade", false);
});
group.append("title")
.text(d => `${names[d.index]}\n${formatValue(d.value)}`);
const groupTick = group.append("g")
.selectAll("g")
.data(d => groupTicks(d, tickStep))
.join("g")
.attr("transform", d => `rotate(${d.angle * 180 / Math.PI - 90}) translate(${outerRadius},0)`);
groupTick.append("text")
.attr("x", 8)
.attr("dy", "0.35em")
.attr("transform", d => d.angle > Math.PI ? "rotate(180) translate(-16)" : null)
.attr("text-anchor", d => d.angle > Math.PI ? "end" : null);
group.select("text")
.attr("font-weight", "bold")
.text(function(d) {
return this.getAttribute("text-anchor") === "end"
? `↑ ${names[d.index]}`
: `${names[d.index]} ↓`;
});
svg.append("g")
.attr("fill-opacity", 0.8)
.selectAll("path")
.data(chords)
.join("path")
.attr("class", d => `chord-ribbon source-${d.source.index} target-${d.target.index}`)
.attr("fill", d => color(names[d.source.index]))
.attr("d", ribbon)
.on("mouseenter", function(event, d) {
// Fade all chords and arcs
svg.selectAll(".chord-ribbon, .chord-arc")
.classed("fade", true);
// Keep only this chord visible
d3.select(this)
.classed("fade", false);
// Keep only connected arcs visible
const sourceArc = svg.select(`#arc-${d.source.index}`);
const targetArc = svg.select(`#arc-${d.target.index}`);
sourceArc.classed("fade", false);
targetArc.classed("fade", false);
})
.on("mouseleave", function() {
// Reset all elements to normal state
svg.selectAll(".chord-ribbon, .chord-arc")
.classed("fade", false);
})
.append("title")
.text(function(d){
let sourceName = names[d.source.index];
let targetName = names[d.target.index];
let sourceToTargetValue = linkValues[`${sourceName}_${targetName}`];
let targetToSourceValue = linkValues[`${targetName}_${sourceName}`];
let lineTitle = '';
if (sourceToTargetValue){
let fromSourceToTargetValue = formatBigNumber(linkValues[`${sourceName}_${targetName}`]);
lineTitle+=`${fromSourceToTargetValue} ${sourceName} → ${targetName}`;
}
if (targetToSourceValue && d.source.index !== d.target.index){
let fromTargetToSourceValue = formatBigNumber(linkValues[`${targetName}_${sourceName}`]);
lineTitle+=`\n${fromTargetToSourceValue} ${targetName} → ${sourceName}`;
}
return lineTitle;
});
return svg.node();
}
async function processData(dataType, viewType, countryLimit = 10, categoryFilter = "all") {
let tradeData, categoriesData, countriesData;
if (dataType === "exports") {
tradeData = await FileAttachment("exports.csv").csv();
if (viewType === "categories" || categoryFilter !== "all") {
const categoriesData1 = await FileAttachment("export_categories.csv").csv();
const categoriesData2 = await FileAttachment("export_categories@1.csv").csv();
categoriesData = [...categoriesData1, ...categoriesData2];
}
} else {
tradeData = await FileAttachment("imports.csv").csv();
if (viewType === "categories" || categoryFilter !== "all") {
const categoriesData1 = await FileAttachment("import_categories.csv").csv();
const categoriesData2 = await FileAttachment("import_categories@1.csv").csv();
categoriesData = [...categoriesData1, ...categoriesData2];
}
}
countriesData = await FileAttachment("countries.csv").csv();
const sourceColumn = "from";
const targetColumn = "to";
const volumeColumn = "value";
let items = [];
let volumeByItem = {};
let countryToContinent = {};
countriesData.forEach(d => {
countryToContinent[d.Country] = d.Continent;
});
// Apply category filter if selected
if (categoryFilter !== "all" && viewType !== "categories") {
// We need category data to find related country pairs
if (!categoriesData) {
if (dataType === "exports") {
const categoriesData1 = await FileAttachment("export_categories.csv").csv();
const categoriesData2 = await FileAttachment("export_categories@1.csv").csv();
categoriesData = [...categoriesData1, ...categoriesData2];
} else {
const categoriesData1 = await FileAttachment("import_categories.csv").csv();
const categoriesData2 = await FileAttachment("import_categories@1.csv").csv();
categoriesData = [...categoriesData1, ...categoriesData2];
}
}
// Filter trade data to only include entries related to the selected category
const categoryFilteredData = categoriesData.filter(d => d.category === categoryFilter);
const relatedPairs = {};
categoryFilteredData.forEach(d => {
const key = `${d.from}_${d.to}`;
relatedPairs[key] = true;
});
tradeData = tradeData.filter(d => {
const key = `${d[sourceColumn]}_${d[targetColumn]}`;
return relatedPairs[key];
});
}
if (viewType === "countries") {
// Regular logic - find volume for all countries
tradeData.forEach(d => {
const source = d[sourceColumn];
const volume = parseVolume(d[volumeColumn]);
volumeByItem[source] = (volumeByItem[source] || 0) + volume;
});
// Sort countries by volume in descending order
const sortedEntries = Object.entries(volumeByItem)
.sort((a, b) => b[1] - a[1]);
// Take top N countries
items = sortedEntries
.slice(0, parseInt(countryLimit))
.map(d => d[0]);
// If showing less than all countries, add "Other"
if (parseInt(countryLimit) < sortedEntries.length && countryLimit !== "197") {
// Calculate total volume for other countries
let othersVolume = 0;
for (let i = parseInt(countryLimit); i < sortedEntries.length; i++) {
othersVolume += sortedEntries[i][1];
}
// Add "Other" item
items.push("Other");
volumeByItem["Other"] = othersVolume;
}
} else if (viewType === "regions") {
tradeData.forEach(d => {
const source = d[sourceColumn];
const continent = countryToContinent[source] || "Unknown";
const volume = parseVolume(d[volumeColumn]);
volumeByItem[continent] = (volumeByItem[continent] || 0) + volume;
});
items = Object.entries(volumeByItem)
.sort((a, b) => b[1] - a[1])
.map(d => d[0]);
} else if (viewType === "categories") {
// For categories view, filter categories if a specific one is selected
if (categoryFilter !== "all") {
categoriesData = categoriesData.filter(d => d.category === categoryFilter);
}
categoriesData.forEach(d => {
const category = d.category;
const volume = parseVolume(d[volumeColumn]);
volumeByItem[category] = (volumeByItem[category] || 0) + volume;
});
items = Object.entries(volumeByItem)
.sort((a, b) => b[1] - a[1])
.slice(0, 10)
.map(d => d[0]);
}
const n = items.length;
const matrix = Array(n).fill().map(() => Array(n).fill(0));
const linkValues = {};
if (viewType === "countries") {
// We need to handle the "Other" category when building the matrix
const otherIdx = items.indexOf("Other");
tradeData.forEach(d => {
const source = d[sourceColumn];
const target = d[targetColumn];
let sourceIdx = items.indexOf(source);
let targetIdx = items.indexOf(target);
// Check if source country is in "Other" category
if (sourceIdx === -1 && otherIdx !== -1) {
sourceIdx = otherIdx;
}
// Check if target country is in "Other" category
if (targetIdx === -1 && otherIdx !== -1) {
targetIdx = otherIdx;
}
if (sourceIdx !== -1 && targetIdx !== -1) {
const volume = parseVolume(d[volumeColumn]);
const maxValue = 1e10;
// We need to accumulate for "Other_Other" case, not replace
const sourceKey = sourceIdx === otherIdx ? "Other" : source;
const targetKey = targetIdx === otherIdx ? "Other" : target;
const linkKey = `${sourceKey}_${targetKey}`;
linkValues[linkKey] = (linkValues[linkKey] || 0) + volume;
matrix[sourceIdx][targetIdx] += volume / maxValue;
}
});
} else if (viewType === "regions") {
tradeData.forEach(d => {
const source = countryToContinent[d[sourceColumn]] || "Unknown";
const target = countryToContinent[d[targetColumn]] || "Unknown";
const sourceIdx = items.indexOf(source);
const targetIdx = items.indexOf(target);
if (sourceIdx !== -1 && targetIdx !== -1) {
const volume = parseVolume(d[volumeColumn]);
const maxValue = 1e10;
linkValues[`${source}_${target}`] = volume;
matrix[sourceIdx][targetIdx] += volume / maxValue;
}
});
} else if (viewType === "categories") {
categoriesData.forEach(d => {
const category = d.category;
const target = d[targetColumn];
const sourceIdx = items.indexOf(category);
const targetIdx = items.indexOf(target);
if (sourceIdx !== -1 && targetIdx !== -1) {
const volume = parseVolume(d[volumeColumn]);
const maxValue = 1e10;
const linkKey = `${category}_${target}`;
linkValues[linkKey] = (linkValues[linkKey] || 0) + volume;
matrix[sourceIdx][targetIdx] += volume / maxValue;
}
});
}
const formattedData = Object.assign(matrix, {
names: items,
linkValues: linkValues,
countryToContinent: countryToContinent
});
return formattedData;
}
data = processData(dataType, viewType, countryLimit, categoryFilter)
function groupTicks(d, step) {
const k = (d.endAngle - d.startAngle) / d.value;
return d3.range(0, d.value, step).map(value => {
return {value: value, angle: value * k + d.startAngle};
});
}
// Function for parsing volume
function parseVolume(volStr) {
if (!volStr) return 0;
volStr = volStr.replace('$', '');
let factor = 1;
if (volStr.endsWith('B')) {
factor = 1e9;
volStr = volStr.replace('B', '');
} else if (volStr.endsWith('M')) {
factor = 1e6;
volStr = volStr.replace('M', '');
} else if (volStr.endsWith('K')) {
factor = 1e3;
volStr = volStr.replace('K', '');
}
return parseFloat(volStr) * factor;
}
//convert big number to readable format
function formatBigNumber(num) {
if (num >= 1e12) return (num / 1e12).toFixed(1) + 'T';
if (num >= 1e9) return (num / 1e9).toFixed(1) + 'B';
if (num >= 1e6) return (num / 1e6).toFixed(1) + 'M';
if (num >= 1e3) return (num / 1e3).toFixed(1) + 'k';
return num.toString();
}
async function loadCategories(dataType) {
let categoriesData, countriesData;
try {
// Load the countries list
countriesData = await FileAttachment("countries.csv").csv();
const countryNames = countriesData.map(d => d.Country);
// Load the categories data
if (dataType === "exports") {
const categoriesData1 = await FileAttachment("export_categories.csv").csv();
const categoriesData2 = await FileAttachment("export_categories@1.csv").csv();
categoriesData = [...categoriesData1, ...categoriesData2];
} else {
const categoriesData1 = await FileAttachment("import_categories.csv").csv();
const categoriesData2 = await FileAttachment("import_categories@1.csv").csv();
categoriesData = [...categoriesData1, ...categoriesData2];
}
// Extract unique categories
const allCategoryValues = [...new Set(categoriesData.map(d => d.category))];
// Exclude countries
const uniqueCategories = allCategoryValues.filter(category => {
return category && !countryNames.includes(category);
});
// Sort
return uniqueCategories.sort();
} catch (error) {
console.error("Error fetching categories:", error);
return [];
}
}
function getColorScale(schemeType, names, data, countryToContinent) {
switch(schemeType) {
case "region":
// Region-based coloring - assign same color to countries from same continent
const regionColors = {
"America": "#1f77b4",
"Europe": "#ff7f0e",
"Asia": "#2ca02c",
"Africa": "#d62728",
"Australia": "#9467bd",
"Unknown": "#999999"
};
return name => {
if (name === "Other") return "#999999";
// Check if this is a country or a category
if (countryToContinent[name]) {
// This is a country
const continent = countryToContinent[name];
return regionColors[continent] || "#999999";
} else {
// This is likely a category or unknown
// Use a different color scheme for categories
return d3.schemeCategory10[names.indexOf(name) % 10];
}
};
case "categorical":
// Categorical color scheme - assign colors from categorical scheme
// Using d3.schemeTableau10 as an example, can be changed to other schemes
const categoricalScale = d3.scaleOrdinal(d3.schemeTableau10);
// Sort countries by value for consistent coloring
const valueByItem = {};
names.forEach((name, i) => {
valueByItem[name] = d3.sum(data[i]);
});
const sortedNames = [...names].sort((a, b) => valueByItem[b] - valueByItem[a]);
sortedNames.forEach((name, i) => {
if (name !== "Other") categoricalScale(name);
});
return name => {
if (name === "Other") return "#999999";
return categoricalScale(name);
};
case "linear":
default:
// Linear color scheme (current implementation)
return d3.scaleOrdinal(names.map(name => {
if (name === "Other") return "#999999";
return d3.quantize(d3.interpolateRainbow, names.length - (names.includes("Other") ? 1 : 0))[names.indexOf(name)];
}));
}
}
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.
