2c:null 2d:["$","title",null,{"children":"Table for pie chart showing industries | Bernelle Verster | Observable"}] 32:T437,chart = { const arcs = pie(data); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg .append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); 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(); }33:[] 30:{"id":"c78f420d0a4e88c4","slug":"table-for-pie-chart-showing-industries","title":"Table for pie chart showing industries","thumbnail":"79c92c4dc16f7dfdad889021f5d0f74f495b61919d69342cf844ce940fcdca7b","access_level":"public","create_time":"$D2020-07-31T08:31:09.217Z","update_time":"$D2020-09-11T11:23:40.607Z","view_time":null,"first_public_time":"$D2020-08-03T08:13:58.415Z","has_unpublished_edits":null,"fork":{"id":"817ad7ce3be50f3c","slug":"editable-table","title":"Editable table","owner":{"id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson"}},"stars":1,"starred":false,"owner":{"type":"team","id":"c541497cff836eea","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":"starter_2024"},"version":151,"publish_version":151,"role":null,"authored":false,"authors":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null}],"members":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"role":"editor"}],"comments":[{"id":"12b95a9e6339c0fe","reply_to_id":null,"content":"I need the default values to be Industry instead of borough, etc.","create_time":"$D2020-08-03T13:46:45.367Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null}},{"id":"b510283a12920279","reply_to_id":"12b95a9e6339c0fe","content":"To be updated as one type, not in the code.","create_time":"$D2020-09-11T11:19:42.280Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Table for pie chart showing industries","cells":[{"id":0,"value":"md`# Table for pie chart showing industries\nIn draft, obviously.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"table = html`\n\n\n\n\n

Industry	code	value
energy	1	1234
waste	2	432
food	3	423

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md` To do:\n

Trying to code this image and make it interactive: http://multisite.iris.cat/agrocycle/files/2015/02/Agrocycle.png
Make pretty colours, round the corners. Figure out if importing images instead of colour is doable.
Figure out how to label the chart (need to link 'name' and 'value' to the Industry and value columns)\n
Allow pie segments draggable
Embed this pie chart into the many nodes thing, if possible (see https://observablehq.com/@zechasault/graph-o-matic-using-a-d3-force-directed-multigraph), and I think doing that via some sort of import function rather than copying aaaaall this code over will be cleaner.
Make the flow connections
Make the connections scalable, draggable, adjustable

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`#Ideas\nAnimate the city outline to form the pie chart of industries, similar to how this [notebook](https://observablehq.com/@floledermann/transitions-from-maps-to-diagrams-part-2) converts streets to a bar graph.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`# Appendix\nFor the code stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"data = Generators.observe(notify => {\n const keyinput = event => notify(parseTableData(table));\n table.addEventListener(\"input\", keyinput, false);\n notify(parseTableData(table));\n return () => window.removeEventListener(\"input\", keyinput);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"height = Math.min(width, 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"color = d3\n .scaleOrdinal()\n .domain(data.map(d => d.name))\n .range(\n d3\n .quantize(t => d3.interpolateSpectral(t * 0.7 + 0.1), data.length)\n .reverse()\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"arc = d3.arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function parseTableData(table) {\n const data = [];\n table.querySelectorAll(\"tr\")\n .forEach((row, i)=>{\n data.push(row.innerText.split(/[\\t\\n]/g));\n })\n\n const formattedData = data.reduce((accumulator, row, i)=>{\n if(i==0){\n accumulator.properties = row;\n }else{\n const rowObject = {};\n accumulator.properties.forEach((key,i)=>{\n rowObject[key] = row[i];\n });\n accumulator.push(rowObject);\n }\n return accumulator;\n },[]);\n return formattedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"arcLabel = {\n const radius = Math.min(width, height) / 2 * 0.8;\n return d3.arc().innerRadius(radius).outerRadius(radius);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"pie = d3.pie()\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"