Public
Edited
Feb 19
9 forks
Insert cell
Insert cell
Insert cell
Insert cell
goats-topNamesFemale.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
nomsFR = goatsNames.filter(d => d.OwnerLanguage === "fr").sort((a,b) => b.CountLanguage - a.CountLanguage)
Insert cell
nomsDE = goatsNames.filter(d => d.OwnerLanguage === "de").sort((a,b) => b.CountLanguage - a.CountLanguage)
Insert cell
nomsIT = goatsNames.filter(d => d.OwnerLanguage === "it").sort((a,b) => b.CountLanguage - a.CountLanguage)
Insert cell
Insert cell
{
// 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("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();

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// 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();

}
Insert cell
Insert cell
Insert cell
import {heading} from '@ee2dev/formatting-in-observable'
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