3f:null 40:["$","title",null,{"children":"Basic Pie! | Michelle Sharer | Observable"}] 46:T51a,pie = { const radius = 200; const svg = d3.select('#chart'); const center = { x: 300, y: 300 }; // based on viewBox: 0 0 600 600 const top = { x: center.x, y: center.y - radius, }; const data = formatData(fruit); let accumulatedValue = 0, greaterThanHalf, p1 = top, p2, d; svg.selectAll('path').remove(); // clear the svg element svg.selectAll('path') .data(data).enter() .append('path') .attr('class', 'arc') .attr('fill', slice => slice.color) .on('mouseover', function(slice) { d3.select(this).attr('fill', slice.hoverColor) }) .on('mouseout', function(slice) { d3.select(this).attr('fill', slice.color) }) .attr('d', slice => { accumulatedValue += slice.value; greaterThanHalf = slice.value > 180 ? 1 : 0; p2 = pointAlongCircumference(radius, center, 270 - accumulatedValue); d = ` M ${center.x} ${center.y} L ${p1.x} ${p1.y} A ${radius} ${radius} 0 ${greaterThanHalf} 0 ${p2.x} ${p2.y} L ${center.x} ${center.y} `; p1 = p2; return d; }); if (donut) { svg.append('circle') .attr('class', 'donut') .attr('cx', center.x) .attr('cy', center.y) .attr('r', 100) } }47:[] 44:{"id":"40061bf151a6d7d7","slug":"basic-pie","title":"Basic Pie!","thumbnail":"7b8c355ce5ff708d1af9a3b4e5ba3a06bee2fbd39612ccf2f0e37b5389fc7cf1","access_level":"public","create_time":"$D2018-07-07T21:23:36.294Z","update_time":"$D2018-08-05T20:37:25.355Z","view_time":null,"first_public_time":"$D2018-07-07T22:56:39.209Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a8c61a0bd942bbae","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":"starter_2024","bio":"Code is art","following":false},"version":129,"publish_version":129,"role":null,"authored":false,"authors":[{"type":"individual","id":"9fee62f7566ea13e","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":null,"bio":"Code is art","following":false}],"members":[{"type":"individual","id":"9fee62f7566ea13e","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Basic Pie!","cells":[{"id":0,"value":"md`# Basic Pie!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof apples = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"viewof oranges = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof bananas = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof avocados = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof plums = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"viewof donut = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"fruit = [\n {\n label: 'apples',\n value: apples,\n color: '#f1948a',\n hoverColor: '#e74c3c',\n },\n {\n label: 'oranges',\n value: oranges,\n color: '#f0b27a',\n hoverColor: '#e67e22',\n },\n {\n label: 'bananas',\n value: bananas,\n color: '#f7dc6f',\n hoverColor: '#f1c40f',\n },\n {\n label: 'avocados',\n value: avocados,\n color: '#7dcea0',\n hoverColor: '#27ae60',\n },\n {\n label: 'plums',\n value: plums,\n color: '#c39bd3',\n hoverColor: '#9b59b6',\n },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"pointAlongCircumference = (radius, origin, d) => {\n const radians = d * Math.PI / 180;\n return {\n x: origin.x + radius * Math.cos(radians),\n y: origin.y + radius * Math.sin(radians),\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"formatData = data => {\n const total = d3.sum(data.map(item => item.value));\n return data.map(item => ({\n ...item,\n value: item.value / total * 360,\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"