goats-topNamesFemale.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
nomsFR = goatsNames.filter(d => d.OwnerLanguage === "fr").sort((a,b) => b.CountLanguage - a.CountLanguage)
nomsDE = goatsNames.filter(d => d.OwnerLanguage === "de").sort((a,b) => b.CountLanguage - a.CountLanguage)
nomsIT = goatsNames.filter(d => d.OwnerLanguage === "it").sort((a,b) => b.CountLanguage - a.CountLanguage)
{
// Définissons la taille du SVG
// Marges et translations
const margin = { top : 10, right: 40, bottom: 30, left: 40 },
width = 1400 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
// Ajouter le svg
const monSvg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
// Création du groupe qui va contenir tous les éléments graphiques
const graphiques = monSvg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Échelles
const radiusScale = d3.scaleLinear()
.domain([0, d3.max(goatsNames, d => d.CountLanguage)])
.range([0, 40]);
const xScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 900]);
// ---- TOUT POUR MON ZOOM ----
// ref https://observablehq.com/@d3/programmatic-zoom
/*
❓ Rajoutez une transition de déplacement dans le zoom.
*/
//Création du zoom et de ses contraintes
const myZoom = d3.zoom()
.scaleExtent([1,5])
.on('zoom',(event)=>{ //Dès que l'on zoom, on appel la fonction de callback
graphiques.attr("transform", event.transform)
})
//On applique l'objet zoom au SVG
monSvg.call(myZoom)
//❓ En utilisant les fonctions translateTo et scaleTo, ajoutez une fonction de zoom qui permet d'appliquer un agrandissement centré sur le cercle sur lequel on a cliqué.
function clicked(event){
const circle = d3.select(event.target);
const cx = +circle.attr("cx");
const cy= +circle.attr("cy")
monSvg
.transition()
.duration(1000)
.call(myZoom.translateTo, cx,cy)
.transition()
.duration(700)
.call(myZoom.scaleTo,3)
}
// Fonctions de dessin
function createCircles(selection, data, yPos, color, className) {
return selection
.selectAll(`.${className}`)
.data(data)
.enter()
.append("circle")
.attr("class", className)
.attr("r",0)
.attr("cx", (d, i) => xScale((i + 1)))
.attr("cy", 0)
.on("click",clicked) // fonction de callback spécifiant le comportement lors du clic
.transition()
.duration(2000)
.delay((d,i) => i * 400)
.attr("cy", yPos)
.attr("r", d => radiusScale(d.CountLanguage))
.attr("fill", color)
}
function createLabels(selection, data, yPos, className) {
return selection
.selectAll(`.${className}`)
.data(data)
.enter()
.append("text")
.attr("class", className)
.attr("x", (d, i) => xScale((i + 1)))
.attr("y", yPos)
.text(d => d.Name)
.attr("text-anchor", "middle")
}
createCircles(graphiques, nomsDE, 80, "#6296BC", "de");
createLabels(graphiques, nomsDE, 150, "de-text")
createCircles(graphiques, nomsFR, 280, "#EB6672", "fr");
createLabels(graphiques, nomsFR, 320, "fr-text")
createCircles(graphiques, nomsIT, 480, "#EDB40D", "it")
createLabels(graphiques, nomsIT, 530, "it-text")
yield monSvg.node();
}
import {heading} from '@ee2dev/formatting-in-observable'
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.
