Public
Edited
Apr 2, 2021
12 stars
test = {
for (let i=1981; i<=2017; i++) {
let bla = await Promises.delay(3000)
yield i
}
}
globalPercentBelowThreshold = processedData.rollup({sum: d => op.sum(d.WeightedPopulationHeadcount)}).get("sum", 0)/summedPopulation
mutable year = 2015
mutable povertyThreshold = 30
belowColor = "#F0B8B6"
aboveColor = "#C2E2ED"
{
let clearPreviousSelector = ""
if (visitedStates.length > 0) {
clearPreviousSelector = ".countryFinder:not(" + visitedStates.map(item => ".country-" + item).toString() + ")"
d3.selectAll(visitedStates.map(item => ".country-" + item).toString()).classed("countryFinder", true)
}
else {
clearPreviousSelector = ".countryFinder"
}
d3.selectAll(clearPreviousSelector).classed("countryFinder", false)
}
processedData =
data
.filter(d => d.CoverageType === "N" || d.CoverageType === "A") // China, India and Indonesia have Rural and City level data as well, use only National or Aggregated to avoid double counting
.lookup(arqueroCountryCodeContinents, ["CountryCode", "iso_code"], "continent")
.orderby(aq.desc("HeadCount"))
.derive({WeightedPopulationHeadcount: aq.rolling( d => d.ReqYearPopulation * d.HeadCount)})
.derive({PopulationCumSum : aq.rolling(d => op.lag(d.ReqYearPopulation, 1, 0)) })
.derive({PopulationCumSum : aq.rolling(d => op.sum(d.PopulationCumSum)) })
processedData.objects()[0]
all = `PovertyLine=${povertyThreshold}&Countries=all&YearSelected=${year}`
url = `https://povcalnet-cors-proxy.herokuapp.com/http://iresearch.worldbank.org/PovcalNet/PovcalNetAPI.ashx?${all}&display=C&format=csv`
data = aq.fromCSV(await fetch(url).then(res => res.text()), { header: true })
summedPopulation = processedData.rollup({ PopulationSum: op.sum('ReqYearPopulation') }).get("PopulationSum", 0)
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "%"))
.call(g => g.select(".domain").remove())
x = d3.scaleLinear()
.domain([0, 7500])
.rangeRound([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(processedData.columnArray("HeadCount"))])
.range([height - margin.bottom, margin.top])
height = 500
margin = ({top: 100, right: 0, bottom: 40, left: 50})
countryFetchArgs = ({
"columns": ["iso_code", "continent", "date"],
"condition": {
"and": [
{
"eq": [
{
"column": [
"date"
]
},
"2021-03-01"
]
}
]
},
"includeAggregations": true,
"aggregationFilters": [],
"offset": 0,
"limit": null,
"orderBy":
[]
})
getDataFiltered = function(query) {
const encodedQuery = JSON.stringify(query)
let url = new URL("https://api.edelweissdata.com/datasets/b55b229d-6338-4e41-a507-0cf4d3297b54/versions/315/data")
url.searchParams.append('query', encodedQuery);
return fetch(url).then(response => response.json()).then(data => data.results.map(row => row.data))
}
countryCodeContinents = getDataFiltered(countryFetchArgs)
arqueroCountryCodeContinents = aq.from(countryCodeContinents)
arqueroCountryCodeContinents.view()
new Set(arqueroCountryCodeContinents.columnArray("continent"))
import {Range, Table, Select, Toggle} from "@observablehq/inputs"
import {debounce} from "@mbostock/debouncing-input"
d3 = require("d3@6")
import { aq, op, desc } from '@uwdata/arquero'
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.
