3e:null 3f:["$","title",null,{"children":"Mini-Project 3 Final | Fariha Syed | Observable"}] 45:T5ad,md`----------------- ## Visualization 1 Create an overview of the relationships between countries so that it is possible to see who donates to whom and how much. The main question one should be able to answer is: who are the major donors and to which countries do they donate the most and how much? And conversely, who are the major receivers and which countries do they receive from the most and how much? We only care about the top 10 recipients and the top 20 donors (over the whole time) for this question. For this question, I chose to experiment with matrix (1.1) and fixed-layout visualizations (1.2 and 1.3). We can divide our data into two categories, donors and recipients, so I felt the matrix and Sankey charts were particularly appropriate and effective. I tried creating a force-directed graph, but the end result was cluttered. Furthermore, the degree of each node is at most 2, so the nodes don't really create a structure, which is the primary focus of force-directed graphs. Therefore, I opted for fixed-layout visualizations. I think the Sankey diagram better delineates between donors and recipient since each group is on their respective side. However, the donors and recipients are not mutually exclusive groups; South Korea, Saudi Arabia, and Kuwait have both donated and received money. This detail can be easy to skip over in the matrix and Sankey visualizations, but the circular fixed-layout diagram makes this clearer. `46:Tbbf,{ const cellSize = 30; const tileWidth = donors.size * cellSize; const tileHeight = recipients.size * cellSize; const visWidth = tileWidth + heatMargin.left + heatMargin.right; const visHeight = tileHeight + heatMargin.top + heatMargin.bottom; const svg = d3 .create('svg') .attr('width', visWidth) .attr('height', visHeight); const g = svg .append("g") .attr("transform", `translate(${heatMargin.left}, ${heatMargin.top})`); const y = d3 .scaleBand() .domain(recipients) .range([0, tileHeight]) .paddingInner(0.1); const x = d3 .scaleBand() .domain( Array.from(donors).sort((a, b) => d3.descending(order.get(a), order.get(b)) ) ) .range([0, tileWidth]) .paddingInner(0.1); const xAxis = d3.axisTop(x).tickSize(0); const yAxis = d3.axisLeft(y).tickSize(0); axisText(g, { name: 'x', axis: xAxis }, heatMargin); axisText(g, { name: 'y', axis: yAxis }, heatMargin); const xPadding = x.step() * x.paddingInner(); const yPadding = y.step() * y.paddingInner(); background(g, x, y, tileWidth, tileHeight, visWidth, visHeight); g.append('g') .selectAll('rect') .data(data.links) .join('rect') .attr('x', d => x(d.source)) .attr('y', d => y(d.target)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => donationIntensity(d.value)) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); const tooltip = g.append('g').attr('visibility', 'hidden'); const tooltipHeight = 15; const tooltipRect = tooltip .append('rect') .attr('fill', darkgray) .attr('rx', 5) .attr('height', tooltipHeight); const tooltipText = tooltip .append('text') .attr('fill', 'white') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('dy', 2) .attr('dx', 2) .attr('dominant-baseline', 'hanging'); function mouseEnter(event, d) { d3.select(this) .attr('stroke', darkgray) .attr('stroke-width', yPadding / 2); tooltipText.text( `${[d.source, d.target].join(" → ")}\n${formatValue(d.value)}` ); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const xPos = x(d.source) + x.bandwidth(); const yPos = y(d.target) - tooltipHeight / 2; tooltip .attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeave(event, d) { d3.select(this).attr('stroke', 'none'); tooltip.attr('visibility', 'hidden'); } heatText(g, 'Donors', { location: 'x', margin: heatMargin, width: tileWidth, height: tileHeight }); heatText(g, 'Recipients', { location: 'y', margin: heatMargin, width: tileWidth, height: tileHeight }); heatText(g, visualization1Title, { location: 'title', margin: heatMargin, width: tileWidth, height: tileHeight }); return svg.node(); }47:Tfc5,a = { const margin = { top: 40, right: 70, bottom: 10, left: 80 }; const visWidth = width; const visHeight = 650; const sankey = d3 .sankey() .nodeWidth(15) .nodePadding(10) .nodeSort(null) .linkSort(null) .extent([ [margin.left, margin.top], [visWidth - margin.right, visHeight - margin.bottom] ]); const { nodes, links } = sankey({ nodes: graph.nodes.map(d => ({ ...d })), links: graph.links.map(d => ({ ...d })) }); const svg = d3.create("svg").attr("viewBox", [0, 0, visWidth, visHeight]); svg .append("g") .selectAll("rect") .data(nodes.sort((a, b) => b.value - a.value)) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr('text-anchor', d => (d.x0 < visWidth / 2 ? 'end' : 'start')) .attr("fill", d => lightgray) .on('mouseenter', nodeEnter) .on('mouseleave', nodeLeave); const tooltip = svg.append('g').attr('visibility', 'hidden'); const tooltipHeight = 15; const tooltipRect = tooltip .append('rect') .attr('fill', darkgray) .attr('rx', 5) .attr('height', tooltipHeight); const tooltipText = tooltip .append('text') .attr('fill', 'white') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('dy', 2) .attr('dx', 2) .attr('dominant-baseline', 'hanging'); function nodeEnter(event, d) { d3.select(this) .attr('stroke', darkgray) .attr('stroke-width', 2); tooltipText.text(`${formatValue(d.value)}`); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const xPos = (d.x0 + d.x1) / 2; const yPos = (d.y0 + d.y1) / 2; tooltip .attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function nodeLeave(event, d) { d3.select(this).attr('stroke', 'none'); tooltip.attr('visibility', 'hidden'); } svg .append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => intensity(d3.interpolateBuPu)(d.value)) .attr("stroke-width", d => d.width) .style("mix-blend-mode", "multiply") .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); function mouseEnter(event, d) { tooltipText.text(`${d.names.join(" → ")}\n${formatValue(d.value)}`); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const pos = d3.pointer(event); const xPos = pos[0] + 5; const yPos = pos[1] + 4; tooltip .attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeave(event, d) { tooltip.attr('visibility', 'hidden'); } svg .append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width / 2 ? d.x1 - 20 : d.x0 + 20)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < visWidth / 2 ? "end" : "start")) .text(d => d.name); svg .append('text') .attr('font-size', 12) .attr('x', margin.left / 2) .attr('y', 30) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'baseline') .text('Donors'); svg .append('text') .attr('font-size', 12) .attr('x', visWidth - margin.right / 2) .attr('y', 30) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'baseline') .text('Recipients'); svg .append('text') .attr('x', visWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization1Title); return svg.node(); }48:T479,md`### 1.3 Fixed Layout Network Borrowed heavily from [Chord Dependency](https://observablehq.com/@d3/chord-dependency-diagram?collection=@d3/d3-chord) **Advantages** - Within a single donor, easier than 1.1 to see how much/what proportion is given to each of its recipients because it encodes quantity not only via color intensity but also ribbon thickness - Hover over ribbon to see how much a donor sends to its recipient - Hover over node to see total amount incoming and outgoing - Less cluttered than 1.2 - Easier to see countries that are both donors and recipients than in 1.1 and 1.2 **Disadvantages** - Color intensity not most accurate channel to encode quantitative variables - Can hover over for exact amount, but comparison would require relying on human memory - Within a single donor, more difficult than 1.2 to see what proportion a single donor gives to each of its recipients because positions are not aligned, so ribbon thickness harder to compare - More difficult than 1.1 to see countries that donate/receive smaller amounts - ribbon thickness is so thin and color intensity so light that ribbon basically disappears `49:T1007,{ const visWidth = 1100; const visHeight = 700; const margin = { top: 30, right: 70, bottom: 10, left: 80 }; const svg = d3 .create("svg") .attr("viewBox", [ -visWidth / 2, -visHeight / 2 - margin.top, visWidth, visHeight + margin.top ]); const innerRadius = Math.min(visWidth, visHeight) * 0.5 - 65; const outerRadius = innerRadius + 6; const chord = d3 .chordDirected() .padAngle(10 / innerRadius) .sortSubgroups(d3.descending) .sortChords(d3.descending); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius(outerRadius); const ribbon = d3 .ribbonArrow() .radius(innerRadius - 1) .padAngle(1 / innerRadius); const chords = chord(matrix); const group = svg .append("g") .attr("font-size", 10) .attr("font-family", "sans-serif") .selectAll("g") .data(chords.groups) .join("g") .on('mouseenter', groupEnter) .on('mouseleave', mouseLeave); group .append("path") .attr("fill", d => lightgray) .attr("d", arc); group .append("text") .each(d => (d.angle = (d.startAngle + d.endAngle) / 2)) .attr("dy", "0.35em") .attr( "transform", d => ` rotate(${(d.angle * 180) / Math.PI - 90}) translate(${outerRadius + 5}) ${d.angle > Math.PI ? "rotate(180)" : ""} ` ) .attr("text-anchor", d => (d.angle > Math.PI ? "end" : null)) .text(d => all[d.index]); const tooltip = svg.append('g').attr('visibility', 'hidden'); const tooltipHeight = 15; const tooltipRect = tooltip .append('rect') .attr('fill', darkgray) .attr('rx', 5) .attr('height', tooltipHeight); const tooltipText = tooltip .append('text') .attr('fill', 'white') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('dy', 2) .attr('dx', 2) .attr('dominant-baseline', 'hanging'); function groupEnter(event, d) { d3.select(this) .attr('stroke', darkgray) .attr('stroke-width', 2) .selectAll('text') .attr('stroke', 'none'); tooltipText.text(`${all[d.index]} ${formatValue( d3.sum(chords, c => (c.source.index === d.index) * c.source.value) )} outgoing → ${formatValue( d3.sum(chords, c => (c.target.index === d.index) * c.source.value) )} incoming ←`); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const pos = d3.pointer(event); const xPos = pos[0] + 5; // x(d.source) + x.bandwidth(); const yPos = pos[1] + 4; // y(d.target) - tooltipHeight / 2; tooltip .attr('transform', `translate(${xPos}, ${yPos})`) .attr('visibility', 'visible'); } svg .append("g") .attr("fill-opacity", 0.75) .selectAll("path") .data(chords) .join("path") .style("mix-blend-mode", "multiply") .attr("fill", d => intensity(d3.interpolateBuPu)(d.target.value)) .attr("d", ribbon) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); function mouseEnter(event, d) { d3.select(this) .attr('stroke', darkgray) .attr('stroke-width', 3); tooltipText.text( `${all[d.source.index]} → ${all[d.target.index]} ${formatValue( d.source.value )}` ); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const pos = d3.pointer(event); const xPos = pos[0] + 5; // x(d.source) + x.bandwidth(); const yPos = pos[1] + 4; // y(d.target) - tooltipHeight / 2; tooltip .attr('transform', `translate(${xPos}, ${yPos})`) .attr('visibility', 'visible'); } function mouseLeave(event, d) { d3.select(this).attr('stroke', 'none'); tooltip.attr('visibility', 'hidden'); } svg .append('text') .attr('x', 3) .attr('y', -visHeight / 2 - margin.top) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization1Title); return svg.node(); }4a:T763,{ const margin = { top: 20, right: 10, bottom: 5, left: 10 }; const visWidth = 300 - margin.left - margin.right; const visHeight = 60 - margin.top - margin.bottom; const svg = d3 .create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const totals = [0.1, 1, 5, 10, 15]; const col = d3 .scaleBand() .domain(d3.range(totals.length)) .range([0, visWidth]); const purposes_ = [ { purpose: "Air transport", amount: 1, recipientTotal: scale }, { purpose: "Rail transport", amount: 1, recipientTotal: scale }, { purpose: "Industrial development", amount: 1, recipientTotal: scale }, { purpose: "Power generation/non-renewable sources", amount: 1, recipientTotal: scale }, { purpose: "RESCHEDULING AND REFINANCING", amount: 1, recipientTotal: scale } ]; const legendData = []; for (let i = 0; i < totals.length; i++) { const p = purposes_ .map(d => ({ ...d })) .map(d => { d.recipientTotal *= totals[i]; return d; }); legendData.push(p); } const legend = g .append("g") .selectAll("g") .data(legendData) .join("g") .attr("transform", (d, i) => `translate(${col(i)}, 0)`); legend .selectAll('path') .data(d => pie(d)) .join('path') .attr('d', (d, i) => arc(d)) .attr('fill', d => purposeColor(d.data.purpose)); legend .append("text") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("dominant-baseline", "baseline") .text('text-anchor', 'middle') .attr('dx', -margin.left) .attr("dy", maxRadius + 15) .text((d, i) => formatValue(totals[i] * scale)); return svg.node(); }4b:T14de,{ const visWidth = tileWidth + heatMargin.left + heatMargin.right; const visHeight = tileHeight + heatMargin.top + heatMargin.bottom; const svg = d3 .create('svg') .attr('width', visWidth) .attr('height', visHeight); const g = svg .append("g") .attr("transform", `translate(${heatMargin.left}, ${heatMargin.top})`); const xAxis = d3.axisTop(column).tickSize(0); const yAxis = d3.axisLeft(row).tickSize(0); const xPadding = row.step() * row.paddingInner(); const yPadding = column.step() * column.paddingInner(); background(g, column, row, tileWidth, tileHeight, visWidth, visHeight); // const background = g.append('g'); // background // .append('rect') // .attr('width', tileWidth) // .attr('height', tileHeight) // .attr('fill', '#eeeeee'); // background // .append('g') // .selectAll('line') // .data(donorTransactionsByRecipientByPurpose.map(d => d.country)) // .join('line') // .attr('x1', d => column(d) - xPaddingSize / 2) // .attr('x2', d => column(d) - xPaddingSize / 2) // .attr('y1', 0) // .attr('y2', visHeight) // .attr('stroke-width', xPaddingSize) // .attr('stroke', 'white'); // background // .append('g') // .selectAll('line') // .data(recipientsToNumDonors.map(d => d.recipient)) // .join('line') // .attr('y1', d => row(d) - yPaddingSize / 2) // .attr('y2', d => row(d) - yPaddingSize / 2) // .attr('x1', 0) // .attr('x2', visWidth) // .attr('stroke-width', yPaddingSize) // .attr('stroke', 'white'); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("transform", `rotate(90)`) .attr('dx', -10) .attr("text-anchor", "end") .attr("dominant-baseline", "hanging"); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("text-anchor", "end") .attr("dominant-baseline", "middle"); const cells = g .append('g') .selectAll('g') .data(donorTransactionsByRecipientByPurposeFlat) .join('g') .attr( 'transform', d => `translate(${column(d.donor)}, ${row(d.recipient)})` ); const groups = cells .selectAll('g') .data(donorTransactionsByRecipientByPurposeFlat) .join('g') .attr( 'transform', d => `translate(${column.bandwidth() / 2}, ${row.bandwidth() / 2})` ); groups .append('path') .data(d => pie(d.purposes)) .join('path') .attr('d', d => arc(d)) .attr('fill', d => purposeColor(d.data.purpose)) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); const tooltip = g.append('g').attr('visibility', 'hidden'); const tooltipHeight = 15; const tooltipRect = tooltip .append('rect') .attr('fill', darkgray) .attr('rx', 5) .attr('height', tooltipHeight); const tooltipText = tooltip .append('text') .attr('fill', 'white') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('dy', 2) .attr('dx', 2) .attr('dominant-baseline', 'hanging'); function mouseEnter(event, d) { d3.select(this) .attr('stroke', 'black') .attr('stroke-width', yPadding / 2); tooltipText.text(`${d.data.purpose}, ${formatValue(d.data.amount)}`); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const xPos = column(d.data.source) + column.bandwidth(); const yPos = row(d.data.target) - tooltipHeight / 2; tooltip .attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeave(event, d) { d3.select(this).attr('stroke', 'none'); tooltip.attr('visibility', 'hidden'); } heatText(g, 'Donors', { location: 'x', margin: heatMargin, width: tileWidth, height: tileHeight }); heatText(g, 'Donors', { location: 'x', margin: heatMargin, width: tileWidth, height: tileHeight }); heatText(g, 'Recipients', { location: 'y', margin: heatMargin, width: tileWidth, height: tileHeight }); heatText(g, 'Relative ' + visualization2Title, { location: 'title', margin: heatMargin, width: tileWidth, height: tileHeight }); // g.append('text') // .attr('font-size', 12) // .attr('x', tileWidth / 2) // .attr('y', -70) // .attr('fill', 'black') // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'baseline') // .text('Donors'); // g.append('text') // .attr('font-size', 12) // .attr('x', -tileHeight / 2) // .attr('y', -65) // .attr('fill', 'black') // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'baseline') // .attr("transform", `rotate(-90)`) // .text('Recipients'); // svg // .append('text') // .attr('x', (visWidth + margin.left) / 2) // .attr('y', 0) // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'hanging') // .text('Relative ' + visualization2Title); return svg.node(); }4c:T17d2,{ const margin = { top: 60, right: 70, bottom: 10, left: 80 }; const visWidth = width; const visHeight = 650; const sankey = d3 .sankey() .nodeWidth(15) .nodePadding(10) .nodeSort(d3.descending) .linkSort(null) .extent([ [margin.left, margin.top], [visWidth - margin.right, visHeight - margin.bottom] ]); const purposeGraph = {}; { let index = -1; const nodes = []; const nodeByKey = new Map(); const indexByKey = new Map(); const links = []; const keys = ['donor', 'purpose', 'recipient']; for (const key of keys) { for (const d of purposeSankeyData) { const key_ = JSON.stringify([key, d[key]]); if (nodeByKey.has(key_)) { continue; } const node = { name: d[key] }; nodes.push(node); nodeByKey.set(key_, node); indexByKey.set(key_, ++index); } } for (let i = 1; i < keys.length; ++i) { const source = keys[i - 1]; const target = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new Map(); for (const link of purposeSankeyData) { const names = prefix.map(e => link[e]); const key = JSON.stringify(names); const value = link.amount || 1; let link_ = linkByKey.get(key); if (link_) { link_.value += value; continue; } link_ = { source: indexByKey.get(JSON.stringify([source, link[source]])), target: indexByKey.get(JSON.stringify([target, link[target]])), names, value }; links.push(link_); linkByKey.set(key, link_); } } purposeGraph.nodes = nodes; purposeGraph.links = links; } const { nodes, links } = sankey({ nodes: purposeGraph.nodes.map(d => ({ ...d })), links: purposeGraph.links .map(d => ({ ...d })) .sort((a, b) => d3.descending(a.value, b.value)) }); const svg = d3.create("svg").attr("viewBox", [0, 0, visWidth, visHeight]); svg .append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr('text-anchor', d => (d.x0 < visWidth / 2 ? 'end' : 'start')) .attr("fill", d => new Set(purposes).has(d.name) ? purposeColor(d.name) : lightgray ) .on('mouseenter', nodeEnter) .on('mouseleave', nodeLeave); const tooltip = svg.append('g').attr('visibility', 'hidden'); const tooltipHeight = 15; const tooltipRect = tooltip .append('rect') .attr('fill', darkgray) .attr('rx', 5) .attr('height', tooltipHeight); const tooltipText = tooltip .append('text') .attr('fill', 'white') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('dy', 2) .attr('dx', 2) .attr('dominant-baseline', 'hanging'); function nodeEnter(event, d) { d3.select(this) .attr('stroke', darkgray) .attr('stroke-width', 2); tooltipText.text(`${formatValue(d.value)}`); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const xPos = (d.x0 + d.x1) / 2; const yPos = (d.y0 + d.y1) / 2; tooltip .attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function nodeLeave(event, d) { d3.select(this).attr('stroke', 'none'); tooltip.attr('visibility', 'hidden'); } svg .append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => new Set(purposes).has(d.source.name) ? purposeIntensity(d.source.name, d.value) : new Set(purposes).has(d.target.name) ? purposeDonationIntensity(d.target.name, d.value) : lightgray ) .attr("stroke-width", d => d.width) .style("mix-blend-mode", "multiply") .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); // .text(d => `${d.names.join(" → ")}\n${formatValue(d.value)}`); function mouseEnter(event, d) { tooltipText.text(`${d.names.join(" → ")}\n${formatValue(d.value)}`); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const pos = d3.pointer(event); const xPos = pos[0] + 5; const yPos = pos[1] + 4; tooltip .attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeave(event, d) { tooltip.attr('visibility', 'hidden'); } svg .append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width / 2 ? d.x1 - 20 : d.x0 + 20)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < visWidth / 2 ? "end" : "start")) .text(d => d.name); svg .append('text') .attr('font-size', 12) .attr('x', margin.left / 2) .attr('y', 40) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'baseline') .text('Donors'); svg .append('text') .attr('font-size', 12) .attr('x', visWidth / 2) .attr('y', 40) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'baseline') .text('Purposes'); svg .append('text') .attr('font-size', 12) .attr('x', visWidth - margin.right / 2) .attr('y', 40) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'baseline') .text('Recipients'); svg .append('text') .attr('x', (visWidth + margin.left / 1.5) / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization2Title); return svg.node(); }4d:T78e,md`----------------- ## Visualization 3 For this last exercise you have to extend the analysis above to see how the patterns of donations change over time. Focusing again on the top 10 recipients and top 20 donors how do the patterns of donations (who donates to whom and how much) change over time? Are there sudden changes? Are there countries that always donate to other countries? Are there major shifts (say a country used to donate to a specific set of countries and then it changes to other countries)? For this visualization, each data point has four dimensions: donor, recipient, year, and amount. 1.1 illustrates how a 2D visualization can encode three of those dimensions: donor, recipient, and amount. There are several methods to the additional dimension, such as through faceting and/or small multiples. However, we're visualizing 40+ years' worth of data, and given the size of the matrix for a single year, we'd end up creating a large visualization that we probably couldn't fit in a single screen. Instead of making it easier to compare between years, I think scrolling would make it more difficult. We could mitigate this by aggregating the data, which will decrease the number of graphs we'd have to show. However, I felt making the visualization interactive would be a better solution because we typically aggregate data in consistent blocks e.g. every 5 years, 10 years but history doesn't occur that conveniently. Certain events may result in a country receiving more aid for some duration of time when it typically doesn't receive that much aid, and that trend would be difficult to see if we aggregate the data. Since the question's focus is not on the actual magnitudes but patterns, I chose to scale the data locally. This makes it easier to see who donated or received the most within a year (our eyes are immediately drawn to the darker cells), and therefore makes it easier to compare between years. `4e:Td1e,{ const cellSize = 30; const tileWidth = donors.size * cellSize; const tileHeight = recipients.size * cellSize; const visWidth = tileWidth + heatMargin.left + heatMargin.right; const visHeight = tileHeight + heatMargin.top + heatMargin.bottom; const svg = d3 .create('svg') .attr('width', visWidth) .attr('height', visHeight); const g = svg .append("g") .attr("transform", `translate(${heatMargin.left}, ${heatMargin.top})`); const y = d3 .scaleBand() .domain(recipients) .range([0, tileHeight]) .paddingInner(0.1); const x = d3 .scaleBand() .domain(donors) .range([0, tileWidth]) .paddingInner(0.1); const xAxis = d3.axisTop(x).tickSize(0); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("transform", `translate(-5, -${heatMargin.top / 15}) rotate(90)`) .attr("text-anchor", "end") .attr("dominant-baseline", "baseline"); const yAxis = d3.axisLeft(y).tickSize(0); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("text-anchor", "end") .attr('dx', -2); background(g, x, y, tileWidth, tileHeight, visWidth, visHeight); const xPadding = x.step() * x.paddingInner(); const yPadding = y.step() * y.paddingInner(); g.append('g') .selectAll('rect') .data(dataBySelectedYear(year)) .join('rect') .attr('x', d => x(d.source)) .attr('y', d => y(d.target)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => yearDataIntensity(year)(d.value)) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); const tooltip = g.append('g').attr('visibility', 'hidden'); const tooltipHeight = 15; const tooltipRect = tooltip .append('rect') .attr('fill', darkgray) .attr('rx', 5) .attr('height', tooltipHeight); const tooltipText = tooltip .append('text') .attr('fill', 'white') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('dy', 2) .attr('dx', 2) .attr('dominant-baseline', 'hanging'); function mouseEnter(event, d) { d3.select(this) .attr('stroke', darkgray) .attr('stroke-width', yPadding / 2); tooltipText.text( `${[d.source, d.target].join(" → ")}\n${formatValue(d.value)}` ); const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 4); const xPos = x(d.source) + x.bandwidth(); const yPos = y(d.target) - tooltipHeight / 2; tooltip .attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } function mouseLeave(event, d) { d3.select(this).attr('stroke', 'none'); tooltip.attr('visibility', 'hidden'); } heatText(g, 'Donors', { location: 'x', margin: heatMargin, width: tileWidth, height: tileHeight }); heatText(g, 'Donors', { location: 'x', margin: heatMargin, width: tileWidth, height: tileHeight }); heatText(g, 'Recipients', { location: 'y', margin: heatMargin, width: tileWidth, height: tileHeight }); heatText(g, visualization3Title, { location: 'title', margin: heatMargin, width: tileWidth, height: tileHeight }); return svg.node(); }4f:T690,graph = { let index = -1; const nodes = []; const nodeByKey = new Map(); const indexByKey = new Map(); const links = []; const keys = ['source', 'target']; for (const key of keys) { for (const d of links_) { const key_ = JSON.stringify([key, d[key]]); if (nodeByKey.has(key_)) { continue; } const node = { name: d[key] }; nodes.push(node); nodeByKey.set(key_, node); indexByKey.set(key_, ++index); } } for (let i = 1; i < keys.length; ++i) { const source = keys[i - 1]; const target = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new Map(); for (const link of links_) { const names = prefix.map(e => link[e]); const key = JSON.stringify(names); const value = link.value || 1; let link_ = linkByKey.get(key); if (link_) { link_.value += value; continue; } link_ = { source: indexByKey.get(JSON.stringify([source, link[source]])), target: indexByKey.get(JSON.stringify([target, link[target]])), names, value }; links.push(link_); linkByKey.set(key, link_); } } // nodes.sort((a, b) => // d3.descending(topDonorsMap.get(a.name), topDonorsMap.get(b.name)) // ); // links.sort((a, b) => d3.descending(a.value, b.value)); const nodes_ = Array.from( d3.rollup(links_, v => d3.sum(v, d => d.value), d => d.source), ([name, value]) => ({ name, value }) ) .sort((a, b) => d3.descending(a.value, b.value)) .map(d => { return { name: d.name }; }); return { nodes, links }; // return { nodes: nodes_, links: links }; }50:T494,donorTransactionsByRecipientByPurpose = donorTransactionsArray .map(d => ({ ...d })) .map(d => { d.transactions = Array.from( d3.rollup( d.transactions, v => d3.sum(v, d => d.commitment_amount), e => e.recipient, e => e.coalesced_purpose_name ), ([recipient, purposes_]) => { const purposesArray = Array.from(purposes_, ([purpose, amount]) => ({ purpose, amount })).filter(e => new Set(purposes).has(e.purpose)); const purposeTotal = d3.sum(purposesArray, e => e.amount); purposesArray.map(e => { e.recipientTotal = purposeTotal; e.source = d.country; e.target = recipient; return e; }); const countryTotal = d3.sum(purposesArray, e => e.amount); return { donor: d.country, recipient: recipient, purposes: purposesArray, recipientTotal: purposeTotal, donorTotal: d.total }; } ).filter(d => d.purposes.length > 0); return d; }) .sort( (a, b) => b.total - a.total || b.transactions.length - a.transactions.length )51:T7a5,// { // // set up // const margin = { top: 50, right: 75, bottom: 5, left: 75 }; // const visWidth = width - margin.left - margin.right; // const visHeight = 800 - margin.top - margin.bottom; // const thickness = d3 // .scaleLinear() // .domain([0, d3.max(data.links, d => d.value)]) // .range([0.5, 10]); // const svg = d3 // .create('svg') // .attr('width', visWidth + margin.left + margin.right) // .attr('height', visHeight + margin.top + margin.bottom); // const g = svg // .append("g") // .attr("transform", `translate(${margin.left}, ${margin.top})`); // // create scale // const sources = d3 // .scalePoint() // .domain(donors) // .range([0, visHeight]); // const targets = d3 // .scalePoint() // .domain(recipients) // .range([0, visHeight]); // // create and add axes // const leftAxis = d3.axisLeft(sources).tickSize(0); // const rightAxis = d3.axisRight(targets).tickSize(0); // g.append("g") // .call(leftAxis) // .call(g => g.selectAll(".domain").remove()) // .append("text") // .attr("x", -6) // .attr("y", -30) // .attr("fill", "black") // .attr("text-anchor", "middle") // .text("Source"); // g.append("g") // .attr('transform', `translate(${visWidth},0)`) // .call(rightAxis) // .call(g => g.selectAll(".domain").remove()) // .append("text") // .attr("x", 6) // .attr("y", -30) // .attr("fill", "black") // .attr("text-anchor", "middle") // .text("Target"); // // draw lines // g.append('g') // .selectAll('line') // .data(data.links) // .join('line') // .attr('x1', 0) // .attr('x2', visWidth) // .attr('y1', d => sources(d.source)) // .attr('y2', d => targets(d.target)) // .attr('stroke', 'black') // .attr('stroke-width', d => thickness(d.value)) // .attr('stroke-linecap', 'round'); // return svg.node(); // } 'parallel'52:Tfc0,'force layout' // legend({ // color: edgeIntensity, // title: "Commitment Amount", // tickFormat: '~s' // }) // swatches({ color: statusColor }) // { // // margin convention // const margin = { top: 25, right: 5, bottom: 25, left: 5 }; // const visWidth = width - margin.left - margin.right; // const visHeight = 750 - margin.top - margin.bottom; // const svg = d3 // .create('svg') // .attr('width', visWidth + margin.left + margin.right) // .attr('height', visHeight + margin.top + margin.bottom); // const g = svg // .append("g") // .attr("transform", `translate(${margin.left}, ${margin.top})`); // const nodeRadius = 30; // const nodesForce = data.nodes.map(d => ({ ...d })); // const linksForce = data.links.map(d => ({ ...d })); // // create the simulation // const simulation = d3 // .forceSimulation(nodesForce) // // the first argument is a name for the force // // pull nodes with links together // .force('link', d3.forceLink(linksForce).id(d => d.name)) // // set mean position of nodes to be center of vis // .force('center', d3.forceCenter(visWidth / 2, visHeight / 2)) // // make nodes repel each other // .force('manyBody', d3.forceManyBody().strength(d => d.value)) // // prevent overlapping circles // .force('collision', d3.forceCollide(nodeRadius * 2.5)); // svg // .append('defs') // .append('marker') // .attr('id', 'triangle') // .attr('viewBox', '0 0 10 10') // .attr('refX', 1) // .attr('refY', 5) // .attr('markerUnits', 'strokeWidth') // .attr('markerWidth', 5) // .attr('markerHeight', 5) // .attr('orient', 'auto') // .append('path') // .attr('d', 'M 0 0 L 10 5 L 0 10 z') // .attr('fill', 'black'); // // add polyline for edges, we don't need to set their positions yet. // // we are using a polyline here instead of a line so that it will // // be easier to place the arrow in the middle of the line // const thickness = d3 // .scaleSqrt() // .domain([0, d3.max(linksForce, d => d.value)]) // .range([1, 10]); // const edges = g // .append('g') // .selectAll('polyline') // .data(linksForce) // .join('polyline') // .attr('stroke', d => edgeIntensity(d.value)) // .attr('fill', 'none') // .attr('stroke-width', d => thickness(d.value)) // // put triangle in the middle of the polyline // .attr('marker-mid', 'url(#triangle)'); // // add a group for each node, we don't need to set their positions yet // const vertices = g // .append('g') // .selectAll('g') // .data(nodesForce) // .join('g'); // // add circle to each group // vertices // .append('circle') // .attr('r', nodeRadius) // .attr('fill', d => statusColor(status(d.name))); // // add text to each group // vertices // .append('text') // .attr('fill', 'white') // .attr('dominant-baseline', 'middle') // .attr('text-anchor', 'middle') // .attr('font-family', 'sans-serif') // .attr('font-size', d => 10) // .text(d => // d.name == 'United States' // ? 'USA' // : d.name == 'United Kingdom' // ? 'UK' // : d.name // ); // // update the positions of the vertices and edges on each simulation tick // simulation.on('tick', () => { // vertices.attr('transform', d => `translate(${d.x},${d.y})`); // edges.attr('points', d => { // // get the midpoint of the line // // this is where the triangle will go // const midX = (d.source.x + d.target.x) / 2; // const midY = (d.source.y + d.target.y) / 2; // // polylines are specified by space sepatated string of x,y coordinates // return `${d.source.x},${d.source.y} ${midX},${midY} ${d.target.x},${d.target.y}`; // }); // }); // // this line is not needed off of observable // // it stops the current simulation when the cell is re-run // invalidation.then(() => simulation.stop()); // return svg.node(); // }53:T19e7,'donor recipient' // { // const margin = { top: 60, right: 70, bottom: 10, left: 80 }; // const visWidth = width; // const visHeight = 650; // const sankey = d3 // .sankey() // .nodeWidth(15) // .nodePadding(10) // .nodeSort(d3.descending) // .linkSort(null) // .extent([ // [margin.left, margin.top], // [visWidth - margin.right, visHeight - margin.bottom] // ]); // const purposeGraph = {}; // { // let index = -1; // const nodes = []; // const nodeByKey = new Map(); // const indexByKey = new Map(); // const links = []; // const keys = ['purpose', 'donor', 'recipient']; // for (const key of keys) { // for (const d of purposeSankeyData) { // const key_ = JSON.stringify([key, d[key]]); // if (nodeByKey.has(key_)) { // continue; // } // const node = { name: d[key] }; // nodes.push(node); // nodeByKey.set(key_, node); // indexByKey.set(key_, ++index); // } // } // for (let i = 1; i < keys.length; ++i) { // const source = keys[i - 1]; // const target = keys[i]; // const prefix = keys.slice(0, i + 1); // const linkByKey = new Map(); // for (const link of purposeSankeyData) { // const names = prefix.map(e => link[e]); // const key = JSON.stringify(names); // const value = link.amount || 1; // let link_ = linkByKey.get(key); // if (link_) { // link_.value += value; // continue; // } // link_ = { // source: indexByKey.get(JSON.stringify([source, link[source]])), // target: indexByKey.get(JSON.stringify([target, link[target]])), // names, // value // }; // links.push(link_); // linkByKey.set(key, link_); // } // } // purposeGraph.nodes = nodes; // purposeGraph.links = links; // } // const { nodes, links } = sankey({ // nodes: purposeGraph.nodes.map(d => ({ ...d })), // links: purposeGraph.links // .map(d => ({ ...d })) // .sort((a, b) => d3.descending(a.value, b.value)) // }); // const svg = d3.create("svg").attr("viewBox", [0, 0, visWidth, visHeight]); // const x0s = Array.from(new Set(nodes.map(d => d.x0))); // const x1s = Array.from(new Set(nodes.map(d => d.x1))); // svg // .append("g") // .selectAll("rect") // .data(nodes.filter(d => !new Set(purposes).has(d.name))) // .join("rect") // .each(d => (d.x0 = d.x0 == x0s[1] ? x0s[0] : d.x0)) // .each(d => (d.x1 = d.x1 == x1s[1] ? x1s[0] : d.x1)) // .attr("x", d => d.x0) // .attr("y", d => d.y0) // .attr("height", d => d.y1 - d.y0) // .attr("width", d => d.x1 - d.x0) // .attr('text-anchor', d => (d.x0 < visWidth / 2 ? 'end' : 'start')) // .attr("fill", d => lightgray) // .on('mouseenter', nodeEnter) // .on('mouseleave', nodeLeave); // const tooltip = svg.append('g').attr('visibility', 'hidden'); // const tooltipHeight = 15; // const tooltipRect = tooltip // .append('rect') // .attr('fill', darkgray) // .attr('rx', 5) // .attr('height', tooltipHeight); // const tooltipText = tooltip // .append('text') // .attr('fill', 'white') // .attr('font-family', 'sans-serif') // .attr('font-size', 10) // .attr('dy', 2) // .attr('dx', 2) // .attr('dominant-baseline', 'hanging'); // function nodeEnter(event, d) { // d3.select(this) // .attr('stroke', darkgray) // .attr('stroke-width', 2); // tooltipText.text(`${formatValue(d.value)}`); // const labelWidth = tooltipText.node().getComputedTextLength(); // tooltipRect.attr('width', labelWidth + 4); // const xPos = (d.x0 + d.x1) / 2; // const yPos = (d.y0 + d.y1) / 2; // tooltip // .attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function nodeLeave(event, d) { // d3.select(this).attr('stroke', 'none'); // tooltip.attr('visibility', 'hidden'); // } // svg // .append("g") // .attr("fill", "none") // .selectAll("g") // .data(links.filter(d => !new Set(purposes).has(d.source.name))) // .join("path") // .attr("d", d3.sankeyLinkHorizontal()) // .attr("stroke", d => // new Set(purposes).has(d.source.name) // ? topPurposeIntensity(d.source.name) // : donors.has(d.source.name) && recipients.has(d.target.name) // ? purposeIntensity(d.names[0], d.value) // : lightgray // ) // .attr("stroke-width", d => d.width) // .style("mix-blend-mode", "multiply") // .on('mouseenter', mouseEnter) // .on('mouseleave', mouseLeave); // function mouseEnter(event, d) { // tooltipText.text(`${d.names.join(" → ")}\n${formatValue(d.value)}`); // const labelWidth = tooltipText.node().getComputedTextLength(); // tooltipRect.attr('width', labelWidth + 4); // const pos = d3.pointer(event); // const xPos = pos[0] + 5; // const yPos = pos[1] + 4; // tooltip // .attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function mouseLeave(event, d) { // tooltip.attr('visibility', 'hidden'); // } // svg // .append("g") // .style("font", "10px sans-serif") // .selectAll("text") // .data(nodes.filter(d => !new Set(purposes).has(d.name))) // .join("text") // .attr("x", d => (d.x0 < width / 2 ? d.x1 - 20 : d.x0 + 20)) // .attr("y", d => (d.y1 + d.y0) / 2) // .attr("dy", "0.35em") // .attr("text-anchor", d => (d.x0 < visWidth / 2 ? "end" : "start")) // .text(d => d.name); // svg // .append('text') // .attr('font-size', 12) // .attr('x', margin.left / 2) // .attr('y', 40) // .attr('fill', 'black') // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'baseline') // .text('Donors'); // svg // .append('text') // .attr('font-size', 12) // .attr('x', visWidth - margin.right / 2) // .attr('y', 40) // .attr('fill', 'black') // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'baseline') // .text('Recipients'); // svg // .append('text') // .attr('x', visWidth / 2) // .attr('y', 0) // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'hanging') // .text(visualization2Title); // return svg.node(); // }54:T1a20,'purpose donor recipient' // { // const margin = { top: 60, right: 70, bottom: 10, left: 190 }; // const visWidth = width; // const visHeight = 650; // const sankey = d3 // .sankey() // .nodeWidth(15) // .nodePadding(10) // .nodeSort(d3.descending) // .linkSort(null) // .extent([ // [margin.left, margin.top], // [visWidth - margin.right, visHeight - margin.bottom] // ]); // const purposeGraph = {}; // { // let index = -1; // const nodes = []; // const nodeByKey = new Map(); // const indexByKey = new Map(); // const links = []; // const keys = ['purpose', 'donor', 'recipient']; // for (const key of keys) { // for (const d of purposeSankeyData) { // const key_ = JSON.stringify([key, d[key]]); // if (nodeByKey.has(key_)) { // continue; // } // const node = { name: d[key] }; // nodes.push(node); // nodeByKey.set(key_, node); // indexByKey.set(key_, ++index); // } // } // for (let i = 1; i < keys.length; ++i) { // const source = keys[i - 1]; // const target = keys[i]; // const prefix = keys.slice(0, i + 1); // const linkByKey = new Map(); // for (const link of purposeSankeyData) { // const names = prefix.map(e => link[e]); // const key = JSON.stringify(names); // const value = link.amount || 1; // let link_ = linkByKey.get(key); // if (link_) { // link_.value += value; // continue; // } // link_ = { // source: indexByKey.get(JSON.stringify([source, link[source]])), // target: indexByKey.get(JSON.stringify([target, link[target]])), // names, // value // }; // links.push(link_); // linkByKey.set(key, link_); // } // } // purposeGraph.nodes = nodes; // purposeGraph.links = links; // } // const { nodes, links } = sankey({ // nodes: purposeGraph.nodes.map(d => ({ ...d })), // links: purposeGraph.links // .map(d => ({ ...d })) // .sort((a, b) => d3.descending(a.value, b.value)) // }); // const svg = d3.create("svg").attr("viewBox", [0, 0, visWidth, visHeight]); // svg // .append("g") // .selectAll("rect") // .data(nodes) // .join("rect") // .attr("x", d => d.x0) // .attr("y", d => d.y0) // .attr("height", d => d.y1 - d.y0) // .attr("width", d => d.x1 - d.x0) // .attr('text-anchor', d => (d.x0 < visWidth / 2 ? 'end' : 'start')) // .attr( // "fill", // d => (new Set(purposes).has(d.name) ? purposeColor(d.name) : darkgray) // ) // .on('mouseenter', nodeEnter) // .on('mouseleave', nodeLeave); // const tooltip = svg.append('g').attr('visibility', 'hidden'); // const tooltipHeight = 15; // const tooltipRect = tooltip // .append('rect') // .attr('fill', darkgray) // .attr('rx', 5) // .attr('height', tooltipHeight); // const tooltipText = tooltip // .append('text') // .attr('fill', 'white') // .attr('font-family', 'sans-serif') // .attr('font-size', 10) // .attr('dy', 2) // .attr('dx', 2) // .attr('dominant-baseline', 'hanging'); // function nodeEnter(event, d) { // d3.select(this) // .attr('stroke', darkgray) // .attr('stroke-width', 2); // tooltipText.text(`${formatValue(d.value)}`); // const labelWidth = tooltipText.node().getComputedTextLength(); // tooltipRect.attr('width', labelWidth + 4); // const xPos = (d.x0 + d.x1) / 2; // const yPos = (d.y0 + d.y1) / 2; // tooltip // .attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function nodeLeave(event, d) { // d3.select(this).attr('stroke', 'none'); // tooltip.attr('visibility', 'hidden'); // } // svg // .append("g") // .attr("fill", "none") // .selectAll("g") // .data(links) // .join("path") // .attr("d", d3.sankeyLinkHorizontal()) // .attr("stroke", d => // new Set(purposes).has(d.source.name) // ? topPurposeIntensity(d.source.name) // : donors.has(d.source.name) && recipients.has(d.target.name) // ? purposeIntensity(d.names[0], d.value) // : lightgray // ) // .attr("stroke-width", d => d.width) // .style("mix-blend-mode", "multiply") // .on('mouseenter', mouseEnter) // .on('mouseleave', mouseLeave); // function mouseEnter(event, d) { // tooltipText.text(`${d.names.join(" → ")}\n${formatValue(d.value)}`); // const labelWidth = tooltipText.node().getComputedTextLength(); // tooltipRect.attr('width', labelWidth + 4); // const pos = d3.pointer(event); // const xPos = pos[0] + 5; // const yPos = pos[1] + 4; // tooltip // .attr('transform', `translate(${xPos},${yPos})`) // .attr('visibility', 'visible'); // } // function mouseLeave(event, d) { // tooltip.attr('visibility', 'hidden'); // } // svg // .append("g") // .style("font", "10px sans-serif") // .selectAll("text") // .data(nodes) // .join("text") // .attr("x", d => (d.x0 < width / 2 ? d.x1 - 20 : d.x0 + 20)) // .attr("y", d => (d.y1 + d.y0) / 2) // .attr("dy", "0.35em") // .attr("text-anchor", d => (d.x0 < visWidth / 2 ? "end" : "start")) // .text(d => d.name); // svg // .append('text') // .attr('font-size', 12) // .attr('x', margin.left / 2) // .attr('y', 40) // .attr('fill', 'black') // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'baseline') // .text('Purposes'); // svg // .append('text') // .attr('font-size', 12) // .attr('x', (visWidth + margin.left / 1.5) / 2) // .attr('y', 40) // .attr('fill', 'black') // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'baseline') // .text('Donors'); // svg // .append('text') // .attr('font-size', 12) // .attr('x', visWidth - margin.right / 2) // .attr('y', 40) // .attr('fill', 'black') // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'baseline') // .text('Recipients'); // svg // .append('text') // .attr('x', (visWidth + margin.left / 1.5) / 2) // .attr('y', 0) // .attr('font-family', 'sans-serif') // .attr('text-anchor', 'middle') // .attr('dominant-baseline', 'hanging') // .text(visualization2Title); // return svg.node(); // }55:T638,'purpose graph' // purposeGraph = { // let index = -1; // const nodes = []; // const nodeByKey = new Map(); // const indexByKey = new Map(); // const links = []; // const keys = ['donor', 'purpose', 'recipient']; // for (const key of keys) { // for (const d of purposeSankeyData) { // const key_ = JSON.stringify([key, d[key]]); // if (nodeByKey.has(key_)) { // continue; // } // const node = { name: d[key] }; // nodes.push(node); // nodeByKey.set(key_, node); // indexByKey.set(key_, ++index); // } // } // for (let i = 1; i < keys.length; ++i) { // const source = keys[i - 1]; // const target = keys[i]; // const prefix = keys.slice(0, i + 1); // const linkByKey = new Map(); // for (const link of purposeSankeyData) { // const names = prefix.map(e => link[e]); // const key = JSON.stringify(names); // const value = link.amount || 1; // let link_ = linkByKey.get(key); // if (link_) { // link_.value += value; // continue; // } // link_ = { // source: indexByKey.get(JSON.stringify([source, link[source]])), // target: indexByKey.get(JSON.stringify([target, link[target]])), // names, // value // }; // links.push(link_); // linkByKey.set(key, link_); // } // } // // nodes.sort((a, b) => // // d3.descending(topDonorsMap.get(a.name), topDonorsMap.get(b.name)) // // ); // // links.sort((a, b) => d3.descending(a.value, b.value)); // return { nodes, links }; // }56:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1619715459210.621,"size":4177662}] 43:{"id":"9daa1e847a7624de","slug":null,"title":"Mini-Project 3 Final","thumbnail":"b5d2172ab4e5e59111ad4aae2b1b5763746fb0f4dbcb5295288a6eed29ef40d1","access_level":"public","create_time":"$D2021-04-29T16:57:39.210Z","update_time":"$D2021-05-02T23:09:02.956Z","view_time":null,"first_public_time":"$D2023-07-05T14:36:06.156Z","has_unpublished_edits":null,"fork":{"id":"0f9702976f3f9fdc","slug":null,"title":"Mini-Project 3","owner":{"id":"130c247dbd6add4a","login":"farihasyed","name":"Fariha Syed"}},"stars":0,"starred":false,"owner":{"type":"team","id":"130c247dbd6add4a","login":"farihasyed","name":"Fariha Syed","avatar_url":"https://avatars-next.observableusercontent.com/ed23b4fb3a25635f7e5f8009e30a7d388130c282e9660c2fe7704aa6a89a4f09","tier":"starter_2024","bio":"","following":false},"version":4836,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3bd922eb76d970ac","login":"farihasyed","name":"Fariha Syed","avatar_url":"https://avatars-next.observableusercontent.com/ed23b4fb3a25635f7e5f8009e30a7d388130c282e9660c2fe7704aa6a89a4f09","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3bd922eb76d970ac","login":"farihasyed","name":"Fariha Syed","avatar_url":"https://avatars-next.observableusercontent.com/ed23b4fb3a25635f7e5f8009e30a7d388130c282e9660c2fe7704aa6a89a4f09","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 3 Final","cells":[{"id":21,"value":"md`# Mini-Project 3 Final`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"md`### 1.1 Heat Map\n\n**Advantages**\n- Easy to deduce each recipient country's biggest donor\n- Compact visualization that should scale well should we choose to increase number of countries we're analyzing\n- Hover over cell for exact amount\n\n**Disadvantages**\n- Color intensity not most accurate channel to encode quantitative variables\n - Can hover over for exact amount, but comparison would require relying on human memory\n- More difficult than 1.2 to see how what proportion a single donor gives to each of its recipients\n- For top 5 donors, easy to see who they donate the most to, but as commitment amounts decrease and color intensity lightens, it gets more and more and more difficult\n - Not an inherent disadvantage of the type of visualization but arises from the combination of how the data is distributed and the graph \n- More difficult to notice there are countries that were both donors and recipients than in 1.3\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"legend({\n color: donationIntensity,\n title: \"Commitment Amount\",\n tickFormat: formatValue //'~s'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"md`### 1.2 Sankey Diagram\n\nBorrowed heavily from [Parallel Sets](https://observablehq.com/@d3/parallel-sets)\n\n**Advantages**\n- Within a single donor, easier than 1.1 to see how much/what proportion is given to each of its recipients because it encodes quantity not only via color intensity but also ribbon thickness\n- Hover over ribbon to see how much a donor sends to its recipient\n- Hover over node to see total amount donor sends or a recipient receives\n\n**Disadvantages**\n- Color intensity not most accurate channel to encode quantitative variables\n - More difficult than 1.1 to see countries that donate/receive smaller amounts - ribbon thickness is so thin and color intensity so light that ribbon basically disappears\n - Can hover over for exact amount, but comparison would require relying on human memory\n- More difficult to notice there are countries that were both donors and recipients than in 1.3\n- Cluttered?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"legend({\n color: intensity(d3.interpolateBuPu),\n title: \"Commitment Amount\",\n tickFormat: formatValue\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"legend({\n color: intensity(d3.interpolateBuPu),\n title: \"Commitment Amount\",\n tickFormat: formatValue\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`-----------------\n## Visualization 2\n\nConsidering only the top 5 purposes of donation, how does the relationship between countries look like in terms of purposes? What composition (distribution) of purposes do the donations between each pair of countries have? Are there countries that donate to a given country using multiple purposes? Or do countries always donate using one single purpose when donating to another country? The same as the previous question, we only care about the top 10 recipients and the top 20 donors here.\n\nFor visualization 2, I took a similar approach to visualization 1. We're essentially visualizing the same data, but with an added dimension: purposes. 2.1 is a matrix visualization just like 1.1, but color intensity is replaced by pie charts. 1.2 and 2.2 are also similar, except that the latter uses color hue to encode purposes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"md`### 2.1 Matrix with Pie Charts\n\n**Advantages**\n- Easier to compare relative amounts for purposes than 2.2\n- Hover over pie slice for exact amount\n\n**Disadvantages**\n- Have to hover for exact amounts\n - Comparison would require relying on human memory\n- Magnitude for total amount encoded via size - not most accurate\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"swatches({ color: purposeColor })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1840,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4330,"value":"md`### 2.2 Sankey Map\n\n**Advantages**\n- Easier to understand actual magnitudes rather than relative amounts as in 2.1\n- Hover over a ribbon to see how much a donor sends to its recipient\n- Can also see how much each donor donates to a purpose unlike in 2.1\n\n**Disadvantages**\n- Color intensity not most accurate channel to encode quantitative data\n - Can hover over for exact amount, but comparison would require relying on human memory\n- More difficult to compare relative amounts for purposes than 2.1\n- Cluttered?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2201,"value":"swatches({ color: purposeColor })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2203,"value":"legend({\n color: d3\n .scaleSequential()\n .domain(purposeExtent2)\n .interpolator(d3.interpolateGreys),\n title: \"Commitment Amount\",\n tickFormat: formatValue\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4784,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4104,"value":"md`### 3.1 Interactive Heat Map\n\n**Advantages**\n- Interactive\n- Locally scaled\n- Compact visualization that should scale well should we choose to increase number of countries we're analyzing\n\n**Disadvantages**\n- Difficult to compare across years because only shows one year at a time\n- Color intensity not most accurate channel to encode quantitative variables\n - Can hover over for exact amount, but comparison would require relying on human memory\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2327,"value":"viewof year = Scrubber(years, { delay: 1000, loop: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2404,"value":"legend({\n color: yearDataIntensity(year),\n title: \"Commitment Amount\",\n tickFormat: formatValue\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2340,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`-----------------\n## Data Transformation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"aiddata_ = (await d3.csv(googleSheetCsvUrl, row => ({\n yearDate: d3.timeParse('%Y')(row.year),\n yearInt: +row.year,\n aiddata_id: row.aiddata_id,\n aiddata_2_id: row.aiddata_2_id,\n donor: row.donor,\n recipient: row.recipient,\n commitment_amount: +row.commitment_amount_usd_constant,\n coalesced_purpose_code: row.coalesced_purpose_code,\n coalesced_purpose_name: row.coalesced_purpose_name,\n})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"geoJSON_ = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`Clean country names to match \\`aiddata\\` and \\`geoJSON\\` and filter by donors and recipients we're focusing on.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"aiddata = {\n for (let i = 0; i < aiddata_.length; i++) {\n if (aiddata_[i].donor == 'United States of America') {\n aiddata_[i].donor = 'United States';\n } else if (aiddata_[i].donor == 'Korea') {\n aiddata_[i].donor = 'South Korea';\n } else if (aiddata_[i].donor == 'Slovak Republic') {\n aiddata_[i].donor = 'Slovakia';\n }\n if (aiddata_[i].recipient == 'United States of America') {\n aiddata_[i].recipient = 'United States';\n } else if (aiddata_[i].recipient == 'Korea') {\n aiddata_[i].recipient = 'South Korea';\n } else if (aiddata_[i].recipient == 'Slovak Republic') {\n aiddata_[i].recipient = 'Slovakia';\n }\n }\n return aiddata_;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"geoJSON = {\n for (let i = 0; i < geoJSON_.features.length; i++) {\n if (geoJSON_.features[i].properties.NAME == \"Czechia\") {\n geoJSON_.features[i].properties.NAME = 'Czech Republic';\n } else if (\n geoJSON_.features[i].properties.NAME == 'United States of America'\n ) {\n geoJSON_.features[i].properties.NAME = 'United States';\n }\n }\n return geoJSON_;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"numDonors = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"numRecipients = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"topRecipientsMap = d3.rollup(\n aiddata,\n v => d3.sum(v, d => d.commitment_amount),\n d => d.recipient\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"topRecipients = Array.from(topRecipientsMap, ([country, total]) => ({\n country,\n total\n}))\n .sort((a, b) => d3.descending(a.total, b.total))\n .slice(0, numRecipients)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"topDonorsMap = d3.rollup(\n aiddata,\n v => d3.sum(v, d => d.commitment_amount),\n d => d.donor\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"topDonors = Array.from(topDonorsMap, ([country, total]) => ({ country, total }))\n .sort((a, b) => d3.descending(a.total, b.total))\n .slice(0, numDonors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"recipients = new Set(topRecipients.map(d => d.country))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"donors = new Set(topDonors.map(d => d.country))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"both = new Set([...donors].filter(d => recipients.has(d)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"all = Array.from(new Set([...recipients, ...donors]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"nodes_ = {\n const allNodes = new Set(donors);\n const recipientsIterator = recipients.keys();\n const recipients_ = Array.from(recipients);\n\n for (let i = 0; i < recipients.size; i++) {\n allNodes.add(recipientsIterator.next().value);\n }\n\n const nodes_ = [];\n const allNodesIterator = allNodes.keys();\n\n for (let i = 0; i < allNodes.size; i++) {\n const country = allNodesIterator.next().value;\n nodes_.push({\n name: country,\n status: recipients.has(country) ? 'recipient' : 'donor'\n });\n }\n return nodes_;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"donorTransactions = d3.rollup(\n aiddata,\n v => v.filter(d => recipients.has(d.recipient)),\n d => d.donor\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"donorTransactionsArray = Array.from(\n donorTransactions,\n ([country, transactions]) => {\n const total = d3.sum(transactions, d => d.commitment_amount);\n return { country: country, transactions: transactions, total: total };\n }\n).filter(d => donors.has(d.country))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"donorTransactionsByRecipient = donorTransactionsArray\n .map(d => ({ ...d }))\n .map(d => {\n d.transactions = Array.from(\n d3.rollup(\n d.transactions,\n v => d3.sum(v, d => d.commitment_amount),\n e => e.recipient\n ),\n ([recipient, total]) => ({ recipient, total })\n );\n return d;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"links_ = {\n const arr = [];\n for (let i = 0; i < donorTransactionsByRecipient.length; i++) {\n for (\n let j = 0;\n j < donorTransactionsByRecipient[i].transactions.length;\n j++\n ) {\n arr.push({\n source: donorTransactionsByRecipient[i].country,\n target: donorTransactionsByRecipient[i].transactions[j].recipient,\n value: donorTransactionsByRecipient[i].transactions[j].total\n });\n }\n }\n return arr.sort(\n (a, b) =>\n topDonorsMap.get(b.source) - topDonorsMap.get(a.source) ||\n topRecipientsMap.get(b.target) - topRecipientsMap.get(a.target)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4748,"value":"aiddataPurposes = aiddata.filter(\n d =>\n donors.has(d.donor) &&\n recipients.has(d.recipient) &&\n new Set(purposes).has(d.coalesced_purpose_name)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4750,"value":"purposeLinks = Array.from(\n d3.rollup(\n aiddataPurposes,\n v => d3.sum(v, d => d.commitment_amount),\n d => d.donor,\n d => d.recipient\n ),\n ([donor, recipients]) => {\n const r = Array.from(recipients, ([target, value]) => {\n return {\n source: donor,\n target: target,\n value: value\n };\n });\n return r;\n }\n).flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4731,"value":"links_.sort((a, b) => d3.descending(order.get(a.source), order.get(b.source)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4706,"value":"// order = Array.from(\n// d3.rollup(links_, v => d3.sum(v, d => d.value), d => d.source),\n// ([name, value]) => ({ name, value })\n// ).sort((a, b) => d3.descending(a.value, b.value))\norder = d3.rollup(links_, v => d3.sum(v, d => d.value), d => d.source)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"data = ({ nodes: nodes_, links: links_ })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"valueExtent = [0, d3.max(data.links, d => d.value)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"formatValue = function(d) {\n return d3\n .format(\".2s\")(d)\n .replace('G', 'B');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"intensity = function(interpolator) {\n return d3\n .scaleSequentialSqrt()\n .domain(valueExtent)\n .interpolator(interpolator);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4456,"value":"heatText = function(g, text_, location) {\n const t = g\n .append('text')\n .attr('font-size', 12)\n .attr('font-family', 'sans-serif')\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'hanging')\n .text(text_);\n\n const width = t.node().getComputedTextLength();\n if (location.location == 'x') {\n t.attr('x', (location.width - width) / 2).attr(\n 'y',\n -location.margin.top + 25\n );\n } else if (location.location == 'y') {\n t.attr('x', -(location.height - width) / 2).attr(\n 'y',\n -location.margin.left + 10\n );\n t.attr(\"transform\", `rotate(-90)`);\n } else if (location.location == 'title') {\n t.attr('x', location.width / 2)\n .attr('y', -location.margin.top)\n .attr('font-size', 16);\n }\n\n return t;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4477,"value":"heatMargin = ({ top: 110, right: 20, bottom: 10, left: 90 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4486,"value":"axisText = function(g, axis, margin) {\n if (axis.name == 'x') {\n g.append(\"g\")\n .call(axis.axis)\n .call(g => g.selectAll(\".domain\").remove())\n .selectAll('text')\n .attr(\"transform\", `translate(-5, -${margin.top / 15}) rotate(90)`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"dominant-baseline\", \"baseline\");\n } else {\n g.append(\"g\")\n .call(axis.axis)\n .call(g => g.selectAll(\".domain\").remove())\n .selectAll('text')\n .attr(\"text-anchor\", \"end\")\n .attr('dx', -2);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4517,"value":"background = function(g, x, y, tileWidth, tileHeight, visWidth, visHeight) {\n const xPadding = x.step() * x.paddingInner();\n const yPadding = y.step() * y.paddingInner();\n const background = g.append('g');\n\n background\n .append('rect')\n .attr('width', tileWidth)\n .attr('height', tileHeight)\n .attr('fill', '#eeeeee');\n\n background\n .append('g')\n .selectAll('line')\n .data(donors)\n .join('line')\n .attr('x1', d => x(d) - xPadding / 2)\n .attr('x2', d => x(d) - xPadding / 2)\n .attr('y1', 0)\n .attr('y2', visHeight)\n .attr('stroke-width', xPadding)\n .attr('stroke', 'white');\n\n background\n .append('g')\n .selectAll('line')\n .data(recipients)\n .join('line')\n .attr('y1', d => y(d) - yPadding / 2)\n .attr('y2', d => y(d) - yPadding / 2)\n .attr('x1', 0)\n .attr('x2', visWidth)\n .attr('stroke-width', yPadding)\n .attr('stroke', 'white');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`### Visualization 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"status = function(country) {\n if (both.has(country)) {\n return 'both';\n }\n \n if (donors.has(country)) {\n return 'donor';\n }\n \n return 'recipient';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"statusColor = d3.scaleOrdinal(\n ['donor', 'recipient', 'both'],\n [orange, purple, 'steelblue']\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"edgeIntensity = intensity(d3.interpolateGreys)\n// d3.interpolateRgb(lightgray, 'black')\n\n// d3\n// .scaleSequentialSqrt()\n// .domain([0, maxWeight])\n// .interpolator(d3.interpolateRgb(lightgray, 'black'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"donationIntensity = intensity(d3.interpolateBlues)\n\n// d3\n// .scaleSequentialSqrt()\n// .domain([0, maxWeight])\n// .interpolator(d3.interpolateBlues)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"colors = {\n const colors = d3.schemeCategory10.slice();\n colors.push(lightgray);\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"colorsDomain = {\n const s = new Set(recipients);\n s.add('Donor');\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"recipientColor = d3\n .scaleOrdinal()\n .domain(colorsDomain)\n .range(colors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"recipientIntensity = function(country, value) {\n return intensity(d3.interpolateRgb('white', d3.rgb(recipientColor(country))))(\n value\n );\n}\n\n// recipientIntensity = function(country, value) {\n// return d3\n// .scaleSequentialSqrt()\n// .domain(valueExtent)\n// .interpolator(d3.interpolateRgb('white', d3.rgb(recipientColor(country))))(\n// value\n// );\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"matrix = {\n const index = new Map(all.map((name, i) => [name, i]));\n\n const matrix_ = Array.from(index, () => new Array(all.length).fill(0));\n\n for (const { source, target, value } of data.links)\n matrix_[index.get(source)][index.get(target)] += value;\n return matrix_;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4080,"value":"visualization1Title = \"Amounts Donated/Received Between Donors and Recipients\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"md`### Visualization 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1467,"value":"numPurposes = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"purposesMap = d3.rollup(\n aiddata.filter(d => donors.has(d.donor) && recipients.has(d.recipient)),\n v => d3.sum(v, d => d.commitment_amount),\n d => d.coalesced_purpose_name\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"topPurposes = Array.from(purposesMap, ([purpose, amount]) => ({\n purpose,\n amount\n}))\n .sort((a, b) => d3.descending(a.amount, b.amount))\n .filter(d => d.purpose != 'Sectors not specified')\n .slice(0, numPurposes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2124,"value":"// topPurposeIntensity = function(purpose, value) {\n// return d3\n// .scaleSequentialSqrt()\n// .domain(topPurposesExtent)\n// .interpolator(d3.interpolateRgb('white', d3.rgb(purposeColor(purpose))))(\n// value\n// );\n// }\n\ntopPurposeIntensity = function(purpose) {\n return purposeIntensity_([0, 1], purpose, 0.15);\n // return d3\n // .scaleSequentialSqrt()\n // .domain([0, 1])\n // .interpolator(d3.interpolateRgb('white', d3.rgb(purposeColor(purpose))))(\n // 0.15\n // );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"purposes = topPurposes.map(d => d.purpose)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2139,"value":"purposesIndex = new Map(\n purposes.map((d, i) => {\n return [d, i];\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"purposesExtent = [\n 0,\n d3.max(donorTransactionsByRecipientByPurposeFlat, d => d.recipientTotal)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"donorTransactionsByRecipientByPurposeFlat = {\n const arr = [];\n for (let i = 0; i < donorTransactionsByRecipientByPurpose.length; i++) {\n const donor = donorTransactionsByRecipientByPurpose[i];\n for (let j = 0; j < donor.transactions.length; j++) {\n arr.push(donor.transactions[j]);\n }\n\n const recipients_ = new Set(donor.transactions.map(d => d.recipient));\n const recipientIterator = recipients.keys();\n\n for (let j = 0; j < recipients.size; j++) {\n const country = recipientIterator.next().value;\n if (!recipients_.has(country)) {\n arr.push({\n donor: donor.country,\n recipient: country,\n purposes: [],\n recipientTotal: 0,\n recipientProportion: 0,\n donorTotal: donor.total\n });\n }\n }\n }\n return arr.sort((a, b) => d3.descending(a.donorTotal, b.donorTotal));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"purposeColor = d3\n .scaleOrdinal()\n .domain(purposes)\n .range(d3.schemeCategory10)\n// .unknown('#eeeeee')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"cellSize = 43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1874,"value":"tileWidth = donors.size * cellSize;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1876,"value":"tileHeight = recipients.size * cellSize;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"column = d3\n .scaleBand()\n .domain(donorTransactionsByRecipientByPurpose.map(d => d.country))\n .range([0, tileWidth])\n .paddingInner(0.2)\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1865,"value":"row = d3\n .scaleBand()\n .domain(recipientsToNumDonors.map(d => d.recipient))\n .range([0, tileHeight])\n .paddingInner(0.2)\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"minRadius = 5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"maxRadius = Math.min(row.bandwidth(), column.bandwidth()) / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1858,"value":"radius = d3\n .scaleSqrt()\n .domain(purposesExtent)\n .range([minRadius, maxRadius]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1860,"value":"pie = d3\n .pie()\n .value(d => d.amount)\n .sort((a, b) => d3.descending(a.amount, b.amount));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1862,"value":"arc = d3\n .arc()\n .innerRadius(0)\n // .outerRadius(maxRadius);\n .outerRadius(d => radius(d.data.recipientTotal))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1971,"value":"recipientsToNumDonors = Array.from(\n d3.rollup(\n aiddata,\n v =>\n new Set(\n v\n .map(d => {\n return { donor: d.donor, purpose: d.coalesced_purpose_name };\n })\n .filter(d => donors.has(d.donor) && new Set(purposes).has(d.purpose))\n .map(d => d.donor)\n ).size,\n d => d.recipient\n ),\n ([recipient, numDonors]) => ({ recipient, numDonors })\n)\n .filter(d => recipients.has(d.recipient))\n .sort((a, b) => d3.descending(a.numDonors, b.numDonors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3789,"value":"purposeIntensity_ = function(domain, purpose, value) {\n return d3\n .scaleSequentialSqrt()\n .domain(domain)\n .interpolator(d3.interpolateRgb('white', d3.rgb(purposeColor(purpose))))(\n value\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"purposeIntensity = function(purpose, value) {\n return purposeIntensity_(purposeExtent2, purpose, value);\n // return d3\n // .scaleSequentialSqrt()\n // .domain(purposeExtent2)\n // .interpolator(d3.interpolateRgb('white', d3.rgb(purposeColor(purpose))))(value);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"purposeSankeyData = {\n const arr = [];\n for (let i = 0; i < donorTransactionsByRecipientByPurposeFlat.length; i++) {\n const item = donorTransactionsByRecipientByPurposeFlat[i];\n for (let j = 0; j < item.purposes.length; j++) {\n const obj = {\n donor: item.donor,\n recipient: item.recipient,\n purpose: item.purposes[j].purpose,\n amount: item.purposes[j].amount,\n donorTotal: item.donorTotal,\n recipientTotal: item.recipientTotal\n };\n arr.push(obj);\n }\n }\n return arr.sort(\n (a, b) =>\n purposeDonorOrder.get(b.donor) - purposeDonorOrder.get(a.donor) ||\n purposeOrder.get(b.purpose) - purposeOrder.get(a.purpose) ||\n purposeRecipientOrder.get(b.recipient) -\n purposeRecipientOrder.get(a.recipient)\n // purposesIndex.get(a.purpose) - purposesIndex.get(b.purpose) ||\n // b.donorTotal - a.donorTotal || b.recipientTotal - a.recipientTotal\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4771,"value":"purposeOrder = d3.rollup(\n aiddataPurposes,\n v => d3.sum(v, d => d.commitment_amount),\n d => d.coalesced_purpose_name\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4760,"value":"purposeDonorOrder = d3.rollup(\n purposeLinks,\n v => d3.sum(v, d => d.value),\n d => d.source\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4779,"value":"purposeRecipientOrder = d3.rollup(\n purposeLinks,\n v => d3.sum(v, d => d.value),\n d => d.target\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2255,"value":"purposeMatrix = {\n const index = new Map(all.map((name, i) => [name, i]));\n const matrix = [];\n\n for (const country of all) {\n const arr = [];\n for (const country of all) {\n arr.push(new Array(numPurposes).fill(0));\n }\n matrix.push(arr);\n }\n\n purposeSankeyData.map(d => {\n matrix[index.get(d.donor)][index.get(d.recipient)][\n purposesIndex.get(d.purpose)\n ] = d.amount;\n });\n // for (const item of purposeSankeyData) {\n // // return pIndex.get(item.purpose);\n // matrix[index.get(item.donor)][index.get(item.recipient)][\n // purposesIndex.get(item.purpose)\n // ] = item.amount;\n // }\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"purposeExtent2 = [0, d3.max(purposeSankeyData, d => d.amount)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2096,"value":"purposeDonations = Array.from(\n d3.rollup(\n aiddata.filter(d => new Set(purposes).has(d.coalesced_purpose_name)),\n v => d3.sum(v, d => d.commitment_amount),\n d => d.donor,\n d => d.coalesced_purpose_name\n ),\n ([country, purposes]) => {\n return {\n country: country,\n purposes: Array.from(purposes, ([purpose, amount]) => ({\n purpose,\n amount\n }))\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2100,"value":"purposeDonationsExtent = [\n 0,\n d3.max(purposeDonations.map(d => d.purposes).flat(), d => d.amount)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2111,"value":"purposeDonationIntensity = function(purpose, value) {\n return purposeIntensity_(purposeDonationsExtent, purpose, value);\n // return d3\n // .scaleSequentialSqrt()\n // .domain(purposeDonationsExtent)\n // .interpolator(d3.interpolateRgb('white', d3.rgb(purposeColor(purpose))))(\n // value\n // );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4074,"value":"visualization2Title = visualization1Title + ' By Purpose'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2564,"value":"md`### Visualization 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2355,"value":"dataBySelectedYear = function(year) {\n const data_ = dataByYear.get(year);\n const arr = [];\n for (const donor of data_) {\n for (const donation of donor.donations) {\n arr.push({\n source: donor.donor,\n target: donation.recipient,\n value: donation.amount\n });\n }\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2334,"value":"dataByYear = new Map(\n Array.from(\n d3.rollup(\n aiddata.filter(d => donors.has(d.donor) && recipients.has(d.recipient)),\n v => d3.sum(v, d => d.commitment_amount),\n d => d.yearInt,\n d => d.donor,\n d => d.recipient\n ),\n ([year, transactions]) => {\n const t = Array.from(transactions, ([donor, donations]) => {\n const d = Array.from(donations, ([recipient, amount]) => ({\n recipient,\n amount\n }));\n // const r = new Set(d.map(e => e.recipient));\n // const recipientIterator = recipients.keys();\n // for (let i = 0; i < recipients.size; i++) {\n // const c = recipientIterator.next().value;\n // if (!r.has(c)) {\n // d.push({ recipient: c, amount: 0 });\n // }\n // }\n return { donor: donor, donations: d };\n });\n return [year, t];\n }\n )\n) //.sort((a, b) => d3.ascending(a.year, b.year))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2382,"value":"yearDataIntensity = function(year_) {\n const max = d3.max(dataBySelectedYear(year_), d => d.value);\n return d3\n .scaleSequentialSqrt()\n .domain([0, max])\n .interpolator(d3.interpolateBlues);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2341,"value":"years = Array.from(new Set(aiddata.map(d => d.yearDate.getFullYear()))).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4092,"value":"visualization3Title = visualization1Title + ' By Year'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"md`### Miscellaneous\n\nVisualizations I decided against`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3740,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4789,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4793,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2243,"value":"'purpose matrix'\n// purposeMatrix = {\n// const index = new Map(all.map((name, i) => [name, i]));\n// const matrix = Array.from(index, () =>\n// new Array(all.length).fill(new Array(numPurposes).fill(0))\n// );\n// for (const item of purposeSankeyData) {\n// matrix[index.get(item.donor)][index.get(item.recipient)][\n// purposesIndex.get(item.purpose)\n// ] = item.amount;\n// }\n// return matrix;\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2045,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`-----------------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@6', \"d3-sankey@0.12\", 'd3-multichord')\n// https://github.com/chornbaker/d3-multichord","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2330,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"lightgray = '#dcdcdc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"purple = '#a783c9'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"orange = '#ffa04d'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2165,"value":"darkgray = \"#999999\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"scale = 1000000000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W56","stdlib":"1"}} 44:"$43:body"