{
const margin = { top: 50, bottom: 0, right: 10, left: 10 };
const plotHeight = 1500 - margin.top - margin.bottom;
const plotWidth = width - margin.left - margin.right;
const svg = d3.create('svg')
.attr('width', plotWidth + margin.left + margin.right)
.attr('height', plotHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const row = d3.scaleBand()
.domain(d3.range(Rows))
.range([0, plotHeight])
.padding(0.5);
const col = d3.scaleBand()
.domain(d3.range(Cols))
.range([0, plotWidth])
.padding(0.2);
const cells = g.selectAll('.cell')
.data(q1_grid_data)
.join('g')
.attr('class', 'cell')
.attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`);
const x = d3.scaleTime()
.domain(d3.extent(year))
.range([0, col.bandwidth()]);
const y = d3.scaleSqrt()
.domain([min_val, max_val]).nice()
.range([row.bandwidth(), 0]);
const donations = d3.area()
.x(d => x(d.year))
.y0(y(0))
.y1(d => y(d.donated));
const received = d3.area()
.x(d => x(d.year))
.y0(y(0))
.y1(d => y(d.received));
const xAxis = d3.axisBottom(x)
.tickFormat(d3.format("d"))
.ticks(3);
const yAxis = d3.axisLeft(y)
.tickValues([-8000000000,-2000000000, 0 , 2000000000,8000000000])
.tickFormat(d3.format("(.1s"));
const xgrid = d3.axisBottom(x).tickSize(-row.bandwidth()).tickFormat('').ticks(8);
const ygrid = d3.axisLeft(y).tickSize(-col.bandwidth()).tickFormat('').ticks(8);
cells.append('g')
.attr('class', 'y-axis')
.call(yAxis)
.call(g => g.selectAll('.domain').remove());
cells.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0,${row.bandwidth()})`)
.call(xAxis)
.call(g => g.selectAll('.domain').remove());
cells.append('text')
.text(d => d.country)
.attr('font-size', 12)
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('text-anchor', 'middle')
.attr('y', -5)
.attr('x', col.bandwidth()/2);
cells.append('rect')
.attr('width', col.bandwidth())
.attr('height', row.bandwidth())
.attr('fill', 'white')
.attr('stroke', 'lightgray');
cells.append('path')
.datum(d => d.values)
.attr('d', received)
.attr("fill", "orange")
.attr("stroke", "red")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
cells.append('path')
.datum(d => d.values)
.attr('d', donations)
.attr("fill", "lightblue")
.attr("stroke", "blue")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
cells.append('g')
.attr('class', 'y axis-grid')
.call(ygrid)
.attr("stroke-opacity", 0.04);
cells.append('g')
.attr('class', 'x axis-grid')
.attr('transform', 'translate(0,' + row.bandwidth() + ')')
.call(xgrid)
.attr("stroke-opacity", 0.04);;
svg.append('rect')
.attr('x', 30)
.attr('y', 20)
.attr('width', 30)
.attr('height', 10)
.attr('stroke',"blue")
.attr("stroke-width", 0.5)
.attr('fill', "lightblue");
svg.append('text')
.attr('x', 65)
.attr('y', 20)
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-size', '12px')
.text('Dollars donated (billions)');
svg.append('rect')
.attr('x', 30)
.attr('y', 40)
.attr('width', 30)
.attr('height', 10)
.attr('stroke', "red")
.attr("stroke-width", 0.5)
.attr('fill', "orange");
svg.append('text')
.attr('x', 65)
.attr('y', 40)
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-size', '12px')
.text('Dollars received (billions)');
svg.select('.x-axis')
.append('text')
.attr('font-size', '20px')
.attr('fill', 'black')
.attr('x', width - 400)
.attr('y', -150)
.text('Amount Donated and received by countries (1973 to 2013)');
return svg.node();
}
d3 = require('d3@7')
googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv'
import {legend, swatches} from "@d3/color-legend"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
