44:["$","title",null,{"children":"Pie Chart Tutorial | elouen-ginat | Observable"}] 4c:T443,chart = { const arcs = getAngles(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) .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())); return svg.node(); }4d:T46c,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(); }4e:T49c,md` --- ## II.1-Adding mouse events The first thing we are going to add is the mouse handler event. So for each path add a \`mouseover\` and a \`mouseout\` event which calls respectively \`handleMouseOver(d,i)\` and \`handleMouseOut(d,i)\` functions. ➡️ In the **mouse over handler** you will start from this arc: > \`\`\` let new_arc = d3.arc() .innerRadius(in_radius) // keeps area .outerRadius(radius) .cornerRadius(cornerRadius) \`\`\` \n and transition to that one: > \`\`\` let new_arc2 = d3.arc() .innerRadius(in_radius) .outerRadius(radius*radius_multi) .cornerRadius(cornerRadius) \`\`\` \n with a black stroke. \n > ⚙️ *Note that \`in\_radius\` needs to be defined. it's the inner radius which keeps the area of the piece constant.* \n ➡️ For the **mouse out handler** you will transition from: > \`\`\` let new_arc = d3.arc() .innerRadius(0) .outerRadius(radius*radius_multi) .cornerRadius(0) \`\`\` \n to the same one with an outer radius equal to \`radius\` and a white stroke. >⚙️ *Don't forget to use \`anim_path_duration\` and other predefined variables.* `4f:T4a3,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(); }50:T8e8,chart_mouse_events_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)) .attr("d", arc_small) .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 mouse handler functions here function handleMouseOver(d, i) { let path = d3.select(this) 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) { 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(); }51:T45d,md ` ### II.2.1-Addressing the second issue When we **hover the center of the pie chart pieces are flickering**. In fact, as soon as we over the piece close to the center, the mouse over handler reduces the inner radius, so that we are not anymore hovering it and the mouse out handler is then called. This **circle continues, causing the flickering**. To solve this, we are going to need a **bit of work**. An idea is to reproduce the pie chart with **transparent pieces** on top of it that serves as the mouse detector. And the filled pieces are the only ones modified when overing. ➡️ The first step is to add the same pieces but transparent at the end of the code (they need to be drawn on top). > 💡 *Set the \`fill\` attribute to \`"none"\` to make them transparent.* Then in event handlers we need to access the corresponding colored piece. So, a class attribute has been set to \`"path_" + d.index\` for each piece. This allows us to select them with the function \`d3.select()\`. > 💡 *datatum informations are stored in the \`i\` parameter of handlers* `52:Ta02,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(); }53:Tb62,chart_correction_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("class", d => "path_"+d.index) //===== .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 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_"+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"); } function handleMouseOut(d, i) { // change "this" to select the colored piece let path = d3.select(".path_"+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"); } return svg.node(); }54:Tb3a,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(); }55:T77d,chart_animate = { 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", arc_small) .attr("class", d => "path_fn_"+d.index) //add identifier to path; 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())); let labels_per = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("class", d => "lab_fn_"+d.index) //add identifier to labels .attr("transform", d => `translate(${arcLabel_small.centroid(d)})`) .call(text => text.append("tspan") .attr("fill-opacity", 0) .attr("font-weight", "bold") .text(d => Math.round(d.data.value/d3.sum(data, d => d.value)*100)/100 + "%")) 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) return svg.node(); }56:[{"id":"bee673b386dd058ab8d2cf353acbedc6aa01ebd1e6f63e2a9ab1b4273c7e6efd1eeea526345e4be7f0012d5db3ec743ef39ad9e6a043c196670bf9658cb02e79","href":"https://static.observableusercontent.com/files/bee673b386dd058ab8d2cf353acbedc6aa01ebd1e6f63e2a9ab1b4273c7e6efd1eeea526345e4be7f0012d5db3ec743ef39ad9e6a043c196670bf9658cb02e79","name":"population-by-age.csv","type":"application/octet-stream","lastModified":1616765550412.83,"size":273},{"id":"5e8e3ee8944a42acbb80d2dea5bcb85c38630f63cff09d33674c3dab47eb0a127f0da97d302700f38dd2741e28b12b974afd68b98e419e3c443d15cbc0fc6523","href":"https://static.observableusercontent.com/files/5e8e3ee8944a42acbb80d2dea5bcb85c38630f63cff09d33674c3dab47eb0a127f0da97d302700f38dd2741e28b12b974afd68b98e419e3c443d15cbc0fc6523","name":"figure recap pie chart.png","type":"image/png","lastModified":1616935118443.124,"size":69787}] 48:{"id":"0aa4b3321f915229","slug":"pie-chart-tutorial","title":"Pie Chart Tutorial","thumbnail":"5c6733ee9059e4982c09d1cca880ad0aad427219e85ba0a02ed14c57009d2441","access_level":"public","create_time":"$D2021-03-26T13:32:30.412Z","update_time":"$D2021-04-08T20:40:26.404Z","view_time":null,"first_public_time":"$D2021-04-09T09:29:13.763Z","has_unpublished_edits":null,"fork":{"id":"50064204b82fdf22","slug":"pie-chart-component","title":"Pie chart component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":2,"starred":false,"owner":{"type":"team","id":"1a2b7f14cb888d77","login":"elouen-ginat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1cdcd3bd7acc8ce8fe2b00708e24076c99538976e4f92f41a1082cf7f8a588d8","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1948,"publish_version":1948,"role":null,"authored":false,"authors":[{"type":"individual","id":"f3f302568f102814","login":"elouen-ginat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1cdcd3bd7acc8ce8fe2b00708e24076c99538976e4f92f41a1082cf7f8a588d8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"77d20fb8700b6acc","login":"clotilde-23","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dc3e4df0178d48b0d25c7107710a6f5970992c7169a0eedf0312797b8da5320","tier":null,"role":"editor"},{"type":"individual","id":"f3f302568f102814","login":"elouen-ginat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1cdcd3bd7acc8ce8fe2b00708e24076c99538976e4f92f41a1082cf7f8a588d8","tier":null,"role":"editor"},{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null,"role":"editor"},{"type":"individual","id":"d35bf3fc37dc25d5","login":"datartist","name":"Aurélie Frechet","avatar_url":"https://avatars-next.observableusercontent.com/68f190f34a563fcaccc323861a4f0ae2322d6aeea3e64741cff530d0139f2a62","tier":null,"role":"viewer"}],"comments":[{"id":"4c816e314e027126","reply_to_id":null,"content":"Waaaaaw! I'm impressed!","create_time":"$D2021-04-01T09:22:41.011Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pie Chart Tutorial","cells":[{"id":0,"value":"md`# Pie Chart Tutorial\n\nIn this tutorial, we will use the data from [U.S. Census](https://www.census.gov/data.html) to show the estimated **population by age in the United States as of 2015**. The total estimated population is ${d3.sum(data, d => d.value).toLocaleString(\"pl-PL\")}. Firstly, we will explain and recreate this [pie chart](/@d3/pie-chart).\nSecondly, we will add **animations and functionalities** to make it more interactive. \n\n### Functionalities:\n* Animate pieces of the chart when hovering them.\n* Show detailled statistics when hovering a piece of the chart. \n\n\n**Authors**: [Clotilde Nietge](https://observablehq.com/@clotilde-23), [Elouen Ginat](https://observablehq.com/@elouen-ginat)
\n**Inspired** by this [pie chart](/@d3/pie-chart).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`\n---\n# I-How to reproduce this pie ?\n## I.1-Data management\n➡️ Use the function \\`d3.csvParse\\` to **load data**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"file = FileAttachment(\"population-by-age.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"data = d3.csvParse(await file.text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"md`➡️ Import **modules**, so that it will be easier to code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`\n## I.2-Scales and height`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"md`### I.2.0 - Dimensions\n➡️ Implement the **height** of your future graph (e.g. height = 600). The width is already implemented.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = Math.min(width, 600)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"md`### I.2.1 - Arcs and pie\n\nLet's begin with the **arcs of the pie**.
\n\n➡️ Define \\`getAngles()\\`, a mapping that corresponds to the **angles** of the arcs of the pie.
\n> 💡 *Use \\`d3.pie\\` : it defines the angle of the piece giving a value.
\nYou can also use \\`sort(null)\\` to sort the data.* \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"getAngles = d3.pie()\n .sort(null) // Pour trier\n .value(d => d.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"md`If you apply \\`getAngles()\\` to your data, it returns an array of objects. Each object corresponds to a piece having a value (the population) and an **angle to start** and an **angle to end**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"getAngles(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"md`\n➡️ Implement \\`getArcs()\\` that defines the **size of the pie** by giving its \\`innerRadius\\` and its \\`outerRadius\\`. This function creates the arc for each piece.
\nAs you don't want a donut (hole in the center), the inner radius equals to 0.
\n\n> 💡 *Set the **radius** of your pie and use the function \\`d3.arc\\`.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"rad = height/2 - 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"getArcs = d3.arc().innerRadius(0).outerRadius(rad)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"md `## Practice ✏️ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"md`➡️ Use the functions you have just created to design your **first pie**.
\nDon't worry if the pieces are black, you will change the color later.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"chart_first_step = {\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]); // put the referential at the center of the svg\n \n const arcs = ; // Define the angles of the arcs\n\n let pieces = svg.append(\"g\")\n .selectAll(\"path\")\n .data() // Set the data\n .join(\"path\")\n .attr(\"d\", getArcs)\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"md` ### Solution ✅`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"chart_first_step = {\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n \n const arcs = getAngles(data); // Define the size of the arcs\n\n let pieces = svg.append(\"g\")\n .selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"d\", getArcs)\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"md`\n### I.2.2 - Colour scale\nLet's add **colour** for each age group.
\n\n➡️ First, you have to define the **domain** which contains the labels of the different age groups.
\n\n➡️ Secondly, you have to define the **range** that corresponds to the different colours of the piece of the pie.
\n> 💡 * Use the function \\`d3.interpolateSpectral\\` to define the colours. To get more familiar with this function you can change the value in the brackets (between 0 and 1). * \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"swatches([col])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"col = d3.interpolateSpectral(0.6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"md`\n➡️ Finally, define the function \\` color \\` that match a colour for one class of age.\n> 💡 *As the domain is discrete, use the fonction \\`d3.scaleOrdinal()\\`.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"md `## Practice ✏️ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1617,"value":"domain = // put the domain","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1619,"value":"range = // put the range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1621,"value":"color = // write your code here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1623,"value":"md` ### Solution ✅`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"color_domain = data.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"color_range = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"color = d3.scaleOrdinal()\n .domain(color_domain)\n .range(color_range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1626,"value":"md `## Practice ✏️ \nIt is time to **add colours** to the pieces of your pie. To do that, use the \\`fill\\` attribute. To change the colour of the **outline in white**, you can use the \\`stroke\\` attribute.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"chart_color_step = {\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n \n const arcs = getAngles(data);\n\n let pieces = svg.append(\"g\")\n .selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n // Put your code HERE //\n .attr(\"d\", getArcs);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1634,"value":"md` ### Solution ✅`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"chart_color_step_solution = {\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n \n const arcs = getAngles(data); // \n\n let pieces = svg.append(\"g\")\n .attr(\"stroke\", \"white\")\n //.attr(\"fill\", color(data.name))\n .selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"fill\", d => color(d.data.name))\n .attr(\"d\", getArcs);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"md`## I.3-Text and legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1814,"value":"md`Let's add the **population of each age group** on the pieces of the pie.
\n\n➡️ It is more convenient to read big values when the **thousands are separated** by a space.\nTherefore, you can use \\`value.toLocaleString()\\`.
\n\nHere is an example :\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1840,"value":"nombre = 76543455678","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1835,"value":"nombre.toLocaleString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"md`Here is another example concerning the subject : `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1860,"value":"data.map(d => d.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1855,"value":"data.map(d => d.value.toLocaleString())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1847,"value":"md `➡️ Attention : you can't write the population of some age groups because the piece of arc is **too small**. Therefore, you will **filter** in order to keep the pieces with an angle bigger than 0.25.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1822,"value":"getAngles(data).filter(d => (d.endAngle - d.startAngle) > 0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1647,"value":"md `## Practice ✏️
\nWrite the functions to get the **name** of the age groups and their **population**.
\nThe font and the size of the text is already implemented, as well as the position. By the way, we have use the function \\`tanslate({arcLabel.centroid(d)})\\` in the \\`transform\\` attribute.
\n\\`arcLabel\\` is the function written below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"arcLabel = {\n const radius = Math.min(width, height) / 2 * 0.8;\n return d3.arc().innerRadius(radius).outerRadius(radius);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1654,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1650,"value":"md` ### Solution ✅`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1656,"value":"chart_text_step_solution = {\n const arcs = pie(data);\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n\n let pieces = svg.append(\"g\")\n .attr(\"stroke\", \"white\")\n .selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"fill\", d => color(d.data.name))\n .attr(\"d\", getArcs);\n \n let labels = svg.append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"middle\")\n .selectAll(\"text\")\n .data(arcs)\n .join(\"text\")\n .attr(\"transform\", d => `translate(${arcLabel.centroid(d)})`)\n .call(text => text.append(\"tspan\")\n .attr(\"y\", \"-0.4em\")\n .attr(\"font-weight\", \"bold\")\n .text(d => d.data.name))\n .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", \"0.7em\")\n .attr(\"fill-opacity\", 0.7)\n .text(d => d.data.value.toLocaleString()));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"md`\n---\n# II-Add-ons\n\nNow that we have a beautiful pie chart with statistics and colors, the next part will focus on **adding animations and interactions to this chart**.\n\nFor now the only interaction we will consider is hovering a piece of the chart. To do this, we will need to use the \\`on()\\` function and the \\`mouseover\\` and \\`mouseout\\` events.\n\n### Here is a list of predefined variables we are going to need afterward. \n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"viewof radius_multi = slider({min:1,\n max:1.5,\n step:0.05,\n value:1.15,\n description:\"radius*radius_multi is the outer radius when hovering a piece\",\n title:\"radius_multi\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"viewof centroid_multi = slider({min:1,\n max:2,\n step:0.05,\n value:1.25,\n description:\"centroid*centroid_multi is the position of the percentage when hovering a piece\",\n title:\"centroid_multi\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"viewof cornerRadius = slider({min:1,\n max:30,\n step:1,\n value:10,\n description:\"cornerRadius of arcs whe hovering to have rounded corners\",\n title:\"cornerRadius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"viewof anim_path_duration = slider({min:10,\n max:2000,\n step:10,\n value:300,\n description:\"duration of paths animations when hovering\",\n title:\"anim_path_duration\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"viewof anim_lab_duration = slider({min:10,\n max:2000,\n step:10,\n value:400,\n description:\"duration of labels animations when hovering\",\n title:\"anim_lab_duration\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"viewof radius_lab_multi = slider({min:0.2,\n max:1,\n step:0.01,\n value:0.85,\n description:\"radius*radius_lab_multi is the position of labels\",\n title:\"radius_lab_multi\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"radius = (Math.min(width, height) / 2 - 1)/radius_multi","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"arc_small = d3.arc()\n .innerRadius(0)\n .outerRadius(radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"arcLabel_small = {\n const r = radius * radius_lab_multi\n return d3.arc().innerRadius(r).outerRadius(r);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"md`### Summary figure when hovering the center piece\n

\n#### Formulas:\nR = radius \\n\nR\\' = radius \\* radius_multi \\n\nRperc = centroid \\* centroid_multi (centroid is the position of the centroid of the arc) \\n\nRlab = radius \\* radius_lab_multi \\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"md `## Practice ✏️ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"md` ### Solution ✅`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"md `\n---\n## II.2-Correction of issues\n\nNow we see issues. **The black stroke of the piece we are hovering is not complete**. In fact, the following piece is drawn on top of it. So the white border is covering the black one. \n\nTo adress this issue we need to tell D3 to draw the hovering piece on top of the others. We can use the \\`raise()\\` function to **put the hovering piece first in the DOM** when the **mouse over handler** is called. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"md `## Practice ✏️ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"md` ### Solution ✅`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"md `\n---\n## II.3-The finale step, adding percentages\nWe are going to **add percentages which are shown when hovering**. The text should be faded and shot from the labels. \n\n➡️ First, add a group of labels as the ones already here and **change the text to the percentage** with an opacity of 0. \n\n> 💡 *You can get the total population from \\`d3.sum(data, d => d.value)\\`.*\n\n➡️ Secondly we will need to animate the percentages labels. So, as path, **add a class attribute** with the value \\`\"lab_\" + d.index\\` to select them in the mouse handlers. \n\n➡️ Finaly add **animations in handlers**. the pourcentage goes from the \\`centroid\\` position to the \\`centroid * centroid_multi\\` position with an opacity of 1.\n\n> ⚙️ *Do the **reverse in the mouse out handler.***\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"md `## Practice ✏️ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"$54","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"md`\n---\n# Final result 💯\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"function handleMouseOver(d, i) {\n \n let path = d3.select(\".path_fn_\"+i.index) //select the corresponding path\n path.raise(); //change order of rendering \n\n let in_radius = Math.sqrt((radius*radius_multi)**2-radius**2)\n \n let new_arc = d3.arc()\n .innerRadius(in_radius) // keep area\n .outerRadius(radius)\n .cornerRadius(cornerRadius)\n\n let new_arc2 = d3.arc()\n .innerRadius(in_radius)\n .outerRadius(radius*radius_multi)\n .cornerRadius(cornerRadius)\n\n path.interrupt().attr(\"d\", new_arc)\n .transition()\n .duration(anim_path_duration)\n .attr(\"d\", new_arc2)\n .attr(\"stroke\",\"black\");\n \n let lab = d3.select(\".lab_fn_\"+i.index)\n\n lab.interrupt().transition()\n .duration(anim_lab_duration)\n .attr(\"transform\", d => `translate(${arcLabel_small.centroid(d).map(x => centroid_multi*x)})`)\n .selectAll(\"tspan\")\n .attr(\"fill-opacity\", 1)\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"function handleMouseOut(d, i) {\n \n let path = d3.select(\".path_fn_\"+i.index) //slect the corresponding path\n \n let new_arc = d3.arc()\n .innerRadius(0)\n .outerRadius(radius*radius_multi)\n .cornerRadius(0)\n\n let new_arc2 = d3.arc()\n .innerRadius(0)\n .outerRadius(radius)\n .cornerRadius(0)\n \n path.interrupt() //force previous anim to stop\n .attr(\"d\", new_arc)\n .transition()\n .duration(anim_path_duration)\n .attr(\"d\", new_arc2)\n .attr(\"stroke\", \"white\")\n\n let lab = d3.select(\".lab_fn_\"+i.index)\n\n lab.interrupt().transition()\n .duration(anim_lab_duration)\n .attr(\"transform\", d => `translate(${arcLabel_small.centroid(d)})`)\n .selectAll(\"tspan\")\n .attr(\"fill-opacity\", 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"md `\n---\n# Libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"md `\n---\n# Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1927,"value":"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) :`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"function swatches(colors) {\n return html`${colors.map(c => `

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1932,"value":"md`\\`pie\\` is the same function as \\`getPie\\`.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1903,"value":"pie = d3.pie()\n .sort(null) // Pour trier\n .value(d => d.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W56","stdlib":"1"}} 24:null