3e:null 3f:["$","title",null,{"children":"About D3 Pie Chart and Arcs | David Narvaez | Observable"}] 45:T441,{ const strokeW=2; const radius=100; const padding = 10; const innerRad = 5; const padAngle = .5; const padRadius = 10; const size = (radius+strokeW+padding)*2; const sumData = data.reduce((s,i)=>s+i.value,0); const scale = d3 .scaleLinear() .domain([0, sumData]) .range([0, Math.PI*2]); const arc = d3.arc() .innerRadius(innerRad) .outerRadius(radius) .padAngle(padAngle) .padRadius(padRadius) .cornerRadius(1) let lastAngle = 0; const svg = d3 .select(DOM.svg(size, size)); svg .selectAll('path.b') .data(data) .enter() .append("path") .attr('class','b') .style("fill","#7d7d7d") .style("stroke","#7d7d7d") .style("stroke-width",strokeW) .attr("d", (d,i) => { const startAngle= lastAngle; const endAngle = scale(d.value) + startAngle; lastAngle = endAngle; return arc({startAngle, endAngle}) } ) .attr('transform',`translate(${size/2},${size/2})`) .on('mouseover', mousehoverHandler) .on('mouseout', mouseoutHandler) return svg.node(); }46:[] 43:{"id":"8cb742a9f14cf85b","slug":"d3-pie-chart","title":"About D3 Pie Chart and Arcs","thumbnail":"2612baa02226aa141e09ae4a2bc76fa6593909251f0633063c13136ffc0f8d2f","access_level":"public","create_time":"$D2019-03-25T17:33:58.475Z","update_time":"$D2019-04-03T17:02:34.208Z","view_time":null,"first_public_time":"$D2019-04-03T17:02:02.054Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"6a6d5c7bfb27c597","login":"dnarvaez27","name":"David Narvaez","avatar_url":"https://avatars-next.observableusercontent.com/9e56c895bb66bfc85f3a27a4bf2ff34824e2896081cc95b642222779655b509e","tier":"starter_2024","bio":"Software and Computer Engineer Student"},"version":978,"publish_version":978,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ec1ec4c9235d44e","login":"dnarvaez27","name":"David Narvaez","avatar_url":"https://avatars-next.observableusercontent.com/9e56c895bb66bfc85f3a27a4bf2ff34824e2896081cc95b642222779655b509e","tier":null,"bio":"Software and Computer Engineer Student"}],"members":[{"type":"individual","id":"8ec1ec4c9235d44e","login":"dnarvaez27","name":"David Narvaez","avatar_url":"https://avatars-next.observableusercontent.com/9e56c895bb66bfc85f3a27a4bf2ff34824e2896081cc95b642222779655b509e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"About D3 Pie Chart and Arcs","cells":[{"id":0,"value":"md`# About D3 Pie Chart and Arcs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"html`\nD3 does have a built-in pie chart, but I wanted to build one from scratch by only using D3 arcs. So, let's do it!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data= [\n { \"label\": \"A\", \"value\": 50},\n { \"label\": \"B\", \"value\": 10},\n { \"label\": \"C\", \"value\": 20},\n { \"label\": \"D\", \"value\": 15},\n { \"label\": \"E\", \"value\": 10},\n { \"label\": \"F\", \"value\": 30},\n { \"label\": \"G\", \"value\": 50},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"html`\nAs always I will define my dataset, that as you see, it contains objects with labels and values\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"html`\nWell, it is not that difficult. First we define our maximum range
\nSo, our maximum value will be the total sum of the value of our elements\n\n

\n  const sumData = data.reduce((s,i) => s + i.value, 0);\n

\n  const scale = d3\n    .scaleLinear()\n    .domain([0, sumData])\n    .range([0, Math.PI*2]);\n

Arc

\nBefore we continue with pies, let's go deep into the D3 arc function\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"html`\nWe have multiple parameters to modify our arc as you see here. So in the example below, you can modify them and see how that affects the arc\n\n

\n  const arc = d3.arc()\n    .innerRadius(innerRad)\n    .outerRadius(radius)\n    .padAngle(padAngle)\n    .padRadius(padRadius)\n    .cornerRadius(1)\n

Inner Radius

\nAs it name says, it will define the inner radius of the arc\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"html`\n

Angle

\nWell, in fact, to form an arc we must provide two parameters: startAngle and endAngle, but for simplicity I coded the startAngle as 0

\nNote: Something to take in mind is that the arc at 0 radians/degrees, refers to the polar coordinate ${tex `(r, \\theta=\\frac{\\pi}{2})`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"html`\n

Outer Radius

\nThis will state the radius of your arc. Try to play with it below, and see what happens when your inner radius is greater than the outer radius\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"html`\n

Padding

\nThe padding defines the distance between adjacent arcs, in order to mantain a parallel distance.
\nI may say this is one of the most confusing parameters due to it is splited in two. The padAngle and the padRadius. Even though they are separate parameters, they are multiplied in order to calculate the distance to other segments.

\n\nSo what are they for? Well, it seems it is used in the pie generator from D3\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"md`--- \n## Arc Playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"html`\nInner radius: ${innerRadiusSlider}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"viewof innerRadiusSlider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"html`\nAngle ${angle} radians\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"viewof angle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"html`Outter Radius ${radius}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"viewof radius = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"html`PadAngle ${padAngle}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"viewof padAngle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"html`PadRadius ${padRadius}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"viewof padRadius = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"{\n const strokeW=2;\n const padding = 10;\n const size = (radius+strokeW+padding)*2;\n \n const sumData = data.reduce((s,i)=>s+i.value,0);\n const scale = d3\n .scaleLinear()\n .domain([0, sumData])\n .range([0, Math.PI*2]);\n \n const arc = d3.arc()\n .innerRadius(innerRadiusSlider)\n .outerRadius(radius)\n .padAngle(padAngle)\n .padRadius(padRadius)\n .cornerRadius(1)\n \n const svg = d3\n .select(DOM.svg(size, size));\n \n svg.append('path')\n .style(\"fill\",\"#7d7d7d\")\n\t\t.style(\"stroke\",\"#7d7d7d\")\n\t\t.style(\"stroke-width\",strokeW)\n .attr('d', arc({startAngle: 0, endAngle: angle}))\n .style('transform', 'translate(50%,50%)')\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":876,"value":"html`\n

Continuation of pie

\nWell, after all, a pie is just a set of arcs the only thing we have to care about, is the angle of the arc: where to start and when to end\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"html`\n\n

So where to start?

\nWell, we can choose arbitrarily where to start, for the purpose of the article, we will start at 0 radians\n(Remember it correspond to the polar coordinate ${tex `(r,\\theta=\\frac{\\pi}{2})`})
\nWell, this will work for our first angle, but what about the rest?

\nNo big deal, the rest of the angles will start at the angle where our last arc ended. So we just have to keep a trace for the last angle used\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"html`\n

And where to end?

\nWell, remember I show you a pretty usefull function from D3 about scales. We will be using the scaleLinear() we defined before to transform all our data to an angle\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"html`\nAnd so, this is the result.\n

We defined a lastAngle variable that will keep track of the last angle
We apply the scale() function, that we defined from the scaleLinear()
And finally, we make use of the arc() function that we already know how to configure and then we return it to form the path

\n\n

\n...\n.attr(\"d\", (d,i) => {\n  const startAngle = lastAngle;\n  const endAngle = scale(d.value) + startAngle;\n  lastAngle = endAngle;\n  return arc({startAngle, endAngle})\n} )\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"html`\n

Events

\nAs to all of DOM components, you can define events to each element and D3 offers a way to use them too.
\nSo in your selection, you make use of an on(event, callback) function.\n\n

\n\n  .on('mouseover', (data, index, all_selection) => {\n      // The actual resides on all_selection[i]\n      // To access the element itself do it through d3.select(all_selection[i])\n      // in the data argument is the item of the data corresponding to the element\n  })\n  // OR\n  .on('mouseover', function(data) {\n      // The actual resides on the this keyword\n      // To access the element itself do it through d3.select(this)\n      // in the data argument is the item of the data corresponding to the element\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":657,"value":"mousehoverHandler = {\n return function(){\n const e = d3.select(this);\n let pos = e.attr('transform').match(regex)[0];\n \n e.transition()\n .attr('transform',`${pos} scale(1.1)`);\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"mouseoutHandler = {\n return (_,i,c)=>{\n const e = d3.select(c[i]);\n let pos = e.attr('transform').match(regex)[0];\n e.transition()\n .attr('transform',pos);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"regex = /translate\$\\d+(\\.\\d+)?,\\s?\\d+(\\.\\d+)?\$/gm;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"