31:Tb24,chart = { var focus; const svg = d3.create("svg") .attr("width", diameter) .attr("viewBox", [0, 0, diameter, diameter]) //.attr("preserveAspectRatio", "xMidYMid meet") //.style("max-width", "100%") .style("cursor", "default") .style("background", options.theme === "dark" ? "#2e2e2e" : "#e0e0e0") .style("max-width", "100%") .on("click", () => focus = null); // TimeSpiral needs getBBox() yield svg.node(); const p = options.scheme === "OrRd" ? d3.interpolateOrRd : options.scheme === "YlGnBu" ? d3.interpolateYlGnBu : d3.interpolateRdPu; // Mini cartogram const mapSize = diameter / 4.2, mg = svg.append("g"); let dataset = getStatesNumber(options.field, days - 1); // midnight issue if (!dataset || dataset.length === 0) dataset = getStatesNumber(options.field, days - 2); const gmap = new GridMap(mg) .size([mapSize, mapSize]) .style({ shape: "square", sizeByValue: false, showOverlay: false, showMapLegend: false, showCellText: false }) .field({name: "state", code: "code", total: "number"}) .cellPalette(p) .mapGrid(map) .data(dataset) .onClick((e, d) => { focus = focus !== d ? d : null; if (focus) renderSpiral(d); e.stopPropagation(); }) .onMouseEnter((e, d) => { if (!focus) renderSpiral(d); }) .render(); // Move map to the center of the spiral const size = gmap.actualSize; mg.attr("transform", `translate(${(diameter-size[0])/2.2},${(diameter-size[1])/2})`); const {state, number} = renderLabels(); // Use California as the default data const ca = dataset.find(d => d.code === "CA"); if (ca) renderSpiral({state: ca.state, total: ca.number}); function renderSpiral(d) { svg.select(".spiral").remove(); const g = svg.append("g").attr("class", "spiral"); const chart = new TimeSpiral(g) .size([diameter, diameter]) .layers(+options.layers) .innerRadius(diameter / 8) .style({ align: options.align, tickColor: options.theme === "dark" ? "white" : "#666", tickSize: "9pt", showTicks: true, tickInterval: "monthly" }) .palette(p) .field({value: `new${options.field}`}) .data(data(d.state)) .render(); state.text(d.state); number.text(d3.format(",.0d")(d.total)); } function renderLabels() { const label = svg.append("g") .attr("font-size", "10pt") .attr("text-anchor", "center") .attr("fill", options.theme === "dark" ? "white" : "#666") .attr("transform", `translate(${(diameter-size[0])/2},${(diameter-size[1])/2})`); const state = label.append("text"), number = label.append("text").attr("dy", "1em"); return {state, number}; } return svg.node(); }32:T71d,md`## API Reference * **TimeSpiral(container)** - Constructs a new instance of TimeSpiral with default settings. The container can be an svg or g element. * **size([width, height])** - Sets the dimensions to specified width and height and returns this chart. * **innerRadius(radius)** - Sets the radius where the spiral starts and return this chart. * **style(style)** - Overrides the default style and return this chart. * style.**align** - specifies the alignment of bars. * center - places bars on the center of the spiral axis * base - places bars on top of the spiral axis * style.**barWidth** - specifies the width style of bars. * skinny - half width * normal - full width * style.**rounded** - specifies whether the edges of the bars are rounded. * style.**colorBy** - specifies how the colors are assigned. * value - colors are based on values * time - colors are assigned to each period * style.**tickInterval** - specifies the tick interval. * auto * monthly * style.**showTicks** - whether to show tick marks on the spiral axis. * style.**tickColor** - the color of tick marks. * style.**tickSize** - the font size of tick marks. * style.**titleFormat** - the number format of tooltip. * style.**reverseColor** - sepcifies whether the color is reversed * **palette(palette)** - Sets the color palette of bars to a continuous interpolator *(color by value)* or a categorical scheme *(color by time)* and returns this chart. Default is d3.interpolateYlGnBu. * **field(field)** - Sets the field names for reading chart data and returns this chart. * field.**date** - the field name of date. * field.**value** - the field name of value. * **data(data)** - sets the data and returns this chart. * **render()** - Renders the chart and returns this instance.`33:T2622,// https://github.com/analyzer2004/timespiral // Copyright 2020 Eric Lo class TimeSpiral { constructor(container) { this._container = container; this._g = null; this._width = 800; this._height = 600; this._innerRadius = 50; this._maxRadius = 0; this._layers = 5; this._precision = 32; this._layerHeight = 0; this._charBox = null; this._style = { align: "base", barWidth: "skinny", rounded: true, colorBy: "value", tickInterval: "monthly", showTicks: true, tickColor: "#999", tickSize: "8pt", titleFormat: ",.0d", reverseColor: false }; this._centered = true; this._skinny = true; this._palette = d3.interpolateYlGnBu; this._data = null; this._min = 0; this._max = 0; this._firstDay = null; this._lastDay = null; this._chartData = null; this._field = { date: "date", value: "value" }; this._time = null; this._size = null; this._color = null; this._spiral = null; this._offsets = null; this._spiralLength = 0; this._barWidth = 0; this._bars = null; this._ticks = null; } size(_) { return arguments.length ? (this._width = _[0], this._height = _[1], this) : [this._width, this._height]; } innerRadius(_) { return arguments.length ? (this._innerRadius = _, this) : this._innerRadius; } layers(_) { return arguments.length ? (this._layers = _, this) : this._layers; } style(_) { return arguments.length ? (this._style = Object.assign(this._style, _), this) : this._style; } palette(_) { return arguments.length ? (this._palette = _, this) : this._palette; } field(_) { return arguments.length ? (this._field = Object.assign(this._field, _), this) : this._field; } data(_) { return arguments.length ? (this._data = _, this) : this._field; } render() { this._init(); this._renderSpiral(); this._process(); this._initScales(); this._calculateBars(); this._renderBars(); if (this._style.showTicks) this._renderAxis(); } _init() { this._getCharBox(); var max = (this._width < this._height ? this._width : this._height) / 2; this._layerHeight = (max - this._innerRadius) / (this._layers + 1) - this._charBox.height; this._maxRadius = max - this._layerHeight; this._centered = this._style.align === "center"; this._skinny = this._style.barWidth === "skinny"; } _getCharBox() { var text; try { text = this._container.append("text") .attr("font-size", this._style.tickSize) .text("M"); this._charBox = text.node().getBBox(); } finally { if (text) text.remove(); } } _process() { const ext = d3.extent(this._data.map(d => d[this._field.value])); this._min = ext[0]; this._max = ext[1]; this._firstDay = this._data[0][this._field.date]; this._lastDay = this._data[this._data.length - 1][this._field.date]; this._spiralLength = this._spiral.node().getTotalLength(); this._barWidth = this._spiralLength / this._data.length / (this._skinny ? 2 : 1); } _calculateBars() { const bars = this._data.map(d => { const date = d[this._field.date], value = d[this._field.value], size = this._size(value), t = this._time(date), p1 = this._spiral.node().getPointAtLength(t), p2 = this._spiral.node().getPointAtLength(t - this._barWidth); return { date: date, day: date.getDate(), value: value, t: t, x: p1.x, y: this._centered ? p1.y - size / 2 : p1.y, y0: p1.y, yr: p1.y, // rotate y offset: 0, // tick text offset size: size, angle: Math.atan2(p2.y, p2.x) * 180 / Math.PI - 90 }; }); this._offsets = []; if (this._centered) { bars.forEach((d, i) => { if (d.day === 1) { const sample = []; for (let j = i; j < i + 5 && j < bars.length; j++) { sample.push(bars[j].size); } this._offsets.push({ t: d.t, height: d3.max(sample) }) } }); } this._bars = bars; } _initScales() { this._initColors(); this._time = d3.scaleTime() .domain([this._firstDay, this._lastDay]) .range([0, this._spiralLength]); this._size = d3.scaleLinear() .domain([this._min, this._max]).nice() .range([5, this._layerHeight]); } _initColors() { const style = this._style; if (style.colorBy === "time") { const months = d3.timeMonth .every(1) .range(this._firstDay, this._lastDay); this._color = d3.scaleOrdinal() .domain(months.map(d => d.getFullYear() + "." + d.getMonth())) .range(this._palette); } else { this._color = d3 .scaleSequential(this._palette) .domain(style.reverseColor ? [this._max, this._min] : [this._min, this._max]); } } _renderSpiral() { this._g = this._container.append("g") .attr("transform", `translate(${this._width / 2},${this._height / 2})`); this._spiral = this._g.append("path") .attr("id", "axis") .attr("fill", "none") .attr("stroke", "none") .attr("stroke-width", 0.5) .attr("d", this._axisSpiral(this._precision * 2 * this._layers + 1)); } _axisSpiral(length) { return d3.lineRadial() .angle((d, i) => Math.PI / this._precision * i) .radius((d, i) => i * (this._maxRadius - this._innerRadius) / length + this._innerRadius)({ length }); } _renderBars() { const w = this._barWidth, hw = w / 2; var color; if (this._style.colorBy === "value") color = d => this._color(d.value); else color = d => { const key = d.date.getFullYear() + "." + d.date.getMonth(); return this._color(key); }; const bars = this._g.selectAll(".bar") .data(this._bars) .join("rect") .attr("class", "bar") .attr("fill", color) .attr("opacity", 1) .attr("x", d => d.x).attr("y", d => d.y) .attr("width", w).attr("height", d => d.size) .attr("transform", d => `rotate(${d.angle},${d.x},${d.yr})`) .on("mouseover", (e, d) => { bars.transition().duration(250).attr("opacity", _ => _ === d ? 1 : 0.5); }) .on("mouseout", (e, d) => { bars.transition().duration(250).attr("opacity", 1); }); if (this._style.rounded) bars.attr("rx", hw).attr("ry", hw); bars.append("title") .text(d => { const date = `${d.date.getFullYear()}-${d.date.getMonth() + 1}-${d.date.getDate()}`; const value = d3.format(this._style.titleFormat)(d.value); return `${date}\n${value}`; }); } _renderAxis() { const style = this._style, w = this._barWidth, hw = w / 2, wh = w + hw, offset = this._skinny ? wh : hw; var ticks; if (style.tickInterval === "monthly") ticks = d3.timeMonth.every(1).range(this._firstDay, this._lastDay); else ticks = this._time.ticks(); const data = ticks.map(d => { const t = this._time(d); const bar = this._bars.find(_ => _.t === t); if (bar && this._centered) { const offset = this._offsets.find(_ => _.t === t); bar.offset = (offset ? offset.height : this._layerHeight) / 2 + w; } return bar; }).filter(d => d); const lineOffset = this._centered ? 0 : this._charBox.height; this._ticks = this._g.selectAll(".tick") .data(data) .join("g") .attr("class", "tick") .attr("fill", style.tickColor) .attr("font-size", style.tickSize) .call(g => g.append("line") .attr("stroke", style.tickColor) .attr("stroke-width", 1) .attr("stroke-dasharray", "1,1") .attr("x1", d => d.x + offset).attr("y1", d => d.y0 + hw) .attr("x2", d => d.x + offset).attr("y2", d => d.y0 - d.offset - lineOffset) .attr("transform", d => `rotate(${d.angle},${d.x},${d.y0})`)); this._ticks .append("text") .attr("dy", this._centered ? w : "1em") .attr("x", d => d.x - offset + 3).attr("y", d => d.y0 + d.offset) .attr("transform", d => `rotate(${d.angle + 180},${d.x},${d.y0})`) .text(d => `${d.date.getFullYear()}-${d.date.getMonth() + 1}`); } }34:T52e,map = [[0, 0, ""], [1, 0, ""], [2, 0, ""], [3, 0, ""], [4, 0, ""], [5, 0, ""], [6, 0, ""], [7, 0, ""], [8, 0, ""], [9, 0, ""], [10, 0, ""], [11, 0, "ME"], [0, 1, "AK"], [1, 1, ""], [2, 1, ""], [3, 1, ""], [4, 1, ""], [5, 1, ""], [6, 1, "WI"], [7, 1, ""], [8, 1, ""], [9, 1, ""], [10, 1, "VT"], [11, 1, "NH"], [0, 2, ""], [1, 2, "WA"], [2, 2, "ID"], [3, 2, "MT"], [4, 2, "ND"], [5, 2, "MN"], [6, 2, "IL"], [7, 2, "MI"], [8, 2, ""], [9, 2, "NY"], [10, 2, "MA"], [11, 2, ""], [0, 3, ""], [1, 3, "OR"], [2, 3, "NV"], [3, 3, "WY"], [4, 3, "SD"], [5, 3, "IA"], [6, 3, "IN"], [7, 3, "OH"], [8, 3, "PA"], [9, 3, "NJ"], [10, 3, "CT"], [11, 3, "RI"], [0, 4, ""], [1, 4, "CA"], [2, 4, "UT"], [3, 4, "CO"], [4, 4, "NE"], [5, 4, "MO"], [6, 4, "KY"], [7, 4, "WV"], [8, 4, "VA"], [9, 4, "MD"], [10, 4, "DE"], [11, 4, ""], [0, 5, ""], [1, 5, ""], [2, 5, "AZ"], [3, 5, "NM"], [4, 5, "KS"], [5, 5, "AR"], [6, 5, "TN"], [7, 5, "NC"], [8, 5, "SC"], [9, 5, "DC"], [10, 5, ""], [11, 5, ""], [0, 6, "HI"], [1, 6, ""], [2, 6, ""], [3, 6, ""], [4, 6, "OK"], [5, 6, "LA"], [6, 6, "MS"], [7, 6, "AL"], [8, 6, "GA"], [9, 6, ""], [10, 6, ""], [11, 6, ""], [0, 7, ""], [1, 7, ""], [2, 7, ""], [3, 7, ""], [4, 7, "TX"], [5, 7, ""], [6, 7, ""], [7, 7, ""], [8, 7, ""], [9, 7, "FL"], [10, 7, ""], [11, 7, ""]].map(d => ({ col: d[0], row: d[1], code: d[2] }));35:[{"id":"d783742550ecd18cceedc18ffdb452bb2906838ab8ac27a591023943ca5f962216b6990519611fcdc888d5a9ed0a6ca3ed7ead3dc37070d2b89cd4652cd6520b","href":"https://static.observableusercontent.com/files/d783742550ecd18cceedc18ffdb452bb2906838ab8ac27a591023943ca5f962216b6990519611fcdc888d5a9ed0a6ca3ed7ead3dc37070d2b89cd4652cd6520b","name":"threeyrs.csv","type":"text/csv","lastModified":1628972770040.385,"size":20951}] 2f:{"title":"Time Spiral with a COVID Demo","cells":[{"id":0,"value":"md`# Time Spiral with a COVID Demo\n\nSpiral chart visualizes time-based dataset alone an outward spiral. It is beneficial for displaying a large dataset over a long period in a single visualization. Color can be based on values to emphasize the chart's visual aspect or assigned to each period, which helps as a way of observing periodic patterns.\n\nBelow is an application of the **TimeSpiral** in a real use case scenario combined with the **GridMap**. The **TimeSpiral** plots the cases/deaths number from day one as you hover over each state.\n\n** See the second and third demo for the simplifed sample code.*\n\n*** The number of Massachusetts is somehow incorrect, the total cases dropped from 128,888 to 121,131 on 9/2.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof options = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`Colors are assigned to each month by default in this example, which breaks the spiral up and makes the chart ideal for observing the periodic patterns.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"viewof options2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", diameter)\n .attr(\"viewBox\", [0, 0, diameter, diameter])\n .style(\"max-width\", \"100%\")\n .style(\"cursor\", \"default\");\n \n // TimeSpiral needs getBBox()\n yield svg.node();\n \n const chart = new TimeSpiral(svg)\n .size([diameter, diameter]) \n .style({\n align: options2.align,\n barWidth: options2.barwidth,\n rounded: options2.rounded,\n colorBy: options2.colorby,\n showTicks: options2.showTicks,\n tickInterval: \"monthly\"\n })\n .layers(+options2.layers)\n .palette(options2.colorby === \"time\" ? d3.schemeTableau10 : d3.interpolateBuPu)\n .field({value: `new${options.field}`})\n .data(data(\"New York\"))\n .render();\n \n return svg.node();\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"md`It is also ideal for visualizing weather dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"viewof options3 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"chart3 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", diameter)\n .attr(\"viewBox\", [0, 0, diameter, diameter])\n .style(\"max-width\", \"100%\")\n .style(\"cursor\", \"default\");\n \n // TimeSpiral needs getBBox()\n yield svg.node();\n \n const data = weather[options3.city].map(d => ({\n date: new Date(d[\"Date time\"]),\n temp: +d[\"Temperature\"]\n }));\n \n const chart = new TimeSpiral(svg)\n .size([diameter, diameter])\n .layers(3) \n .style({\n align: options3.align,\n reverseColor: true // reverse d3.interpolateRdYlBu\n }) \n .palette(d3.interpolateRdYlBu)\n .field({value:\"temp\"})\n .data(data)\n .render();\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"md`This example visualizes a three and half years dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"chart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", diameter)\n .attr(\"viewBox\", [0, 0, diameter, diameter])\n .style(\"max-width\", \"100%\")\n .style(\"cursor\", \"default\");\n \n // TimeSpiral needs getBBox()\n yield svg.node();\n \n const chart = new TimeSpiral(svg)\n .size([diameter, diameter])\n .layers(4) \n .style({\n align: \"base\",\n colorBy: \"time\",\n tickInterval: \"auto\",\n titleFormat: \"$,.2f\"\n }) \n .palette(d3.schemePaired)\n .field({value:\"value\"})\n .data(sample)\n .render();\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`### Source Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"data = (state) => {\n const filtered = src.filter(d => d.state === state); \n for (let i = filtered.length - 1; i >= 1; i--) {\n const c = filtered[i], p = filtered[i - 1];\n c.newcases = c.cases - p.cases;\n c.newdeaths = c.deaths - p.deaths;\n }\n filtered[0].newcases = 0; \n filtered[0].newdeaths = 0;\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"sample = d3.csvParse(await FileAttachment(\"threeyrs.csv\").text()).map(d => ({date: new Date(d.date), value: +d.value}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"diameter = Math.min(screen.width, screen.height) * 0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {GridMap} from \"@analyzer2004/gridcartogram\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {src, days, getStatesNumber} from \"@analyzer2004/covid-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"import {weather} from \"@analyzer2004/west-coast-weather-from-seattle-to-san-diego\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"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"}],"files":"$W35","stdlib":"1","titling":"auto"}