Pie Chart Tutorial / elouen-ginat

file = FileAttachment("population-by-age.csv")

data = d3.csvParse(await file.text(), d3.autoType)

d3 = require("d3@6")

height = Math.min(width, 600)

width

getAngles = d3.pie()

.sort(null) // Pour trier

.value(d => d.value)

getAngles(data)

rad = height/2 - 1

getArcs = d3.arc().innerRadius(0).outerRadius(rad)

chart_first_step = {

const svg = d3.create("svg")

.attr("viewBox", [-width / 2, -height / 2, width, height]); // put the referential at the center of the svg

const arcs = ; // Define the angles of the arcs

let pieces = svg.append("g")

.selectAll("path")

.data() // Set the data

.join("path")

.attr("d", getArcs)

return svg.node();

}

col = d3.interpolateSpectral(0.6)

domain = // put the domain

range = // put the range

color = // write your code here

chart_color_step = {

const svg = d3.create("svg")

.attr("viewBox", [-width / 2, -height / 2, width, height]);

const arcs = getAngles(data);

let pieces = svg.append("g")

.selectAll("path")

.data(arcs)

.join("path")

// Put your code HERE //

.attr("d", getArcs);

return svg.node();

}

nombre.toLocaleString()

data.map(d => d.value)

data.map(d => d.value.toLocaleString())

getAngles(data).filter(d => (d.endAngle - d.startAngle) > 0.25)

arcLabel = {

const radius = Math.min(width, height) / 2 * 0.8;

return d3.arc().innerRadius(radius).outerRadius(radius);

}

chart_text_step = {

const arcs = pie(data);

const svg = d3.create("svg")

.attr("viewBox", [-width / 2, -height / 2, width, height]);

let pieces = svg.append("g")

.attr("stroke", "white")

.selectAll("path")

.data(arcs)

.join("path")

.attr("fill", d => color(d.data.name))

.attr("d", getArcs);

let labels = svg.append("g")

// Choices for the font

.attr("font-family", "sans-serif")

.attr("font-size", 12)

.attr("text-anchor", "middle")

.selectAll("text")

.data(arcs)

.join("text")

// Place the labels

.attr("transform", d => `translate(${arcLabel.centroid(d)})`)

// Age groups :

.call(text => text.append("tspan")

.attr("y", "-0.4em")

.attr("font-weight", "bold")

.text() //Write the function to write the name of the classes

// Population :

.call(text => text.append("tspan")

.attr("x", 0)

.attr("y", "0.7em")

.text()); //Write the function to write the population (don't forget to filter !!)

return svg.node();

}

chart_mouse_events = {

const arcs = pie(data);

const svg = d3.create("svg")

.attr("viewBox", [-width / 2, -height / 2, width, height]);

let pieces = svg.append("g")

.attr("stroke", "white")

.selectAll("path")

.data(arcs)

.join("path")

.attr("fill", d => color(d.data.name))

.attr("d", getArcs)

//add mouse events here

//

.append("title")

.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);

let labels = svg.append("g")

.attr("font-family", "sans-serif")

.attr("font-size", 12)

.attr("text-anchor", "middle")

.selectAll("text")

.data(arcs)

.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 => d.data.value.toLocaleString()));

//add mouse handler functions here

//=====

return svg.node();

}

chart_correction = {

const arcs = pie(data);

const svg = d3.create("svg")

.attr("viewBox", [-width / 2, -height / 2, width, height]);

let pieces = svg.append("g")

.attr("stroke", "white")

.selectAll("path")

.data(arcs)

.join("path")

.attr("fill", d => color(d.data.name))

//add class attr

//=====

.attr("d", arc_small)

/* No more mouse event here (they will be on the transparent pieces)

.on("mouseover", handleMouseOver)

.on("mouseout", handleMouseOut)

*/

.append("title")

.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);

let labels = svg.append("g")

.attr("font-family", "sans-serif")

.attr("font-size", 12)

.attr("text-anchor", "middle")

.selectAll("text")

.data(arcs)

.join("text")

