3e:null 3f:["$","title",null,{"children":"Time Spiral Concepts | Julia | Observable"}] 45:Tb89,// 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") // .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 dataset = getStatesNumber(options.field, days - 1), // mapSize = diameter / 4.2, mg = svg.append("g"); // 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(); // } console.log('hit')46:T71d,md`## API Reference * **TimeSpiral(container)** - Constructs a new instance of TimeSpiral with default settings. The container can be an svg or g ekement. * **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.`47: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}`); } }48: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] }));49:[{"id":"d783742550ecd18cceedc18ffdb452bb2906838ab8ac27a591023943ca5f962216b6990519611fcdc888d5a9ed0a6ca3ed7ead3dc37070d2b89cd4652cd6520b","href":"https://static.observableusercontent.com/files/d783742550ecd18cceedc18ffdb452bb2906838ab8ac27a591023943ca5f962216b6990519611fcdc888d5a9ed0a6ca3ed7ead3dc37070d2b89cd4652cd6520b","name":"threeyrs.csv","type":"text/csv","lastModified":1680764028212.822,"size":20951},{"id":"a037f9f94eb6718e826d113e735244315b2cb821174ea8f7fa1f6cc9d7145935032f4c8ce73e8a8e7d572bbdf3393bda8fea2123ba9398b7df6868ca0c01f856","href":"https://static.observableusercontent.com/files/a037f9f94eb6718e826d113e735244315b2cb821174ea8f7fa1f6cc9d7145935032f4c8ce73e8a8e7d572bbdf3393bda8fea2123ba9398b7df6868ca0c01f856","name":"region_grouped3@1.csv","type":"text/csv","lastModified":1680764695096.573,"size":15879},{"id":"67067de2b453a103c5fb5d45a09ae0c2878d0525d19be0709c6910f8d342bc0cc4ad05df13dd2e9c11f1321f9166830216c72e825f8620ea01036969f2ac7fcb","href":"https://static.observableusercontent.com/files/67067de2b453a103c5fb5d45a09ae0c2878d0525d19be0709c6910f8d342bc0cc4ad05df13dd2e9c11f1321f9166830216c72e825f8620ea01036969f2ac7fcb","name":"S@1.Korea.csv","type":"text/csv","lastModified":1680765498213.932,"size":2531},{"id":"8e6699d920122e052351b8d682c8c5fbfc22301b150e77d9912619822a69f4a777764d6cbacac0e39195953c262a4bf0cd57b0fd2ac966b50bc495a27c094d6b","href":"https://static.observableusercontent.com/files/8e6699d920122e052351b8d682c8c5fbfc22301b150e77d9912619822a69f4a777764d6cbacac0e39195953c262a4bf0cd57b0fd2ac966b50bc495a27c094d6b","name":"Singapore@1.csv","type":"text/csv","lastModified":1680765498203.152,"size":2649},{"id":"069c87200200ce3a7380866aba34005bbd3d3b2acfd461c7caee91d5ae8d6e3623e1dda4648cc07785190b34674c9dd58c45b3d9624be6c5d9bf5799a4dec7ca","href":"https://static.observableusercontent.com/files/069c87200200ce3a7380866aba34005bbd3d3b2acfd461c7caee91d5ae8d6e3623e1dda4648cc07785190b34674c9dd58c45b3d9624be6c5d9bf5799a4dec7ca","name":"US@1.csv","type":"text/csv","lastModified":1680765498203.986,"size":2131},{"id":"619ed6167b362cb15982e8c8a556d02be21347b1ae31ec1a98bd12bf5bf9ac0b34c4f375bc207098626916b5c1dcda32277470594891ec70aec74193678eba64","href":"https://static.observableusercontent.com/files/619ed6167b362cb15982e8c8a556d02be21347b1ae31ec1a98bd12bf5bf9ac0b34c4f375bc207098626916b5c1dcda32277470594891ec70aec74193678eba64","name":"other@1.csv","type":"text/csv","lastModified":1680765498202.237,"size":2407},{"id":"aa5656579038ed5a171980fc43af914e5ad1d638cbdbf5d36305cf345e85237a4495d27e6e3abf797066309c6db6fc0a2218a93ac0a6fc7b9d4f1defe38cf005","href":"https://static.observableusercontent.com/files/aa5656579038ed5a171980fc43af914e5ad1d638cbdbf5d36305cf345e85237a4495d27e6e3abf797066309c6db6fc0a2218a93ac0a6fc7b9d4f1defe38cf005","name":"China@1.csv","type":"text/csv","lastModified":1680765498202.528,"size":2411},{"id":"8bc9daeefce81d5a0fafd272363ca97852ad45c0db01503f50d3e043339bee7c8e9e43b91e4d4f43a3f9a0656bbd4b43e3c31e123070cbe5a3adecda234d810b","href":"https://static.observableusercontent.com/files/8bc9daeefce81d5a0fafd272363ca97852ad45c0db01503f50d3e043339bee7c8e9e43b91e4d4f43a3f9a0656bbd4b43e3c31e123070cbe5a3adecda234d810b","name":"EU@1.csv","type":"text/csv","lastModified":1680765498206.81,"size":2223},{"id":"c55d9f3aebb7833dbf75743da54b4328f483d90a124c3759a7971bad49d58025828355fd1a7a497d109667638db3dee650908a932ed454e37729dc31a8fa9041","href":"https://static.observableusercontent.com/files/c55d9f3aebb7833dbf75743da54b4328f483d90a124c3759a7971bad49d58025828355fd1a7a497d109667638db3dee650908a932ed454e37729dc31a8fa9041","name":"Turkey@1.csv","type":"text/csv","lastModified":1680765498210.048,"size":2472},{"id":"b24e696779264f925e71c2e505d5b10b3c03d61a6ae159a4392a12fdb1fa6a53947807ef692c9b812360bd309b9d13df838d331fe3d78a48cd822b2c360fa1d2","href":"https://static.observableusercontent.com/files/b24e696779264f925e71c2e505d5b10b3c03d61a6ae159a4392a12fdb1fa6a53947807ef692c9b812360bd309b9d13df838d331fe3d78a48cd822b2c360fa1d2","name":"Unknown@1.csv","type":"text/csv","lastModified":1680765498207.022,"size":2542}] 43:{"id":"c576b77ac74ac010","slug":null,"title":"Time Spiral Concepts","thumbnail":"cb8f4349e2f8409e593b5beed1cde030b91175c0c8ea6d50c1e90196d08310ef","access_level":"public","create_time":"$D2023-04-06T06:53:48.212Z","update_time":"$D2023-04-06T07:30:33.706Z","view_time":null,"first_public_time":"$D2023-04-06T06:53:48.212Z","has_unpublished_edits":null,"fork":{"id":"3526a9bd88cb92f5","slug":"time-spiral-concepts","title":"Time Spiral Concepts","owner":{"id":"5d7a24a7189efbec","login":"dbx834","name":"Pranav"}},"stars":0,"starred":false,"owner":{"type":"team","id":"762a89307226ba56","login":"jhjanicki","name":"Julia","avatar_url":"https://avatars-next.observableusercontent.com/1a83505473ac33402b5145d95385e0d9f7717ede0640d042034e439c1734af41","tier":"starter_2024","bio":"Conservation biologist/ data viz developer / cartographer/ data storyteller","following":false},"version":837,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cfc6864d79ba928a","login":"jhjanicki","name":"Julia","avatar_url":"https://avatars-next.observableusercontent.com/1a83505473ac33402b5145d95385e0d9f7717ede0640d042034e439c1734af41","tier":null,"bio":"Conservation biologist/ data viz developer / cartographer/ data storyteller","following":false}],"members":[{"type":"individual","id":"cfc6864d79ba928a","login":"jhjanicki","name":"Julia","avatar_url":"https://avatars-next.observableusercontent.com/1a83505473ac33402b5145d95385e0d9f7717ede0640d042034e439c1734af41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Time Spiral Concepts","cells":[{"id":0,"value":"md`# Time Spiral Concepts\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. ***Click a state to lock the focus; click the same cell again, or any empty space to release the focus.***\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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"viewof options = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"viewof options2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", diameter)\n .attr(\"height\", diameter) \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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"md`It is also ideal for visualizing weather dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"viewof options3 = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"chart3 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", diameter)\n .attr(\"height\", diameter) \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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"md`This example visualizes a three and half years dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"chart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", diameter)\n .attr(\"height\", diameter) \n .style(\"cursor\", \"default\");\n \n // TimeSpiral needs getBBox()\n yield svg.node();\n \n const chart = new TimeSpiral(svg)\n .size([diameter/2, diameter/2])\n .innerRadius(5)\n .layers(1) \n .style({\n barWidth:\"skinny\",\n align: \"base\",\n colorBy: \"value\",\n tickInterval: \"monthly\",\n reverseColor: true,\n titleFormat: \"$,.2f\"\n }) \n .palette(d3.interpolateRdYlBu)\n .field({value:\"value\"})\n .data(US)\n .render();\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"md`### Source Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"exports = d3.csvParse(await FileAttachment(\"region_grouped3@1.csv\").text()).map(d => ({date: new Date(d.date), value: +d.sum}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"china = d3.csvParse(await FileAttachment(\"China@1.csv\").text()).map(d => ({date: new Date(d.date), value: +d.sum}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"EU = d3.csvParse(await FileAttachment(\"EU@1.csv\").text()).map(d => ({date: new Date(d.date), value: +d.sum}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"US = d3.csvParse(await FileAttachment(\"US@1.csv\").text()).map(d => ({date: new Date(d.date), value: +d.sum}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"diameter = Math.min(screen.width, screen.height) * 0.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import {GridMap} from \"@analyzer2004/gridcartogram\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {src, days, getStatesNumber} from \"@analyzer2004/covid-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"import {weather} from \"@analyzer2004/west-coast-weather-from-seattle-to-san-diego\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"