Inputs.table(aiddata)
aiddata = {
const data = await d3.csv(googleSheetCsvUrl, row => ({
yearDate: d3.timeParse('%Y')(row.year),
yearInt: +row.year,
donor: row.donor,
recipient: row.recipient,
amount: +row.commitment_amount_usd_constant,
purpose: row.coalesced_purpose_name,
}));
data.columns = Object.keys(data[0]);
return data;
}
geoJSON = FileAttachment("countries-50m.json").json()
import {legend, swatches} from "@d3/color-legend"
// add cells here
top_10_recipients = d3.rollups(
aiddata,
group => d3.sum(group, d => d.amount),
d => d.recipient
).sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 10);
recipients = d3.map(top_10_recipients, data=>data[0])
top_20_donors = d3.rollups(
aiddata,
group => d3.sum(group, d => d.amount),
d => d.donor
).sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 20);
donors = d3.map(top_20_donors, data=>data[0])
data = {var filteredData = aiddata.filter(function(d) {
return recipients.includes(d.recipient) && donors.includes(d.donor);
});
var result = [];
recipients.forEach(function(recipient) {
var recipientEntry = { index: recipient };
// Initialize each donor's amount to 0 for the recipient
donors.forEach(function(donor) {
recipientEntry[donor] = 0;
});
// Filter data for the current recipient
var recipientData = filteredData.filter(function(d) {
return d.recipient === recipient;
});
// Calculate the sum of donations for each donor
recipientData.forEach(function(d) {
recipientEntry[d.donor] += d.amount;
});
result.push(recipientEntry);
});
return result}
height = width
margin = ({top: width/10, right: width/10, bottom: width/5, left: width/5})
x = d3.scaleBand()
.domain(recipients)
.range([margin.left, width - margin.right])
.padding(0.01)
y = d3.scaleBand()
.domain(donors)
.range([height - margin.bottom, margin.top])
.padding(0.01)
max_value = d3.max(aiddata, data=>data.amount)
color = d3.scaleSequential()
.domain([0, max_value])
.interpolator(d3.interpolateBrBG)
d3 = require('d3@7')
googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv'
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.
