chart = {
const context = DOM.context2d(width, height);
const r = 0.5;
var persons = [];
const zoom_initiales = 20
const zoom_initiales_noms = 50
const zoom_noms_seuls = 80
// récupération de la liste des personnes décédées du covid
d3.json('https://api.memorial-covid.org/persons?limit=100&covid=1').then(function(data) {
console.log(data);
persons = data
// ajout d'inconnus "?"
var i; for (i = 0; i < persons.length/4; i++) {
persons.splice(Math.round(Math.random()*persons.length),0,{surnames: "?",surname1: "?", name: '?'});
}
});
// gestion du zoom/pan par d3
d3.select(context.canvas).call(d3.zoom()
.scaleExtent([0.8, 400])
.on("zoom", ({transform}) => zoomed(transform)));
function zoomed(transform) {
const zoom = transform.k
context.save();
// gris foncé en fond
context.fillStyle = "#444";
context.fillRect(0, 0, width, height);
if (zoom < 10) {
context.beginPath();
context.fillStyle = "#fff";
}
var lastColor = -1;
for (const d of data) {
// coordonnées pour dessin dans le canvas
const [x, y] = transform.apply(d);
// récupération des données de la personne correspondant à cet emplacement
const person = persons[d[2] % persons.length]
// inutile de dessiner hors zone visible
if (x > -zoom & x < width+zoom & y > -zoom & y < height+zoom) {
// changement de gris pour le titre, si changement de couleur
if (zoom < 20 & lastColor != d[3]) {
if (lastColor>=0) context.fill();
context.beginPath();
if (d[3]!=0) {
context.fillStyle = "#fff";
} else {
context.fillStyle = "#888";
if (zoom > 12) context.fillStyle = "#aaa";
if (zoom > 14) context.fillStyle = "#bbb";
if (zoom > 16) context.fillStyle = "#ccc";
if (zoom > 18) context.fillStyle = "#ddd";
}
lastColor = d[3];
}
// dessin des points/disques
if (zoom >= 20) { context.beginPath(); context.fillStyle = "#fff"; }
context.moveTo(x + r*transform.k, y);
context.arc(x, y, r*transform.k, 0, 2 * Math.PI);
if (zoom >= 10) { context.fill(); }
// les initiales
if (zoom > zoom_initiales & zoom < zoom_noms_seuls) {
const size = zoom/2.5
context.font = size+"px Times";
context.textAlign = "center";
// transitions blanc > gris > noir > gris > blanc
context.fillStyle = "#aaa";
if (zoom > zoom_initiales+10) { context.fillStyle = "#888"; }
if (zoom > zoom_initiales+20) { context.fillStyle = "#000"; }
if (zoom > zoom_initiales_noms) { context.fillStyle = "#888"; }
if (zoom > (zoom_initiales_noms+zoom_noms_seuls)/2) { context.fillStyle = "#aaa"; }
context.fillText(person.surnames[0]+person.name[0], x, y+size*0.35);
}
// les prénoms / noms + dates
if (zoom >= zoom_initiales_noms) {
const size = zoom/4
context.font = size+"px Times";
context.textAlign = "center";
// noir > gris > blanc
context.fillStyle = "#444";
if (zoom > (zoom_initiales_noms+zoom_noms_seuls)/2) { context.fillStyle = "#888"; }
if (zoom > zoom_noms_seuls) { context.fillStyle = "#fff"; }
context.fillText(person.surname1, x, y+size+zoom/2);
if (person.surname1 != '?') {
context.fillText(person.name, x, y+2.25*size+zoom/2);
context.font = size*0.7+"px Times";
context.fillText(person.birth_date.substring(0,4)+"-"+person.death_date.substring(0,4), x, y+3.25*size+zoom/2);
}
}
}
}
if (zoom < 10) { context.fill(); }
context.restore();
}
zoomed(d3.zoomIdentity);
return context.canvas;
}
width=1000
height = 800
data = {
const count=111021
const interval = Math.sqrt(width*height/count)
const cols=Math.round(width/interval)
const rows=Math.round(height/interval)
const titre = DOM.context2d(width, height);
titre.save();
titre.fillStyle = "white";
titre.fillRect(0, 0, width, height);
titre.font = "120px Times";
titre.textAlign = "center";
titre.fillStyle = "black";
titre.fillText("Mémorial Covid",width/2,height/2-50);
titre.font = "100px Times";
titre.fillText("aux "+count+" morts",width/2,height/2+50);
function dansTitre(x,y) {
var pixelData = titre.getImageData(x, y, 1, 1).data;
return pixelData[0];
}
const randomY = d3.randomNormal(height / 2, 80);
return Array.from({length: cols*rows}, (_, i) => [
(i % cols + Math.random()/3) * interval + interval/2,
(Math.round(i / cols-0.5)+Math.random()/3)*interval + interval/2,
i,
dansTitre((i % cols + Math.random()/3) * interval + interval/2,
(Math.round(i / cols-0.5)+Math.random()/3)*interval + interval/2)
])
}
d3 = require("d3@6")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.