31:Tae2,chart = { const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); getDefsForSVG(svg); // background color svg.append("rect") .attr("transform", `translate(-${width/2}, -${height/2})`) .attr("width", width) .attr("height", height) //.style("fill", "url(#my-gradient)") .style("fill", (input3.theme === "dark") ? "black" : "white"); svg.append("text") .attr("class", "title") .attr("transform", `translate(0, ${ margin - height / 2 })`) .attr("dy", "1em") .style("fill", (input3.theme === "dark") ? "var(--font-color-dark-theme)" :"var(--font-color-light-theme)") .text(title); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("path") .attr("class", "line") .attr("fill", "none") .style("filter", (input3.theme === "dark") ? "url(" + window.location + "#glow)" : "") .style("stroke", "url(" + window.location + "#my-gradient)") .style("stroke-width", input3.lineWidth) .attr("d", line .radius(d => y(d[valueColumn])) (data)); /* svg.append("path") .attr("fill", "steelblue") .style("fill", "url(#my-gradient)") .attr("fill-opacity", 0.7) .attr("d", area .innerRadius(d => y(d.min)) .outerRadius(d => y(d.max)) (data)); */ svg.append("g") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .call(g => g.selectAll("g") .data(y.ticks().reverse()) .join("g") .call(yLabels)); const tooltip = svg.append("g") .attr("class", "tooltip"); tooltip.append("circle") .attr("class", "tooltip-circle") .attr("x", 800) .attr("y", 800) .style("filter", (input3.theme === "dark") ? "url(" + window.location + "#glow)" : "") .attr("r", 4) svg.on("touchmove mousemove", function(event) { // const {date, value} = bisect(d3.pointer(event, this)); const date = bisect(d3.pointer(event, this)).date; const value = bisect(d3.pointer(event, this))[valueColumn]; const rad = x(date); const xTrans = y(value) * Math.cos(rad); const yTrans = y(value) * Math.sin(rad); tooltip .attr("transform", `rotate(-90) translate(${xTrans},${yTrans}) rotate(90)`) .call(callout, `${formatValue(value)} ${formatDate(date)}`); tooltip.select(".tooltip-circle") .attr("x", xTrans) .attr("y", yTrans) // .style("stroke", (input3.theme === "dark") ? "var(--font-color-dark-theme)" :"var(--font-color-light-theme)"); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }32:T4c0,callout = (g, value) => { if (!value) return g.style("display", "none"); g.style("display", null) .style("pointer-events", "none") .style("font", "10px sans-serif"); const path = g.selectAll("path") .data([null]) .join("path") .style("fill", (input3.theme === "dark") ? "#222": "#DDD") .style("opacity", 0.9) .style("stroke", (input3.theme === "dark") ? "var(--font-color-dark-theme)" :"var(--font-color-light-theme)"); const text = g.selectAll("text") .data([null]) .join("text") .attr("class", "tooltip-text") .style("fill", (input3.theme === "dark") ? "var(--font-color-dark-theme)" :"var(--font-color-light-theme)") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("class", "tooltip") .attr("x", 0) .attr("y", (d, i) => `${i * 1.1}em`) .style("font-weight", (_, i) => i ? null : "bold") .text((d,i) => (i === 0) ? d + valueUnit : d)); const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); }33:T574,xAxis = g => g .attr("font-family", "sans-serif") .attr("font-size", 10) .call(g => g.selectAll("g") .data(x.ticks()) .join("g") .each((d, i) => d.id = DOM.uid("month")) .call(g => g.append("path") .attr("stroke", (input3.theme === "light") ? "var(--font-color-light-theme)" : input3.coloredAxes ? "url(" + window.location + "#my-gradient)" : '#333') .attr("stroke-opacity", (input3.theme === "dark") ? 0.7 : 0.2) .attr("d", d => ` M${d3.pointRadial(x(d), input2.innerRadius)} L${d3.pointRadial(x(d), input2.outerRadius)} `)) .call(g => g .append("path") .attr("id", d => d.id.id) .datum(d => [d, d3.utcMonth.offset(d, 1)]) .attr("fill", "none") .attr("d", (d, i) => i > 2 && i < 9 ? getFlippedArc(d,i) : getArc(d,i))) .call(g => g.append("text") .attr("class", "x-label") .attr("dy", (d, i) => i > 2 && i < 9 ? ".65em" : 0) .style("fill", (input3.theme === "dark") ? "var(--font-color-dark-theme)" :"var(--font-color-light-theme)") .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", d => d.id.href) .text((d,i) => months[i])) .call(xTicks) )34:T5b9,function getDefsForSVG(svg){ const defs = svg.append("defs"); // 1) radial gradient const rg = defs .append("radialGradient") .attr("gradientUnits", "userSpaceOnUse") .attr("id", "my-gradient") .attr("cx", 0) .attr("cy", 0) .attr("fr", input.innerRadius) .attr("r", input.outerRadius); rg.append("stop") .attr("offset", input.offset1) .attr("stop-color", input.color1); rg.append("stop") .attr("offset", input.offset2) .attr("stop-color", input.color2); rg.append("stop") .attr("offset", input.offset3) .attr("stop-color", input.color3); // 2) #glow filter const filter1 = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("x", -width/ 2) .attr("y", -height/2) .attr("id","glow"); // glow filter as proposed by Nadieh Bremer filter1.append("feGaussianBlur") .attr("class", "blur") .attr("stdDeviation","14.5") .attr("result","coloredBlur"); const feMerge = filter1.append("feMerge"); feMerge.append("feMergeNode") .attr("in","coloredBlur"); feMerge.append("feMergeNode") .attr("in","SourceGraphic"); // 3) #glow2 simple alternative glow filter const filter2 = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("x", -width/ 2) .attr("y", -height/2) .attr("id","glow2"); filter2.append("feGaussianBlur") .attr("class", "blur") .attr("stdDeviation","4.5"); return svg; }35:[{"id":"3d5bf947197b197e4d16880d261d141e3e7920df21dfece9aae543ac2628b787db1b84d0b1dbd55fd49a6d740c8375fe14f5d8934732bff6f5e0b99c488073b1","href":"https://static.observableusercontent.com/files/3d5bf947197b197e4d16880d261d141e3e7920df21dfece9aae543ac2628b787db1b84d0b1dbd55fd49a6d740c8375fe14f5d8934732bff6f5e0b99c488073b1","name":"sfo-temperature.csv","type":"application/octet-stream","lastModified":1602374957782.213,"size":140446}] 2f:{"title":"☀️Make your own Radial Line Chart","cells":[{"id":1,"value":"md`# ☀️Make your own Radial Line Chart `","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"md`### Step 1: Load local file for this session (will not be stored)\n
\nThe format of the csv file has to be delimited with a comma and contain the columns date and value. \n- The date has to be formatted as YYYY-MM-DD\n- The name of the second column will be used as the value unit (_customers_ in the example below)\n\nE.g.:\n\ndate,customers
\n1999-01-20,8
\n1999-01-21,5
\n...\n\nThe default data is from the [National Climatic Data Center](https://www.ncdc.noaa.gov/cdo-web/datatools/findstation).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"viewof file = fileInput({\n initialValue: FileAttachment(\"sfo-temperature.csv\").blob(),\n accept: \".csv\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"md`### Step 2: Choose a descriptive title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"title = \"Daily temperature at San Francisco International Airport\" // update your title here","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"md`### Step 3: Configure your visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"viewof input3 = inputsGroup(\n [\n [\n select({ title: \"theme\", options: [\"dark\", \"light\"], value: \"dark\", }),\n slider({ min: 1, max: 10, step: 0.5, value: 3.5, title: \"line width\", }),\n checkbox({ title: \"axes\", options: [{ value: \"colored\", label: \"colored/ not colored\" }], value: \"colored\"})\n ],\n ], \n [\n ['theme', 'lineWidth', 'coloredAxes'], \n ]\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"viewof input = inputsGroup(\n [\n [\n color({ value: \"#263f9c\", title: \"stop color 1\",}),\n color({ value: \"#bbff00\", title: \"stop color 2\",}),\n color({ value: \"#ff0011\", title: \"stop color 3\",}),\n ],\n [\n slider({ min: 0, max: 1, step: 0.01, value: 0.33, format: \".0%\", title: \"offset 1\", }),\n slider({ min: 0, max: 1, step: 0.01, value: 0.60, format: \".0%\", title: \"offset 2\", }),\n slider({ min: 0, max: 1, step: 0.01, value: 0.70, format: \".0%\", title: \"offset 3\", }),\n ],\n ], \n [\n ['color1','color2','color3'],\n ['offset1','offset2','offset3'],\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"viewof input2 = inputsGroup(\n [\n [\n slider({ min: 0, max: width / 2 - margin - 100, step: 1, value: width / 9, title: \"radius of y min\", }),\n slider({ min: 0, max: width / 2 - margin - 100, step: 1, value: width / 2 - margin - 100, title: \"radius of y max\",}),\n ],\n [\n slider({ min: min < 0 ? min : 0, max: max, step: 1, value: min, title: \"y min\", }),\n slider({ min: min < 0 ? min : 0, max: Math.ceil(max/10)*10, step: 1, value: max, title: \"y max\", }),\n ],\n [\n select({ title: \"y axis scale\", options: [\"Linear\", \"Pow\", \"Sqrt\", \"Log\", \"Radial\"], value: \"Linear\", }),\n select({ title: \"y axis labels\", options: [\"top\", \"bottom\", \"both\", \"none\"], value: \"bottom\", }), \n slider({ min: 0, max: 31, step: 1, value: 2, title: \"every x-th tick shown\", }),\n ],\n ], \n [\n ['innerRadius','outerRadius',],\n ['yMin', 'yMax'],\n ['scale', 'yLabels', 'xTicksSpread',], \n ]\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1604,"value":"md`
\n### Additional configurations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1812,"value":"locale = \"en\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1649,"value":"function formatDate(date) {\n return date.toLocaleString(locale, {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1646,"value":"function formatValue(value) {\n return value.toLocaleString(locale, \n // add optional formatting options here, see\n // https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString\n // e.g.: { style: \"currency\", currency: \"USD\" } \n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1934,"value":"md` ### Why using a radial data visualization in first place?
what are the advantages/ drawbacks? \n\nSee 👉 https://observablehq.com/@observablehq/why-use-a-radial-data-visualization 😍`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"md`## Acknowledgements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"md`\nAs always, this would not be possible without some of the amazing stuff which people put out there!\n\n🙏 [Mike Bostock](https://observablehq.com/@mbostock) for the [radial area chart](https://observablehq.com/@d3/radial-area-chart), [file input](https://observablehq.com/@mbostock/file-input-with-initial-value) and the [tooltip](https://observablehq.com/@d3/line-chart-with-tooltip)
\n🙏 [David Bumbeishvili](https://observablehq.com/@bumbeishvili) for the [inputs groups](https://observablehq.com/@bumbeishvili/input-groups)
\n🙏 [Nadieh Bremer](https://observablehq.com/@nbremer) for the [placing text on arcs](https://www.visualcinnamon.com/2015/09/placing-text-on-arcs), [her reference and explanation](https://www.visualcinnamon.com/2016/06/glow-filter-d3-visualization) of [Drew Noakes' glow effect solution](https://stackoverflow.com/questions/9630008/how-can-i-create-a-glow-around-a-rectangle-with-svg)` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"md`#### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return xy => {\n const date = x.invert(Math.PI - Math.atan2(xy[0],xy[1]));\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1624,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"yAxis = g => g\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .call(g => g.selectAll(\"g\")\n .data(y.ticks().reverse())\n .join(\"g\")\n .attr(\"class\", \"y-axis\")\n .attr(\"fill\", \"none\")\n .call(g => g.append(\"circle\")\n .attr(\"stroke-opacity\", (input3.theme === \"dark\") ? 0.7 : 0.2)\n .attr(\"stroke\", (input3.theme === \"light\") ? \n \"var(--font-color-light-theme)\" \n : input3.coloredAxes ? \"url(\" + window.location + \"#my-gradient)\" : '#333')\n .attr(\"r\", y)) \n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"yLabels = g => g.append(\"text\")\n .attr(\"y\", d => -y(d))\n .attr(\"dy\", \"0.35em\")\n .attr(\"stroke\", (input3.theme === \"dark\") ? \"#000\" : \"#fff\")\n .style(\"stroke-width\", 5)\n .style(\"opacity\", (input2.yLabels === \"both\" || input2.yLabels === \"top\") ? 1 : 0)\n .text((x, i) => `${formatValue(x.toFixed(0))}${i ? \"\" : valueUnit}`)\n .clone(true)\n .attr(\"y\", d => y(d))\n .style(\"opacity\", (input2.yLabels === \"both\" || input2.yLabels === \"bottom\") ? 1 : 0)\n .selectAll(function() { return [this, this.previousSibling]; })\n .clone(true)\n .attr(\"fill\", (input3.theme === \"dark\") ? \"lightgrey\" : \"currentColor\")\n .attr(\"stroke\", \"none\")\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"xTicks = g => g.selectAll(\".group-tick\")\n .data(d => groupTicks(d, input2.xTicksSpread)) // Controls the number of ticks: one tick each xTicksSpread\n .join(\"g\")\n .attr(\"transform\", d => \"rotate(\" + (d.angle * 180 / Math.PI - 90) + \") translate(\" + radius + \",0)\") \n .call(g => g.append(\"line\") // ticks\n .style(\"stroke\", (input3.theme === \"dark\") ? \"var(--font-color-dark-theme)\" :\"var(--font-color-light-theme)\")\n .attr(\"x2\", 6))\n .call(g => g.append(\"text\") // ticks labels\n .attr(\"class\", \"x-tick\")\n .attr(\"transform\", d => d.month < 6 ? \"translate(8,0)\" : \"rotate(180)translate(-8,0)\")\n .style(\"text-anchor\", d => d.month < 6 ? \"start\" : \"end\")\n .style(\"fill\", (input3.theme === \"dark\") ? \"var(--font-color-dark-theme)\" :\"var(--font-color-light-theme)\")\n .attr(\"dy\", \"0.35em\")\n .text(d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"function groupTicks(d, step) {\n const lastDay = Date.UTC(year, d.getUTCMonth() + 1, 0);\n const numberDays = new Date(lastDay).getDate();\n const endAngle = x(lastDay);\n const startAngle = x(d);\n const k = (endAngle - startAngle) / (numberDays - 1);\n return d3.range(1, numberDays + 1, step).map(function(value) {\n return {value: value, angle: (value - 1) * k + startAngle, month: d.getUTCMonth()};\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"getArc = ([a, b]) => {\n const radiusL = radius + 30; \n return `\n M${d3.pointRadial(x(a), radiusL)}\n A${radiusL},${radiusL} 0,0,1 ${d3.pointRadial(x(b), radiusL)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"getFlippedArc = ([a, b]) => {\n const radiusL = radius + 30; \n return `\n M${d3.pointRadial(x(b), radiusL)}\n A${radiusL},${radiusL} 0,0,0 ${d3.pointRadial(x(a), radiusL)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"x = d3.scaleUtc()\n .domain([Date.UTC(year, 0, 1), Date.UTC(year + 1, 0, 1) - 1])\n .range([0, 2 * Math.PI])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"y = input2.scale === \"Linear\" ? d3.scaleLinear()\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) : \n input2.scale === \"Log\" ? d3.scaleLog()\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) :\n input2.scale === \"Pow\" ? d3.scalePow().exponent(2)\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) :\n input2.scale === \"Sqrt\" ? d3.scalePow().exponent(0.5)\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) :\n input2.scale === \"Radial\" ? d3.scaleRadial()\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) : 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"line = d3.lineRadial()\n .curve(d3.curveLinearClosed)\n .angle(d => x(d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"area = d3.areaRadial()\n .curve(d3.curveLinearClosed)\n .angle(d => x(d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"md`#### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"valueColumn = defaultData ? \"value\" : Object.keys(data[0])[1]//data.columns[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"valueUnit = \" \" + (defaultData ? \"°F\" : Object.keys(data[0])[1]); // choose your value unit which will be shown for the outmost tick","pinned":false,"hidden":false,"mode":"ojs"},{"id":1898,"value":"months = {\n const format = new Intl.DateTimeFormat(locale, { month: 'long' })\n let months = []\n for (let month = 0; month < 12; month++) {\n const testDate = new Date(Date.UTC(2000, month, 1, 0, 0, 0));\n months.push(format.format(testDate))\n }\n return months;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"margin = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"min = d3.min(data, d => d[valueColumn])","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"max = d3.max(data, d => d[valueColumn])","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"year = +d3.timeFormat(\"%Y\")(data[0].date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"radius = Math.max(input2.outerRadius, input2.innerRadius)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"md`#### Data processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"data = !defaultData ? rawdata : \n Array.from(d3.rollup(\n rawdata, \n v => ({\n date: new Date(Date.UTC(2000, v[0].DATE.getUTCMonth(), v[0].DATE.getUTCDate())),\n savg: d3.mean(v, d => d.TAVG || NaN),\n value: d3.mean(v, d => d.TAVG || NaN),\n min: d3.mean(v, d => d.TMIN || NaN),\n max: d3.mean(v, d => d.TMAX || NaN),\n minmin: d3.min(v, d => d.TMIN || NaN),\n maxmax: d3.max(v, d => d.TMAX || NaN)\n }), \n d => `${d.DATE.getUTCMonth()}-${d.DATE.getUTCDate()}`\n).values())\n .sort((a, b) => d3.ascending(a.date, b.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"rawdata = d3.csvParse(await Files.text(file), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"defaultData = (rawdata[0].TAVG === 49) // hack to check if new data is loaded","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"md`#### Libraries and imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"import { radio, select, slider, color, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"import {fileInput} from \"@mbostock/file-input-with-initial-value\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}