36:["$","title",null,{"children":"Radial Stacked Bar Chart | instancia paris | Observable"}] 3e:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3f:[{"id":"09ecf9f4ceddbdc17b5d3038a3d24506ea52b170e99ab09e71a2c3689510bf1c20e33a6f29a1d3d7312bad500a3dcd42cce0b2c0f1cdc7f0541e2aebc8b2beda","href":"https://static.observableusercontent.com/files/09ecf9f4ceddbdc17b5d3038a3d24506ea52b170e99ab09e71a2c3689510bf1c20e33a6f29a1d3d7312bad500a3dcd42cce0b2c0f1cdc7f0541e2aebc8b2beda","name":"pivot_site_famille.csv","type":"text/csv","lastModified":1630161760110.471,"size":543}] 3a:{"id":"c5375a087c20f75b","slug":"radial-stacked-bar-chart/2","title":"Radial Stacked Bar Chart","thumbnail":"cb18c4b0a24a04934b18f7ab475fa5e38c4317369891dbecdb8206daa7ff225d","access_level":"public","create_time":"$D2021-08-28T14:35:04.055Z","update_time":"$D2021-08-28T16:04:03.951Z","view_time":null,"first_public_time":"$D2021-08-28T15:03:02.282Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"f525e1fa7de7eeea","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":223,"publish_version":223,"role":null,"authored":false,"authors":[{"type":"individual","id":"c720f06b17f65910","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c720f06b17f65910","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Radial Stacked Bar Chart","cells":[{"id":0,"value":"md`# Radial Stacked Bar Chart\n\nRadial layouts are pretty, but may impede comparison, so consider them primarily to emphasize cyclical patterns. (This example’s data is not cyclical, so the radial layout here is gratuitous!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`Inner radius slider idea is from @pstuffa/radial-stacked-bar-chart-as-a-function \n\nRequire D3V6 - D3FORMAT - INPUT - SLIDER - SERIALIZE- RASTERIZE`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"viewof innerRadius = slider({\n min: 0,\n max: d3.min([width, height]) / 2,\n step: 1,\n value: 198,\n title: \"Inner Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height))\n .attr(\"viewBox\", `${-width / 2} ${-height / 2} ${width} ${height}`)\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .style(\"font\", \"10px sans-serif\");\n\n svg.append(\"g\")\n .selectAll(\"g\")\n .data(d3.stack().keys(data.columns.slice(1))(data))\n .join(\"g\")\n .attr(\"fill\", d => z(d.key))\n .selectAll(\"path\")\n .data(d => d)\n .join(\"path\")\n .attr(\"d\", arc);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .call(legend);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"// DEFINE OUTPUT VIEW (button)\nViewOutput = html`\n${DOM.download(await rasterize(chart), null, \"Download as PNG\")}\n${DOM.download(await serialize(chart), null, \"Download as SVG\")}\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"// DATA","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = d3.csvParse(await FileAttachment(\"pivot_site_famille.csv\").text(), (d, _, columns) => {\n let total = 0;\n for (let i = 1; i < columns.length; ++i) total += d[columns[i]] = +d[columns[i]];\n d.total = total;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"arc = d3.arc()\n .innerRadius(d => y(d[0]))\n .outerRadius(d => y(d[1]))\n .startAngle(d => x(d.data.State))\n .endAngle(d => x(d.data.State) + x.bandwidth())\n .padAngle(0.01)\n .padRadius(innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.State))\n .range([0, 2 * Math.PI])\n .align(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// This scale maintains area proportionality of radial bars\ny = d3.scaleRadial()\n .domain([0, d3.max(data, d => d.total)])\n .range([innerRadius, outerRadius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"z = d3.scaleOrdinal()\n .domain(data.columns.slice(1))\n .range([\"#009acdff\",\"#155577ff\", \"#654569ff\", \"#8b728eff\", \"#00ad81ff\", \"#369176ff\", \"#8fafa4ff\", \"#DCE1DEff\", \"#5c0029ff\", \"#fbb13cff\", \"#8b728eff\", \"#85b79dff\", \"#0c4767ff\", \"#8f2d56ff\",\"#d81159ff\", \"#218380ff\", \"#F78154ff\"])\n\n//[\"#155577ff\", \"#009acdff\", \"#654569ff\", \"#8b728eff\", \"#00ad81ff\", \"#369176ff\", \"#8fafa4ff\", \"#f7f0f5ff\", \"#8b728eff\", \"#5c0029ff\", \"#85b79dff\", \"#0c4767ff\",\"#d81159ff\", \"#8f2d56ff\", \"#218380ff\", \"#fbb13cff\", \"#73d2deff\"]\n//[\"#98abc5\", \"#8a89a6\", \"#7b6888\", \"#6b486b\", \"#a05d56\", \"#d0743c\", \"#ff8c00\"] initial\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"xAxis = g => g\n .attr(\"text-anchor\", \"middle\")\n .call(g => g.selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", d => `\n rotate(${((x(d.State) + x.bandwidth() / 2) * 180 / Math.PI - 90)})\n translate(${innerRadius},0)\n `)\n .call(g => g.append(\"line\")\n .attr(\"x2\", -5)\n .attr(\"stroke\", \"#000\"))\n .call(g => g.append(\"text\")\n .attr(\"transform\", d => (x(d.State) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI\n ? \"rotate(90)translate(0,16)\"\n : \"rotate(-90)translate(0,-9)\")\n .text(d => d.State)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"yAxis = g => g\n .attr(\"text-anchor\", \"middle\")\n .call(g => g.append(\"text\")\n .attr(\"y\", d => -y(y.ticks(5).pop()))\n .attr(\"dy\", \"-1em\")\n .text(\"Population\"))\n .call(g => g.selectAll(\"g\")\n .data(y.ticks(5).slice(1))\n .join(\"g\")\n .attr(\"fill\", \"none\")\n .call(g => g.append(\"circle\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-opacity\", 0.5)\n .attr(\"r\", y))\n .call(g => g.append(\"text\")\n .attr(\"y\", d => -y(d))\n .attr(\"dy\", \"0.35em\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 5)\n .text(y.tickFormat(5, \"s\"))\n .clone(true)\n .attr(\"fill\", \"#000\")\n .attr(\"stroke\", \"none\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"legend = g => g.append(\"g\")\n .selectAll(\"g\")\n .data(data.columns.slice(1).reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(-40,${(i - (data.columns.length - 1) / 2) * 20})`)\n .call(g => g.append(\"rect\")\n .attr(\"width\", 18)\n .attr(\"height\", 18)\n .attr(\"fill\", z))\n .call(g => g.append(\"text\")\n .attr(\"x\", 24)\n .attr(\"y\", 9)\n .attr(\"dy\", \"0.35em\")\n .text(d => d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// width = 975","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// height = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// innerRadius = 180","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"outerRadius = Math.min(width, height) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"// import { color, slider, select, checkbox} from \"@jashkenas/inputs\"\n\nfunction slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"function rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 35:null