data = d3.csvParse(await FileAttachment("population-by-age.csv").text(), d3.autoType)
ensai = [{name: "Femme", value : 50},{name: "Homme", value : 100}]
calcul_angle = d3.pie()
.value(d => d.value)// On lui donne la variable à traiter, ici "value"
.sort(null) //Par défaut le tableau est trié mais on peut désactiver ce paramètre
arc = d3.arc()
.outerRadius(Math.min(width, height) / 2 - 1) // On prends un rayon = largeur/2 - 1
.innerRadius(0)
construction_angles = {
// Création de la fenêtre
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]); // définition de la largueur et hauteur
// Appel à la fonction calcul_angle() de d3.pie() pour avoir le tableau avec les données et les angles
const angles = calcul_angle(ensai);
// On ajoute le cercle construit avec la fonction arc().
svg.append("g") // Creation de l'environnement
.selectAll("path") // selectAll nous crée un "path" par ligne du tableau
.data(angles) // on spécifie le tableau de données
.join("path")
.attr("d", arc) // arc() fait ensuite tout le travail
return svg.node()
}
color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())
arcLabel = {
const radius = Math.min(width, height) / 2 * 0.8; // le rayon est calculé pour etre légèrement inférieur à celui du cercle
return d3.arc().innerRadius(radius).outerRadius(radius);
}
height = Math.min(width, 500)
graphe_animation = {
// Cree le svg
const div = d3.create("div")
// Ajoute la selection en menu deroulant
const select = div.append("select").style("position", "absolute").style("top", 0 + "px")
select.append("option").attr("value", "effectif").text("Effectif")
select.append("option").attr("value", "pourcentage").text("Pourcentage")
const svg = div.append("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
// Calcul les angles
const angles = calcul_angle(data);
// Ajout de la couleur
svg.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(angles)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
// Ajout du texte
let texte = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
// EN FONCTION DU CHOIX SELECT, ON AFFICHE DIFFERENT TEXTES
select.on("update", function(){
let variable = d3.select(this).property('value')
let valeur = 0
if(variable == "effectif"){
valeur = angles.data.value.toLocaleString()
} else if(variable == "pourcentage") {
// On change
const effectif_total = d3.sum(data.map(d => d.value))
valeur = (angles.data.value/effectif_total).toLocaleString()
}
texte.selectAll("text")
.data(angles)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => valeur))
})
return div.node()
}
d3 = require("d3@6")
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.