.attr("transform", d => `translate(${arcLabel_small.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 => d.data.value.toLocaleString()));

//add transparent pieces

//=========

function handleMouseOver(d, i) {

// change "this" to select the coresponding colored piece

let path = d3.select(this)

//raise the path

//===========

let in_radius = Math.sqrt((radius*radius_multi)**2-radius**2)

let new_arc = d3.arc()

.innerRadius(in_radius) // keeps area

.outerRadius(radius)

.cornerRadius(cornerRadius)

let new_arc2 = d3.arc()

.innerRadius(in_radius)

.outerRadius(radius*radius_multi)

.cornerRadius(cornerRadius)

path.interrupt().attr("d", new_arc)

.transition()

.duration(anim_path_duration)

.attr("d", new_arc2)

.attr("stroke","black");

}

function handleMouseOut(d, i) {

// change "this" to select the coresponding colored piece

let path = d3.select(this)

let new_arc = d3.arc()

.innerRadius(0)

.outerRadius(radius*radius_multi)

.cornerRadius(0)

let new_arc2 = d3.arc()

.innerRadius(0)

.outerRadius(radius)

.cornerRadius(0)

path.interrupt().attr("d", new_arc)

.transition()

.duration(anim_path_duration)

.attr("d", new_arc2)

.attr("stroke","white");

}

return svg.node();

}

chart_per_anim = {

const arcs = pie(data);

const svg = d3.create("svg")

.attr("viewBox", [-width / 2, -height / 2, width, height]);

let pieces = svg.append("g")

.attr("stroke", "white")

.selectAll("path")

.data(arcs)

.join("path")

.attr("fill", d => color(d.data.name))

.attr("class", d => "path_per_"+d.index)

.attr("d", arc_small)

.append("title")

.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);

let labels = svg.append("g")

.attr("font-family", "sans-serif")

.attr("font-size", 12)

.attr("text-anchor", "middle")

.selectAll("text")

.data(arcs)

.join("text")

.attr("transform", d => `translate(${arcLabel_small.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 => d.data.value.toLocaleString()));

//add percentages labels

//===============

let mouse_pieces = svg.append("g") // path to mouse track

.selectAll("path")

.data(arcs)

.join("path")

.attr("fill", "rgba(0,0,0,0)")

.attr("stroke", "none")

.attr("d", arc_small)

.on("mouseover", handleMouseOver)

.on("mouseout", handleMouseOut)

function handleMouseOver(d, i) {

// change "this" to select the colored piece

let path = d3.select(".path_per_"+i.index)

//raise the path

path.raise()

//===========

let in_radius = Math.sqrt((radius*radius_multi)**2-radius**2)

let new_arc = d3.arc()

.innerRadius(in_radius) // keeps area

.outerRadius(radius)

.cornerRadius(cornerRadius)

let new_arc2 = d3.arc()

.innerRadius(in_radius)

.outerRadius(radius*radius_multi)

.cornerRadius(cornerRadius)

path.interrupt().attr("d", new_arc)

.transition()

.duration(anim_path_duration)

.attr("d", new_arc2)

.attr("stroke","black");

// get percentage label

//animate it in

//=========

}

function handleMouseOut(d, i) {

// change "this" to select the colored piece

let path = d3.select(".path_per_"+i.index)

let new_arc = d3.arc()

.innerRadius(0)

.outerRadius(radius*radius_multi)

.cornerRadius(0)

let new_arc2 = d3.arc()

.innerRadius(0)

.outerRadius(radius)

.cornerRadius(0)

path.interrupt().attr("d", new_arc)

.transition()

.duration(anim_path_duration)

.attr("d", new_arc2)

.attr("stroke","white");

// get percentage label

//animate it out

//=========

}

return svg.node();

}

import {slider} from "@jashkenas/inputs"

html`<style type="text/css">

code, pre{

font-size: 80%;

background-color: #eee;

border-radius: 0.3em;

padding: 3px 4px 1px;

}

</style>`

md `In the tutorial, you can change the colour of a square. This square was implemented thanks to [this code](https://next.observablehq.com/@d3/working-with-color) :`

md`\`pie\` is the same function as \`getPie\`.`

pie = d3.pie()

.sort(null) // Pour trier

.value(d => d.value)

Purpose-built for displays of data