2b:null 2c:["$","title",null,{"children":"Fancy Radial Bar Chart | Eric Lo | Observable"}] 31:T7c0,drawStartLines = g => { const starts = g.selectAll(".start") .data(chartData) .join("g") .attr("opacity", 1) .attr("fill", d => color(d.territory)) .attr("transform", (d, i) => `translate(${bar.width},${innerRadius(numOfBars - 1 - i) - minRadius + margin.top})`) .call(g => g.append("circle").attr("cy", bar.width / 2).attr("r", bar.width / 2)) .call(g => g.append("rect").attr("width", start.left).attr("height", bar.width)) .call(title) .on("mouseover", highlight) .on("mouseout", restore); const texts = starts.append("text") .attr("class", "start") .attr("font-weight", "bold") .attr("alignment-baseline", "hanging") .attr("dx", start.left + start.padding) .attr("dy", 4) .text(d => `${d.territory} ${d3.format("$.2s")(d.values[year])}`); var widths = texts.nodes().map(d => d.getComputedTextLength()); const ext = d3.extent(widths); const min = ext[0], max = ext[1]; starts.append("rect") .attr("width", (d, i) => start.right + (max - widths[i])) .attr("height", bar.width) .attr("transform", (d, i) => `translate(${widths[i] + start.left + start.padding * 2},0)`) const startLength = start.left + start.right + start.padding * 2 + max + bar.width + (triangle.num ? 3 : 0); starts.append("g") .selectAll("polygon") .data(seq(triangle.num)) .join("polygon") .attr("points", `0,2 ${triangle.width},${triangle.width} 0,${triangle.height - 2}`) .attr("transform", (d, i) => `translate(${startLength - bar.width + i * (triangle.width + triangle.padding)},0)`); const y = d => innerRadius(d) - bar.padding / 2 - minRadius + margin.top, tspace = startLength + (triangle.width + triangle.padding) * triangle.num; g.selectAll("line") .data(seq(numOfBars + 1)) .join("line") .attr("stroke", "#ccc") .attr("x1", bar.width).attr("y1", y) .attr("x2", tspace).attr("y2", y); parts.start = starts; return tspace; }32:T559,drawRadialBars = (g, tspace) => { const ticks = x.ticks(15).slice(1, -1); ticks.push(maxValue * 1.05); g.attr("transform", `translate(${tspace},${maxRadius + margin.top})`); const marks = g.append("g") .selectAll(".tick") .data(ticks) .join("g") .attr("class", "tick") .attr("transform", d => `rotate(${deg(x(d)) - 90})`) .call(g => g.append("line").attr("x1", minRadius - bar.padding / 2).attr("x2", maxRadius + bar.padding / 2)) .call(g => g.append("text") .attr("class", "tick") .attr("transform", d => `translate(${maxRadius + bar.padding * 1.5},0)`) .text(x.tickFormat(1, "$.1s"))); const bars = g.selectAll(".bar") .data(chartData) .join("g") .attr("class", "bar") .attr("opacity", 1) .attr("fill", d => color(d.territory)) .call(g => g.append("path").attr("d", arc)) .call(g => g.append("circle") .attr("r", bar.width / 2) .attr("cx", (d, i) => innerRadius(i) + bar.width / 2) .attr("transform", (d, i) => `rotate(${deg(x(d.values[year])) - 90})`)) .call(title) .on("mouseover", highlight) .on("mouseout", restore); g.selectAll(".track") .data(seq(chartData.length + 1)) .join("path") .attr("class", "track") .attr("stroke", "#ccc") .attr("d", axisArc); parts.bar = bars; }33:[{"id":"fd4051cc09e134f5cb21669f0f920e6498f6af234d68fe7433274612f7552a0c3c4ccf30ae9a17509eed34118d94c19507f930cdac8dac78600cf4b6628804f8","href":"https://static.observableusercontent.com/files/fd4051cc09e134f5cb21669f0f920e6498f6af234d68fe7433274612f7552a0c3c4ccf30ae9a17509eed34118d94c19507f930cdac8dac78600cf4b6628804f8","name":"sales4yrs.csv","type":"text/csv","lastModified":1603778168571.197,"size":458}] 2f:{"id":"ccdbd9fbcf45f6e4","slug":"fancy-radial-bars","title":"Fancy Radial Bar Chart","thumbnail":"fd214a850b8c45e81ad794e34d8bef4acdb9246faafa12030b2d0406b80bcc14","access_level":"public","create_time":"$D2020-10-27T05:40:50.138Z","update_time":"$D2021-11-06T20:12:45.669Z","view_time":null,"first_public_time":"$D2020-10-29T16:52:58.020Z","fork":false,"stars":67,"starred":false,"owner":{"type":"team","id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":"starter_2024"},"version":852,"publish_version":852,"role":null,"authored":false,"authors":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null}],"members":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":53,"collection":{"id":"b0fa06a3b7dc5033","slug":"business-data-storytelling","title":"2. Charts","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"type":"notebook","body":{"title":"Fancy Radial Bar Chart","cells":[{"id":0,"value":"md`# Fancy Radial Bar Chart\nSurprisingly, it does look like a jumbo swirl lollipop 🍭😋`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"viewof options = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":463,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"chart = {\n const svg = d3.create(\"svg\") \n .attr(\"font-size\", \"10pt\") \n .attr(\"cursor\", \"default\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n document.body.append(svg.node());\n \n var tspace = 0;\n svg.append(\"g\").call(g => tspace = drawStartLines(g));\n svg.append(\"g\").call(g => drawRadialBars(g, tspace));\n\n svg.node().remove();\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":758,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":762,"value":"parts = ({ start: null, bar: null })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"highlight = (e, d) => {\n parts.start.transition().duration(500).attr(\"opacity\", a => a === d ? 1 : 0.5);\n parts.bar.transition().duration(500).attr(\"opacity\", a => a === d ? 1 : 0.5);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":771,"value":"restore = () => {\n parts.start.transition().duration(500).attr(\"opacity\", 1);\n parts.bar.transition().duration(500).attr(\"opacity\", 1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"title = g => g.append(\"title\").text(d => `${years[year]} - ${d.territory}\\n${d3.format(\"$,.2f\")(d.values[year])}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"x = d3.scaleLinear()\n .domain([0, maxValue * 1.05])\n .range([0, 1.5 * Math.PI])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"color = d3.scaleOrdinal(d3.schemeTableau10)\n .domain(chartData.map(d => d.territory))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"seq = (length) => Array.apply(null, {length: length}).map((d, i) => i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"innerRadius = i => minRadius + (bar.width + bar.padding) * i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"outerRadius = i => innerRadius(i) + bar.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"deg = a => a * 180 / Math.PI;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"arc = (d, i) => d3.arc()\n .innerRadius(innerRadius(i))\n .outerRadius(outerRadius(i))\n .startAngle(0)\n .endAngle(x(d.values[year]))()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"axisArc = i => d3.arc()\n .innerRadius(innerRadius(i) - bar.padding / 2)\n .outerRadius(innerRadius(i) - bar.padding / 2)\n .startAngle(0)\n .endAngle(1.5 * Math.PI)()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"data = d3.csvParse(await FileAttachment(\"sales4yrs.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"chartData = data.map(d => { \n return {\n territory: d[\"territory\"],\n values: data.columns.slice(1).map(y => d[y])\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"maxValue = d3.max(chartData.map(d => d.values[year]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"year = options.year","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":747,"value":"years = data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"width = 1024","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"height = 768","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"margin = ({top: 30, left: 0, bottom: 0, right: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"minRadius = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"maxRadius = outerRadius(numOfBars - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"bar = ({width: 20, padding: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"triangle = ({width: bar.width / 2, height: bar.width, padding: 2, num: 3})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"start = ({left: 100, right: 350, padding: 5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"numOfBars = chartData.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":731,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":848,"value":"md`🌐[ericlo.dev](https://ericlo.dev) 🐱[GitHub Repositories](https://github.com/analyzer2004?tab=repositories) 🐦[Twitter](https://twitter.com/analyzer2004)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"