Published
Edited
Oct 9, 2020
3 forks
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
showToolTip = (text, coords) => {
d3.select(".tooltip")
.text(text)
.style("top", coords[1] + "px")
.style("left", coords[0] + "px")
.style("visibility", "visible");
}
Insert cell
cScale = d3.scaleSqrt()
.domain([
d3.min(data, d => d.net_donations),
0,
d3.max(data, d => d.net_donations)])
.range([-1, 0, 1])
.interpolate((a, b) => a < 0
? t => d3.interpolateReds(1-t)
: t => d3.interpolateBlues(t))
Insert cell
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
Insert cell
outline = ({ type: "Sphere" })
Insert cell
projection = d3.geoNaturalEarth1()
Insert cell
path = d3.geoPath(projection)
Insert cell
countries = {
// group entities by name and year
const entities = d3.group(data, d => d.country, d => d.year);
// attach data to each country in properties
const countries = topojson.feature(world, world.objects.countries);
countries.features.forEach(country => {
country.properties.data = entities.get(country.properties.name);
})
return countries
}
Insert cell
data = d3.csvParse(await FileAttachment("aiddata.csv").text(), d => {
if (d.country === "United States") {
d.country = "United States of America"
}
return {
country: d.country,
year: +d.year,
donations: +d.donations,
receipts: +d.receipts,
net_donations: +d.net_donations }
})
Insert cell
years = Array.from(new Set(data.map(d => d.year).sort()))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more