Front-end developer specializing in maps and visualizations. Working with @kartoteket
Corona virusMonthly rainfallHeartbeatHow big are countries... like really!Australia wildfires
If the world consisted of humans only
// responsive width
width
margin = 15
height = 400
colorScale = d3.scaleThreshold()
.domain(domain)
.range(d3.schemeOrRd[9])
worldGrid = parse(await FileAttachment("population_110_2020@1.asc").text())
// this is really not used, just including it to know the extend of the dataset
/*
max = {
let size = 0;
for (let r = 0; r < worldGrid.header.nrows; r++) {
size = Math.max(size, d3.max(worldGrid.data[r]));
}
return size;
}
*/
// create a geojson object from the parsed ASCII file
// only including thise with a density higher than 0 (excluding nodata columns)
// we could of course use the nodata to color dots blue
geoJSON = {
const features = [];
for (let y = 0; y < worldGrid.header.nrows; y++) {
for (let x = 0; x < worldGrid.header.ncols; x++) {
// divide density by 12000 (110 * 110) to get the number per km²
const density = worldGrid.data[y][x];
if (density > 0) {
features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [x - 179.5, -y + 89.5]
},
"properties": {
"density": density/12000,
"color": colorScale(density/12000)
}
});
}
}
}
return { type: "FeatureCollection", features }
}
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.
