Data Scientist passionate with making colourful shapes appear and move on my computer screen.
plot_color_ratio = function(svg) {
let y_pos = 430;
let delta_y = 50; //7 * 2 * 4; // see the `.chart` elements
let num_passports = data.length;
let multiplier = delta_y / num_passports;
let x_pos = parseInt(0.8 * width);
console.log(multiplier);
svg
.selectAll(".colratio")
.data(counts)
.join("rect")
.attr('width', 20)
.attr('height', d => d['counts'] * multiplier)
.attr('y', function(d, i) {
return y_pos + d['cumul'] * multiplier;
})
.attr('x', function(d, i) {
return x_pos;
})
.attr('class', "colratio")
.attr("fill", d => colors.get(d['color']))
.attr("opacity", 1);
svg
.selectAll(".colratiotxt")
.data(counts)
.join("text")
.attr('x', x_pos + 23)
.attr('y', function(d, i) {
return y_pos + d['cumul'] * multiplier + 3.5;
})
.text(
d =>
`${((d['counts'] / num_passports) * 100).toPrecision(
2
)}% of passports are ${d['color']}`
)
.attr("font-family", "sans-serif")
.attr("fill", "#545252")
.style("font-size", "9px");
}
colors = new Map()
.set("red", "#c76f65")
.set("green", "#80bd6c")
.set("blue", "#698ec9")
.set("black", "#5c5959")
bycolor = Array.from(
d3.rollup(data, v => d3.mean(v, d => d.mobilityscore), d => d.color)
).sort((d1, d2) => Math.max(counts[d1[0]], counts[d2[0]]))
nd2 = Array.from(d3.group(data, d => d.color)).map(d => d[1][0])
bycolor2 = d3.rollups(
data,
v => ({
nb: v.length,
score: d3.mean(v, d => d.mobilityscore)
}),
d => d.color
)
counts = {
var counts = Object.entries(
data.reduce((acc, cur) => {
var name = cur.color;
if (!acc.hasOwnProperty(name)) {
acc[name] = 0;
}
acc[name]++;
return acc;
}, {})
).map(d=>{return {'color': d[0], 'counts': d[1]}});
counts.sort((frs, sec) => Math.max(-frs['counts'], -sec['counts']));
counts.reduce((acc, cur, idx, arr) => {
arr[idx]['cumul'] = acc;
acc += cur['counts'];
console.log(acc, cur['counts'])
return acc;
}, 0)
return counts
}
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");
}
radius = d3.scaleSqrt(
[0, d3.max(data, d => d.mobilityscore)],
[0, 5.6 * Math.sqrt(k)]
)
translate_to_powerrank = (d) => {
if(d=='GB') return 'UK';
if(d=='XK') return 'RK';
return d;
}
import { checkbox, slider, radio } from "@jashkenas/inputs"
path = d3.geoPath(projection)
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.
