2c:null 2d:["$","title",null,{"children":"Fancy Radial Bar Chart | amatevosian's Workspace | Observable"}] 32:T7b1,drawStartLines = g => { const starts = g.selectAll(".start") .data(chartData) .join("g") .attr("opacity", 1) .attr("fill", d => color(d.index)) .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.index} ${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; }33:T5f4,drawRadialBars = (g, tspace, currentDateIndex) => { 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[currentDateIndex].values) .join("g") .attr("class", "bar") .attr("opacity", 1) .attr("fill", (d, i) => color(i)) // Color by index .call(g => g.append("path").attr("d", (d, i) => arc(d, i))) // You need to pass the data 'd' and index 'i' to the arc function .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)) - 90})`)) // Use the scale 'x' with the data 'd' .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":"fad4882003c43d6857eb9ee3499f9a40bf0999bf4432dac8bd396f78812997519620cfac230f88318df3c5add52ff8f2c7c6e34909f931c13c4aae6aaf74ac4d","href":"https://static.observableusercontent.com/files/fad4882003c43d6857eb9ee3499f9a40bf0999bf4432dac8bd396f78812997519620cfac230f88318df3c5add52ff8f2c7c6e34909f931c13c4aae6aaf74ac4d","name":"transposed_data_musicMood@1.csv","type":"text/csv","lastModified":1707675310090.435,"size":1704}] 30:{"id":"c066c114a803aa1d","slug":null,"title":"Fancy Radial Bar Chart","thumbnail":"ec12c1be4cfd7f302f77b1de8af836fba5c1b0f587287e6e095cb7ad5030978c","access_level":"public","create_time":"$D2024-02-11T18:15:10.090Z","update_time":"$D2024-02-11T19:12:55.407Z","view_time":null,"first_public_time":"$D2024-02-11T18:15:10.090Z","has_unpublished_edits":null,"fork":{"id":"a4e92c0bb45c2709","slug":null,"title":"Fancy Radial Bar Chart","owner":{"id":"dd87817855e2f67e","login":"amatevosian-ws","name":"amatevosian's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dd87817855e2f67e","login":"amatevosian-ws","name":"amatevosian's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/53040651c350a1736aaf50889467a48c17db09b127ec6a4e7f00e97871e40ae8","tier":"starter_2024"},"version":932,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8883bd79828dc0ea","login":"amatevosian","name":"amatevosian","avatar_url":"https://avatars-next.observableusercontent.com/29b1a6267e6384169966a80a73a265efdc2371b2b959446691b7fbae82dd6bbc","tier":null}],"members":[{"type":"individual","id":"8883bd79828dc0ea","login":"amatevosian","name":"amatevosian","avatar_url":"https://avatars-next.observableusercontent.com/29b1a6267e6384169966a80a73a265efdc2371b2b959446691b7fbae82dd6bbc","tier":null,"role":"editor"},{"type":"team","id":"dd87817855e2f67e","login":"amatevosian-ws","name":"amatevosian's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/53040651c350a1736aaf50889467a48c17db09b127ec6a4e7f00e97871e40ae8","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"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","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof options = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"currentDateIndex = 0\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 document.body.append(svg.node());\n \n var tspace = 0;\n svg.append(\"g\").call(g => tspace = drawStartLines(g, currentDateIndex));\nsvg.append(\"g\").call(g => drawRadialBars(g, tspace, currentDateIndex));\n\n\n svg.node().remove();\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"viewof currentDateIndex = html``;\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"parts = ({ start: null, bar: null })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":594,"value":"title = g => g.append(\"title\").text(d => `${d.index}: ${d3.format(\".2f\")(d[Date])}`)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":25,"value":"color = d3.scaleOrdinal(d3.schemeTableau10)\n .domain(chartData.map(d => d.index))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":37,"value":"outerRadius = i => innerRadius(i) + bar.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"deg = a => a * 180 / Math.PI;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"arc = d3.arc()\n .innerRadius(innerRadius(i))\n .outerRadius(outerRadius(i))\n .startAngle(0)\n .endAngle(x(data)); \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = d3.csvParse(await FileAttachment(\"transposed_data_musicMood@1.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chartData = dates.map(date => {\n return {\n date: date, //used to be year in original code\n values: data.map(feature => feature[date])\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"maxValue = d3.max(chartData, day => d3.max(day.values));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"year = options.dates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"dates = data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"width = 1024","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 768","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":28,"value":"minRadius = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"maxRadius = outerRadius(numOfBars - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"bar = ({width: 20, padding: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":555,"value":"start = ({left: 100, right: 350, padding: 5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"numOfBars = chartData.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":854,"value":"processed_data_music_mood = data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"processed_data_music_mood","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"