25:null 26:["$","title",null,{"children":"Top20 Activities of the EU27 according to employment | Asier Murciego | Observable"}] 2b:T68a,chart = { const arcs = data; // 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.parent)) .attr("d", arc); svg.append("g") .attr("font-family", "monospace") .attr("font-size", 10) .selectAll("text") .data(arcs) .join("text") // .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .attr("transform", d => labelTransform(d) ) .attr("font-weight", "lighter") .attr("text-anchor", d => labelAnchor(d) ) /* .attr("y", "0.35em") .text( d => labelSplit(d) ); */ .call(text => { text.append("tspan") // .attr("y", "0.35em") .attr("x", 0) .text( d => labelSplit(d, 0) ) text.append("tspan") .attr("dy", "1em") .attr("x", 0) .text( d => labelSplit(d, 1) ) } ); svg.append("g") .selectAll("rect") .data(parents) .append("rect"); function labelTransform(d) { const angle = d.midAngle * (180 / Math.PI); return `translate(${arcLabel.centroid(d)}) rotate(${angle-90}) rotate(${angle > 180 ? 180 : 0})`; } function labelAnchor(d) { const angle = d.midAngle * (180 / Math.PI); return angle > 180 ? "end" : "start"; } function labelSplit(d, i) { const lines = d.label.split("\\"); return i < lines.length ? lines[i].trim() : null; } /* setTimeout(()=>{ svg.selectAll("text") .call(wrap, 250); }, 0); */ return svg.node(); }2c:T663,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }2d:[] 29:{"id":"550d90a26179533c","slug":"polar-area-chart/2","title":"Top20 Activities of the EU27 according to employment","thumbnail":"f64aa5d915074512d432c2f7a3831c53f077e8b36bb2183bfa4c31a9242fcc22","access_level":"public","create_time":"$D2021-02-03T11:43:19.944Z","update_time":"$D2021-02-04T14:47:54.950Z","view_time":null,"first_public_time":"$D2021-02-03T15:14:45.058Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"17714d38b34f7fe2","login":"asier","name":"Asier Murciego","avatar_url":"https://avatars-next.observableusercontent.com/d3a37f0cac0668c25190ab8f013377088867bb52ca591a4a616bc22068b0a5a0","tier":"starter_2024"},"version":352,"publish_version":352,"role":null,"authored":false,"authors":[{"type":"individual","id":"46c56bda15ddf44d","login":"asier","name":"Asier Murciego","avatar_url":"https://avatars-next.observableusercontent.com/d3a37f0cac0668c25190ab8f013377088867bb52ca591a4a616bc22068b0a5a0","tier":null}],"members":[{"type":"individual","id":"46c56bda15ddf44d","login":"asier","name":"Asier Murciego","avatar_url":"https://avatars-next.observableusercontent.com/d3a37f0cac0668c25190ab8f013377088867bb52ca591a4a616bc22068b0a5a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Top20 Activities of the EU27 according to employment","cells":[{"id":90,"value":"md`# Top20 Activities of the EU27 according to employment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`Each arc's radius represents the number of persons employed in **2018**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"swatches({color, title: \"A21 Sector\", columns: `${width}px`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"sheet_id = \"16BfskTGHRaCWgxxUPZJ2zstJIUDz7hflgTRdik1w1cg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"data_url = `https://docs.google.com/spreadsheets/d/${sheet_id}/export?format=csv`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"data_csv = d3.csv(data_url, d => {\n return {\n value: +d.value,\n sector: d.sector,\n group: d.group,\n group_code: d.group_code,\n group_name: d.group_name\n }\n} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = Math.max(width, 1700)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"max_radius = (Math.min(width, height) / 1.75) - 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"max_value = d3.max(data_csv, d => +d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"data = data_csv.sort( (a, b) => d3.descending(a.value, b.value) ).map( (d, i, a) => {\n return { \n value: d.value,\n sector: d.sector,\n parent: d.group_code + \" \" + d.group_name,\n label: d.sector,\n startAngle: (i * Math.PI * 2) / a.length,\n endAngle: ((i * Math.PI * 2) / a.length) + (Math.PI * 2 / a.length),\n midAngle: ((i * Math.PI * 2) / a.length) + (Math.PI / a.length),\n outerRadius: (d.value / max_value) * max_radius\n } } )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"parents = data_csv.map( (d) => d.group_code + \" \" + d.group_name ).filter( (value, index, self) => {\n return self.indexOf(value) === index;\n} ).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"arc = d3.arc()\n .innerRadius(10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"arcLabel = d3.arc()\n .innerRadius( d => d.outerRadius + 10 )\n .outerRadius( d => d.outerRadius + 10 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"// color = d3.scaleOrdinal(parents, d3.schemeSpectral[parents.length])\ncolor = d3.scaleOrdinal(parents, d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2a:"$29:body"