25:null 26:["$","title",null,{"children":"Donut chart with labels | Miralem Drek | Observable"}] 2b:T5cc,picasso.chart({ element: document.querySelector('#container'), data, settings: { scales: { c: { data: { field: 'Sales' }, type: 'color' } }, components: [ { key: 'p', type: 'pie', data: { extract: { field: 'Year', props: { num: { field: 'Sales' } } } }, settings: { padAngle: 0.01, startAngle: (startAngle * 2 * Math.PI) / 360, endAngle: 2 * Math.PI + (startAngle * 2 * Math.PI) / 360, slice: { cornerRadius: 4, innerRadius: 0.5, arc: { ref: 'num' }, fill: { scale: 'c', ref: 'num' }, strokeWidth: 1, stroke: 'rgba(255, 255, 255, 0.5)' } } }, { type: 'labels', settings: { sources: [ { component: 'p', selector: 'path', strategy: { type: 'slice', settings: { direction: rotate ? 'rotate' : 'horizontal', labels: [ { label: d => d.data.label, fill: position === 'into' ? '#fff' : '#444', placements: [{ position }] } ] } } } ] } } ] } })2c:[] 29:{"id":"c78ffa1d717623bd","slug":"donut-chart-with-labels/2","title":"Donut chart with labels","thumbnail":"bc7557c49513ff1fa69800579adc9c24a3b052e5a1cb01ae279ad4561e938487","access_level":"public","create_time":"$D2019-12-05T06:53:10.885Z","update_time":"$D2019-12-05T06:53:10.885Z","view_time":null,"first_public_time":"$D2019-12-05T06:53:22.012Z","fork":{"id":"6f7965816e040872","slug":"donut-chart-with-labels","title":"Donut chart with labels","owner":{"id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek"}},"stars":1,"starred":false,"owner":{"type":"team","id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":"starter_2024"},"version":124,"publish_version":124,"role":null,"authored":false,"authors":[{"type":"individual","id":"b60aebf3db8d7639","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":null}],"members":[{"type":"individual","id":"b60aebf3db8d7639","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Donut chart with labels","cells":[{"id":0,"value":"md`# Donut chart with labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof position = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof rotate = {\n const form = html``;\n form.oninput = () => (form.value = form.r.checked);\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof startAngle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n var arr = [['Year', 'Sales', 'Budget']];\n\n for (var i = 0; i < 30; i++) {\n arr.push([\n String(2010 + i),\n parseFloat((Math.random() * 1000).toFixed(0)),\n parseFloat((Math.random() * 1000).toFixed(0))\n ]);\n }\n\n return [\n {\n type: 'matrix',\n data: arr\n }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"picasso = require(\"picasso.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"