Published
Edited
Nov 8, 2021
1 fork
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
colors = new Map()
.set("red", "#c76f65")
.set("green", "#80bd6c")
.set("blue", "#698ec9")
.set("black", "#5c5959")
Insert cell
bycolor = Array.from(
d3.rollup(data, v => d3.mean(v, d => d.mobilityscore), d => d.color)
)
Insert cell
nd2 = Array.from(d3.group(data, d => d.color)).map(d => d[1][0])
Insert cell
bycolor2 = d3.rollups(
data,
v => ({
nb: v.length,
score: d3.mean(v, d => d.mobilityscore)
}),
d => d.color
)
Insert cell
hlp = {
if (type == "p") {
var t = "passport";
} else {
var t = "circle";
}

var txt =
"On this map, the\nsurface area of each\n " +
t +
" is proportional\nto the number of\ncountries it allows \nto go to in 2019\n(before\nCovid19).";
return txt.split("\n");
}
Insert cell
Insert cell
radius = d3.scaleSqrt(
[0, d3.max(data, d => d.mobilityscore)],
[0, 5.6 * Math.sqrt(k)]
)
Insert cell
Insert cell
data = passeports
.map((d) => {
const id = d.id;
const name = d.name;
const thumb =
"https://raw.githubusercontent.com/neocarto/resources/master/datasets/passports/outputs/thumb/" +
d.id.toLowerCase() +
".png";
const color = d.color;
const mobilityscore = mobilyscore.get(d.id);
const feature = features.get(d.id);
return {
id,
position: feature && feature.properties.position,
name: name,
thumb: thumb,
color: color,
mobilityscore: +mobilityscore,
imgw: Math.sqrt(+mobilityscore * k * 0.7),
imgh: Math.sqrt((+mobilityscore * k) / 0.7)
};
})
.filter(
(d) =>
d.color == ch[0] ||
d.color == ch[1] ||
d.color == ch[2] ||
d.color == ch[3]
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { checkbox, slider, radio } from "@jashkenas/inputs"
Insert cell
path = d3.geoPath(projection)
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