2f:T5a2,{ // Définissons la taille du SVG const width = "100%"; const height = 600; const marginBottom = 70; const monSvg = d3.create("svg") .attr("width", width) .attr("height", height); const xScale = d3.scaleLinear() .domain([0, 10]) .range([0, 900]); 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", yPos) .transition() .duration(2000) .delay((d,i) => i * 400) .attr("cy", yPos) .attr("r", d => 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(monSvg, nomsDE, 80, "#6296BC", "de"); createLabels(monSvg, nomsDE, 150, "de-text") createCircles(monSvg, nomsFR, 280, "#EB6672", "fr"); createLabels(monSvg, nomsFR, 320, "fr-text") createCircles(monSvg, nomsIT, 480, "#EDB40D", "it") createLabels(monSvg, nomsIT, 530, "it-text") yield monSvg.node(); }30:T7fb,{ // 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]); // 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) .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(); }31:[{"id":"4f974e77189496d70d92216aca4a9c469ee6afab99ad56401df3d5dcb4b577ee55f32f81adddbbd9874278b9de67d7ddcc7d86efd325c3c2044298e0cbdba514","href":"https://static.observableusercontent.com/files/4f974e77189496d70d92216aca4a9c469ee6afab99ad56401df3d5dcb4b577ee55f32f81adddbbd9874278b9de67d7ddcc7d86efd325c3c2044298e0cbdba514","name":"goats-topNamesFemale.csv","type":"text/csv","lastModified":1709671046812.747,"size":767}] 2d:{"title":"d3-transition, d3-zoom","cells":[{"id":0,"value":"# d3-transition, d3-zoom","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Aujourd'hui, nous allons donner un peu de fluidité à nos graphiques avec d3-transition et d3-zoom 😎","pinned":false,"hidden":false,"mode":"html"},{"id":15,"value":"Cette fois-ci, on va utiliser des données sur les noms donnés aux chèvres femelles 🐐 à travers les différentes régions linguistiques en Suisse (germanophone, francophone et italophone), fournies par identitas. ","pinned":false,"hidden":false,"mode":"html"},{"id":23,"value":"goatsNames = await FileAttachment(\"goats-topNamesFemale.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"## Manipuler les données","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"Créons une table par langues. ","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"nomsFR = goatsNames.filter(d => d.OwnerLanguage === \"fr\").sort((a,b) => b.CountLanguage - a.CountLanguage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"nomsDE = goatsNames.filter(d => d.OwnerLanguage === \"de\").sort((a,b) => b.CountLanguage - a.CountLanguage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"nomsIT = goatsNames.filter(d => d.OwnerLanguage === \"it\").sort((a,b) => b.CountLanguage - a.CountLanguage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"## Transitions","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"heading(\"❓ Trouvez une échelle plus adaptée pour minimiser les différences. Est-ce qu'il y aurait une autre manière plus réprésentative (qui n'est pas possible avec les types d'échelle d3) ?\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"heading(\"❓ Rajouter une légende pour comprendre quelle couleur est assignée à quelle langue\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"heading(\"❓ Rajoutez une transition qui permet de faire entrer les cercles du haut vers le bas (transition pour l'attribut 'cy' des cercles). Utilisez une fonction d'accélération de votre choix pour la transition\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"## Zoom","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"Rajoutons le zoom dans notre figure. ","pinned":false,"hidden":false,"mode":"html"},{"id":197,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"heading(\"❓ 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é.\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"heading(\"❓ Rajoutez une transition de déplacement dans le zoom.\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"import {heading} from '@ee2dev/formatting-in-observable'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}