2c:null 2d:["$","title",null,{"children":"Fancy Radial Bar Chart | hockeyfan22 | Observable"}] 32:T8d3,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(" ")(d.values[year])}`); // What's wrong with the getBBox()?? //var widths = texts.nodes().map(d => d.getBBox().width); var widths = d3.selectAll(".start").nodes().map(d => d.getBBox().width); // Fail-safe for getBBox() var bboxFix = 0; if (widths.every(d => d === 0)) { bboxFix = 3; widths = texts.nodes().map(d => d.textContent.length * 7.5 - 10); } 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 * 2 - min - bar.width * 2 + bboxFix; 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; }33:T558,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; }34:[{"id":"ed94f496636d85e73ae41c439118ded1dcedc9654f25d677b9c9d5213cbbb60cbc37c20e5383cd10090ef750e3c87c100061074894f625693de642922cd6406c","href":"https://static.observableusercontent.com/files/ed94f496636d85e73ae41c439118ded1dcedc9654f25d677b9c9d5213cbbb60cbc37c20e5383cd10090ef750e3c87c100061074894f625693de642922cd6406c","name":"stars.csv","type":"text/csv","lastModified":1604274217877.436,"size":171}] 30:{"id":"4c4c7eee395ff90a","slug":"fancy-radial-bar-chart","title":"Fancy Radial Bar Chart","thumbnail":"78961735125b0b2863ceb132b10e19490c50d688b0b50e95d0e6ce3c24e89e22","access_level":"public","create_time":"$D2020-11-01T23:39:11.791Z","update_time":"$D2020-11-01T23:49:15.123Z","view_time":null,"first_public_time":"$D2020-11-01T23:49:20.317Z","has_unpublished_edits":null,"fork":{"id":"ccdbd9fbcf45f6e4","slug":"fancy-radial-bars","title":"Fancy Radial Bar Chart","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f6312d5e27b60ae4","login":"hockeyfan22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b196aa13898620d3d65f810ae0e355832041b6e0927adb9f43541dbb9752c0a3","tier":"starter_2024"},"version":796,"publish_version":796,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb4ef8ba640bc1af","login":"hockeyfan22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b196aa13898620d3d65f810ae0e355832041b6e0927adb9f43541dbb9752c0a3","tier":null}],"members":[{"type":"individual","id":"bb4ef8ba640bc1af","login":"hockeyfan22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b196aa13898620d3d65f810ae0e355832041b6e0927adb9f43541dbb9752c0a3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fancy Radial Bar Chart","cells":[{"id":0,"value":"md`# Fancy Radial Bar Chart\nAdapted to Leaf's stars G/60 in all situations from Evolving Hockey. Still looks like a jumbo swirl lollipop 🍭😋`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof options = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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 var tspace = 0;\n svg.append(\"g\").call(g => tspace = drawStartLines(g));\n svg.append(\"g\").call(g => drawRadialBars(g, tspace));\n \n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"parts = ({ start: null, bar: null })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"title = g => g.append(\"title\").text(d => `${years[year]} - ${d.territory}\\n${d3.format(\" \")(d.values[year])}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"innerRadius = i => minRadius + (bar.width + bar.padding) * i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"outerRadius = i => innerRadius(i) + bar.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"deg = a => a * 180 / Math.PI;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = d3.csvParse(await FileAttachment(\"stars.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"maxValue = d3.max(chartData.map(d => d.values[year]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"year = options.year","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"years = data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"width = 1024","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 768","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"margin = ({top: 30, left: 0, bottom: 0, right: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"minRadius = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"maxRadius = outerRadius(numOfBars - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"bar = ({width: 20, padding: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"start = ({left: 100, right: 350, padding: 5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"numOfBars = chartData.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"