2b:null 2c:["$","title",null,{"children":"Getting started with d3.arc() and d3.pie() | bmdatavisualisation | Observable"}] 31:T442,viewof parameters = Inputs.form( { startAngle: slider({ min: 0, max: 1, format: ".0%", value: 0, step: 0.05 }), endAngle: slider({ min: 0, max: 1, value: 1, format: ".0%", step: 0.05 }), padAngle: slider({ min: 0, max: 1, value: 0, step: 0.05 }), donutWidth: slider({ min: 0.1, max: 1, value: 0, step: 0.1 }) }, { template: (formParts) => htl.html`

startAngle % ${Object.values(formParts)[0]}

endAngle % ${Object.values(formParts)[1]}

padAngle ${Object.values(formParts)[2]}

donutWidth: circleRadius % ${Object.values(formParts)[3]}

` } )32:T410,chart = { // define height and create svg const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthHeight * 2, widthHeight]); const colorScale = d3.scaleOrdinal(d3.schemeTableau10); const pie = d3 .pie() .startAngle(parameters.startAngle * (Math.PI * 2)) .endAngle(parameters.endAngle * (Math.PI * 2)) .padAngle(parameters.padAngle) .value((d) => d[changeableProps.valueVar]); const arcData = pie(changeableProps.data); const arc = d3 .arc() .innerRadius(circleRadius - parameters.donutWidth * circleRadius) .outerRadius(circleRadius); const pathGroup = svg .selectAll(".pathGroup") .data(arcData) .join((group) => { const enter = group.append("g").attr("class", "pathGroup"); enter.append("path").attr("class", "arcPath"); return enter; }); pathGroup .select(".arcPath") .attr("d", arc) .attr("fill", (d) => colorScale(d.data.group)) .attr("transform", `translate(${widthHeight},${widthHeight / 2})`); return svg.node(); }33:[] 2f:{"id":"e24b50f7257307e7","slug":null,"title":"Getting started with d3.arc() and d3.pie()","thumbnail":"d966d8b5b072ff2014bbfa58ce4f8d1e6365c183a255f5ca6b93b34269591b4c","access_level":"public","create_time":"$D2025-06-01T10:45:05.601Z","update_time":"$D2025-06-07T07:12:41.145Z","view_time":null,"first_public_time":"$D2025-06-01T17:07:35.309Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"83f5a5fb6fe280ff","login":"bmdatavisualisation","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1a158843df5971e68866096807cebb835fff8d443036113d0fbd4b85e4b67e90","tier":"starter_2024"},"version":115,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"969703731d06ddfa","login":"bmdatavisualisation","name":"BM Data Visualisation","avatar_url":"https://avatars-next.observableusercontent.com/31eaca3376975eca84233c003165299087581c56283dddbec7bb35ae7c22b9cc","tier":null}],"members":[{"type":"team","id":"83f5a5fb6fe280ff","login":"bmdatavisualisation","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1a158843df5971e68866096807cebb835fff8d443036113d0fbd4b85e4b67e90","tier":"starter_2024","role":"editor"},{"type":"individual","id":"969703731d06ddfa","login":"bmdatavisualisation","name":"BM Data Visualisation","avatar_url":"https://avatars-next.observableusercontent.com/31eaca3376975eca84233c003165299087581c56283dddbec7bb35ae7c22b9cc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Getting started with d3.arc() and d3.pie()","cells":[{"id":0,"value":"# Getting started with d3.arc() and d3.pie()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"This notebook was built to accompany a [Medium article](https://medium.com/javascript-in-plain-english/d3-js-tips-tricks-d0548f31a6de)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"changeableProps = {\n return {\n data: [\n { group: \"group1\", value: 4 },\n { group: \"group2\", value: 8 },\n { group: \"group3\", value: 2 },\n { group: \"group4\", value: 5 }\n ],\n valueVar: \"value\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"style = html`\n\n\n`","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"circleRadius = (widthHeight - margin) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"widthHeight = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"