Published unlisted
Edited
May 20, 2021
1 fork
anim_frame_year
anim_data_pre["2010"]
update = chart.update(anim_data_pre.get(anim_frame_year));
viewof anim_frame_year = Scrubber(d3.ticks(2000, 2020, 20), {
autoplay: false,
loop: false,
initial: 50,
format: x => `Year: ${x.toFixed(0)}`
})
outline = ({type: "Sphere"})
width = 1500;
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;
}
year = 2019
indicators = d3.csvParse(await FileAttachment("Basic Global Birthright Indicators 2000-2020a Feb 25.csv").text())
selected_indicator
indicators.filter(d => d.Year == "2020")
anim_data = indicators.filter(d => d.Year == anim_frame_year)
anim_data_pre.get(2001);
anim_data_pre = {
let data_by_year = new Map();
for(let year = 2000; year <= 2020; year++) {
let mymap = new Map();
indicators.filter(d => d.Year == year).forEach(d => {
mymap.set(rename.get(d.Country) || d.Country, d[selected_indicator]);
})
data_by_year.set(year, mymap);
}
return data_by_year;
}
data.get("Australia")
rename.get("Congo - Kinshasa");
rename.get("Afghanistan");
color = d3.scaleQuantize([0.0, 1], d3.schemeYlGn[9])
projection = d3.geoEqualEarth()
path = d3.geoPath(projection)
format = d => `${d}%`
world = FileAttachment("countries-50m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
import {legend} from "@d3/color-legend"
import {Select} from "@observablehq/inputs"
import {Scrubber} from "@mbostock/scrubber"
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.
