Published
Edited
Apr 9, 2021
3 forks
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
file = FileAttachment("population-by-age.csv")
Insert cell
data = d3.csvParse(await file.text(), d3.autoType)
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
Insert cell
Insert cell
height = Math.min(width, 600)
Insert cell
width
Insert cell
Insert cell
getAngles = d3.pie()
.sort(null) // Pour trier
.value(d => d.value)
Insert cell
Insert cell
getAngles(data)
Insert cell
Insert cell
rad = height/2 - 1
Insert cell
getArcs = d3.arc().innerRadius(0).outerRadius(rad)
Insert cell
Insert cell
Insert cell
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
col = d3.interpolateSpectral(0.6)
Insert cell
Insert cell
Insert cell
domain = // put the domain
Insert cell
range = // put the range
Insert cell
color = // write your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
nombre.toLocaleString()
Insert cell
Insert cell
data.map(d => d.value)
Insert cell
data.map(d => d.value.toLocaleString())
Insert cell
Insert cell
getAngles(data).filter(d => (d.endAngle - d.startAngle) > 0.25)
Insert cell
Insert cell
arcLabel = {
const radius = Math.min(width, height) / 2 * 0.8;
return d3.arc().innerRadius(radius).outerRadius(radius);
}
Insert cell
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell
html`<style type="text/css">
code, pre{
font-size: 80%;
background-color: #eee;
border-radius: 0.3em;
padding: 3px 4px 1px;
}
</style>`
Insert cell
Insert cell
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) :`
Insert cell
Insert cell
md`\`pie\` is the same function as \`getPie\`.`
Insert cell
pie = d3.pie()
.sort(null) // Pour trier
.value(d => d.value)
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