${data.title[0]}${ labelsRR[j]&&` (${labelsRR[j]})` } ${data.title[1]}${labels[i] && ` (${labels[i]})`}

2b:null 2c:["$","title",null,{"children":"Animated Bivariate Map & Time Spiral Map of COVID-19 2021 with legend | Mattison Belardo | Observable"}] 31:T18a3,viewof currentState = { const width = 1200 const height = 500 const margin = 10 // create SVG element let svg = d3.select(DOM.svg(width, height)); //.style("background", options.theme === "dark" ? "#2e2e2e" : "#e0e0e0"); const path = d3.geoPath(); // Add the text box for State svg.append("text") .attr("x", width/3) .attr("y",height-30) .attr("dy", ".35em") .text(); const bim = svg.append("g"); var countyMap = bim.append("g") .attr("transform","translate("+margin/2+","+margin+") scale(0.7)") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", d => color(data.get(d.id+" "+dateToString(date)))) .attr("d", path) .on("mouseover", function(d) { d3.select(this) .attr("stroke" , "orange") }) .on("mouseout", function(d) { d3.select(this) .attr("stroke" , "null") }) .on('click', clicked) //handleClick; .append("title") .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} ${format(data.get(d.id+" "+ dateToString(date)))}`); bim.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("transform","translate("+margin/2+","+margin+") scale(0.7)") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); svg.append(legend_map) .attr("transform", "translate("+ 9*margin +","+ 42*margin +")"); //.attr("transform", "translate(870,450)"); // select and unselect var testdic = {}; function clicked(e,d) { svg.select("text").text(`${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}`); d3.selectAll("path") .style('stroke', null); d3.select(this).style('stroke', 'yellow'); testdic.name=states.get(d.id.slice(0, 2)).name; handleClick_bi(d); // testdic[d.properties.name]= states.get(d.id.slice(0, 2)).name; //console.log(testdic) map.value=testdic; map.dispatchEvent(new CustomEvent("input")); } //remove function function arrayRemove(arr, value) { return arr.filter(function(ele){ return ele != value; }); } // Update the fill based on date scrubber function update(date) { countyMap.attr("fill", function(d) { var fclass = data.get(d.id+" "+dateToString(date)); }); } //spiral map var focus; var spiralMap = svg.append("g") .attr("width", width/2) .attr("transform","translate("+ (width/2+margin*2) +","+ "0) scale(0.7)") .style("cursor", "default") //.style("max-width", "100%") .on("click", () => focus = null); //spiralmap legend // spiralMap.append(legend_spiral) // .attr("transform", "translate("+ (width +margin*10) +","+ "0)"); // TimeSpiral needs getBBox() // document.body.append(svg.node()); const p = options.scheme === "OrRd" ? d3.interpolateOrRd : options.scheme === "YlGnBu" ? d3.interpolateYlGnBu : d3.interpolateRdPu; // Mini cartogram const mapSize = diameter / 4.2, mg = spiralMap.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_spiral) .data(dataset) .onClick(handleClick) .onMouseEnter((e, d) => {if (!focus) renderSpiral(d); }) .render(); function handleClick(e,d) { focus = focus !== d ? d : null; //console.log(focus); if (focus) renderSpiral(d); e.stopPropagation(); } function handleClick_bi(d) { var sel_state = `${states.get(d.id.slice(0, 2)).name}`; //console.log(sel_state); const bi_select = dataset.find(d => d.state === sel_state); if (bi_select) renderSpiral({state: bi_select.state, total: bi_select.number}); } // 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) { spiralMap.select(".spiral").remove(); //spiralMap.select(".spiral_legend").remove(); const g = spiralMap.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, titleFormat: ".4f", tickInterval: "monthly" }) .palette(p) .field({value: `${options.field}`}) .data(data_spiral(d.state)) .render(); state.text(d.state); //console.log(d); number.text(d3.format(".3f")(d.total)); } function renderLabels() { const label = spiralMap.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}; } var zoom = d3.zoom() .scaleExtent([1, 8]) .on('zoom', zoomed); function zoomed(event) { const {transform} = event; bim.attr("transform", transform); bim.attr("stroke-width", 1 / transform.k); } bim.call(zoom); // svg.call(zoom); svg.node().remove(); const map = html`

${svg.node()}

`; return map; function updateState(id) { map.value=id; console.log(id); map.dispatchEvent(new CustomEvent("input")); } } 32:T455,legend_map = () => { const k = 16; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${data.title[0]}${ labelsRR[j]&&` (${labelsRR[j]})` } ${data.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${data.title[0]} ${data.title[1]} `; }33:T723,getStates = field => { const data = src.filter(d => d.lastDay); const m_month = Math.max.apply(null, data.map(d => d.month)); const m_fips = Math.max.apply(null, data.map(d => d.fips)); // Map state by fips const states = new Array(m_fips); for(let i = 0; i <= m_fips; i++) { const row = data.find(d => d.fips === i); if (row) states[i] = row.state; } // Generate a m_fips * m_month matrix const matrix = new Array(m_fips + 1).fill(null); for(let i = 0; i <= m_fips; i++) { matrix[i] = new Array(m_month + 1); } // Fill matrix with object, newcases and newdeaths are zeros for now, will be calcualted in the next step data.forEach(d => matrix[d.fips][d.month] = { cases: d.cases, //deaths: d.deaths, newcases: d.cases //newdeaths: d.deaths }); const result = matrix.map((d, i) => { const row = new Object(); row.state = states[i]; // Process data by month for(let m = 0; m < d.length; m++) { const mdata = d[m]; if (mdata && m > 0) { const prev = d[m - 1]; // Calculate newcases and newdeaths if (prev) { mdata.newcases = mdata.cases ; //mdata.newdeaths = mdata.deaths - prev.deaths; } } // yy-mm format const ycode = 20 + Math.floor(m / 12); const mcode = m - Math.floor(m / 12) * 12 + 1; row[`${ycode}-${String(mcode).padStart(2, "0")}`] = mdata ? mdata[field] : 0; } return row; }).filter(d => d.state); const total = {state: "Total"}; result.columns = Object.keys(result[0]); const months = result.columns.slice(1); for(let month of months) { let sum = 0; for(let row of result) sum += row[month]; total[month] = sum; } result.unshift(total) return result; }34:T819,getStatesLastNDays = (field, days, total, code) => { const data = src.filter(d => d.dayDiff <= days + 1); const m_fips = Math.max.apply(null, data.map(d => d.fips)); // Map state by fips const states = new Array(m_fips); for(let i = 0; i <= m_fips; i++) { const row = data.find(d => d.fips === i); if (row) states[i] = row.state; } // Generate a m_fips * days matrix const matrix = new Array(m_fips + 1).fill(null); for(let i = 0; i <= m_fips; i++) { matrix[i] = new Array(days + 1); } // Fill matrix with object, newcases and newdeaths will be calcualted in the next step data.forEach(d => matrix[d.fips][d.dayDiff - 1] = { cases: d.cases, deaths: d.deaths, newcases: d.cases //newdeaths: d.deaths }); // Pregenerate date strings for each day const td = new Date("2021-12-03"), dates = []; for (let i = 1;i <= days; i++) { td.setDate(td.getDate() - 1); dates.push(`${td.getFullYear()}/${td.getMonth() + 1}/${td.getDate()}`); } const result = matrix.map((d, i) => { const row = new Object(); row.state = states[i]; if (code) { const c = mapID.get(row.state); row.code = c !== undefined ? c : ""; } // Process data by day for(let dy = 0; dy < d.length - 1; dy++) { const dydata = d[dy]; if (dydata) { const prev = d[dy + 1]; // Calculate newcases and newdeaths if (prev) { dydata.newcases = dydata.cases; //dydata.newdeaths = dydata.deaths - prev.deaths; } } row[dates[dy]] = dydata ? dydata[field] : 0; } return row; }).filter(d => d.state); result.columns = Object.keys(result[0]); if (total) { const total = {state: "Total", code: ""}; result.columns = Object.keys(result[0]); const ds = result.columns.slice(code ? 2 : 1); for(let day of ds) { let sum = 0; for(let row of result) sum += row[day]; total[day] = sum; } result.unshift(total) } return result; }35: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}`); } }36:Ta37,map_spiral = [[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"], [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"], [10, 5, ""], [11, 5, ""], [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] })); //remove dc // map_spiral = [[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"], [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, ""], [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] }));37:[{"id":"47c3afa5a8ad6a69db1044acff231f6b6d26cda48326c162ac8a814220412642b6505dc6c3dba4481556fa101e4e3d65f46fcc0db3a565534542671aec03caf3","href":"https://static.observableusercontent.com/files/47c3afa5a8ad6a69db1044acff231f6b6d26cda48326c162ac8a814220412642b6505dc6c3dba4481556fa101e4e3d65f46fcc0db3a565534542671aec03caf3","name":"spiral_allnew.csv","type":"text/csv","lastModified":1682393193847.304,"size":1920273},{"id":"c3af4157bc9f946d2f26807b269d046fd5aee365321901ef0704b392e46069e0b12241ded8ac79de46b8eff5c73d49198535e789f930052fdb70f63c6d1d5d7f","href":"https://static.observableusercontent.com/files/c3af4157bc9f946d2f26807b269d046fd5aee365321901ef0704b392e46069e0b12241ded8ac79de46b8eff5c73d49198535e789f930052fdb70f63c6d1d5d7f","name":"allcluster.csv","type":"text/csv","lastModified":1682393193847.304,"size":24464611},{"id":"e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","href":"https://static.observableusercontent.com/files/e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","name":"counties-albers-10m@9.json","type":"application/json","lastModified":1682393193847.304,"size":745424},{"id":"26edb36af0fde039070b2cdaf9a865171e244f093ab0697c0f55b88c81cdc1ed53576b24a3e6c4813d58d732eec847c031838bef446909ac33691ab14035bb9a","href":"https://static.observableusercontent.com/files/26edb36af0fde039070b2cdaf9a865171e244f093ab0697c0f55b88c81cdc1ed53576b24a3e6c4813d58d732eec847c031838bef446909ac33691ab14035bb9a","name":"state_fips.csv","type":"text/csv","lastModified":1682393193847.304,"size":861}] 2f:{"id":"2d9531c218c87605","slug":null,"title":"Animated Bivariate Map & Time Spiral Map of COVID-19 2021 with legend","thumbnail":"3fefebf95234f271e715404c5cb33361a26ee74b428871de8384ba8e5dc5ff82","access_level":"public","create_time":"$D2023-04-25T03:26:33.847Z","update_time":"$D2023-04-25T03:26:33.847Z","view_time":null,"first_public_time":"$D2023-04-25T03:26:33.847Z","has_unpublished_edits":null,"fork":{"id":"916e584e6391b607","slug":"animated-bivariate-map-time-spiral-map-of-covid-19-2021-with","title":"Animated Bivariate Map & Time Spiral Map of COVID-19 2021 with legend","owner":{"id":"d32524a28204ccc9","login":"ylan1","name":"Yu Lan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1f53a26ef1def300","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":"starter_2024"},"version":1307,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f0397a3785cb0d0","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":null}],"members":[{"type":"individual","id":"0f0397a3785cb0d0","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Animated Bivariate Map & Time Spiral Map of COVID-19 2021 with legend","cells":[{"id":229,"value":"md\n`# Animated Bivariate Map & Time Spiral Map of COVID-19 2021 with legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md\n`This map shows the bivariate map of relative risk of cluster and relative risk of county. The value of two variables are ranged from lowest, low, medium to high. You can hover the county to get details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"viewof colors = {\n const form = html``;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"viewof options = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof date = Scrubber(dates.map(x => d3.timeParse(\"%Y-%m-%d\")(x)), {\n autoplay: false,\n loop: false,\n delay: 100,\n format: date => date.toLocaleString(\"en\", {month: \"long\", day: \"numeric\",year:\"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":" viewof spiral_legend= legend({\n color: d3.scaleSequential(\n d3.extent(data_spiral(selected), d => +d[\"cases\"]),\n d3[`interpolate${\"OrRd\"}`]\n ),\n title: selected\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"// currentState","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"// Object.values(currentState)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"selected = Object.values(currentState)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"src = { \n const td = new Date(\"2022-06-30\");\n //const data = await d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\", d => { \n const data = statedata.map(d => {\n const date = d3.timeParse('%Y-%m-%d')(d.date);\n const y = date.getFullYear(), m = date.getMonth();\n const ldy = new Date(y, m + 1, 0); \n return {\n date: date,\n dayDiff: Math.floor((td - date) / ms.day), // diff from today\n lastDay: date.getTime() === ldy.getTime(), // last day of the month\n month: (y - 2021) * 12 + m,\n state: d.state,\n fips: +d.fips,\n cases: +d.RR\n //deaths: +d.deaths\n }\n });\n \n // last day of dataset\n const last = data[data.length - 1].date.getTime(); \n for(let i = data.length - 1; i > 0; i--) {\n const row = data[i];\n if (row.date.getTime() === last)\n row.lastDay = true;\n else\n break;\n }\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"ms = ({\n day: 24 * 3600 * 1000,\n week: 7 * 24 * 3600 * 1000 \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"// statedata = await d3.csv(\"https://raw.githubusercontent.com/YuLan1014/covid/main/spiral_allnew.csv\")\n// statedata = await d3.csv(\"https://raw.githubusercontent.com/YuLan1014/covid/main/stateName.csv\")\nstatedata = await FileAttachment(\"spiral_allnew.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"getYesterdayNumbers = (field, sorted) => {\n const \n states = getStatesLastNDays(\"newcases\", 1, false, true),\n date = Object.keys(states[0])[2];\n \n const a = states.map(d => ({\n state: d.state,\n code: d.code,\n number: d[date]\n }));\n \n return sorted ? a.sort((a, b) => b.number - a.number) : a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"// getYesterdayNumbers(\"cases\", true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"getStatesNumber = (field, date) => {\n const td = days, mapper = mapID;\n \n var data; \n if (typeof date === \"number\") \n data = src.filter(d => td - d.dayDiff === date);\n else\n data = src.filter(d => d.date.getTime() === date.getTime());\n \n return data.map(d => ({\n state: d.state,\n code: mapper.get(d.state),\n number: d[field]\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"firstDay = src[0].date;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"days = {\n const first = src[0].date;\n const last = src[src.length - 1].date;\n return Math.floor((last - first) / ms.day) + 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md\n`## Data\nLoad the case data, county JSON file, and state JSON file. Create an array of dates for the data scrubber.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"dates = {\n const data = await FileAttachment(\"allcluster.csv\").csv();\n var dd = data.map(function(d) { return d.date; });\n return [...new Set(dd)];\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"rrmap= {\n const testww = await FileAttachment(\"allcluster.csv\").csv();\n return new Map(testww.map(({id,rr_c,rr_l,date}) => [(id+ \" \"+date), [+rr_c, +rr_l]]))\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"data = Object.assign( \nrrmap\n,{title: [\"RR of cluster\", \"RR of county\"]},)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"labelsRR= [\"Group 1\", \"Group 2\",\"Group 3\", \"Group 4\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"labels = [\"Group 1\", \"Group 2\",\"Group 3\", \"Group 4\"]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"//x = d3.scaleLinear([0.053, 0.128,0.295 ,1000], d3.range(n))\nx = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"//y = d3.scaleLinear([0.053, 0.128,0.295 ,1000], d3.range(n))\ny = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))\n//y = d3.scaleQuantile([1,14], d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md\n`## D3 Setup\nSetup some useful D3 items. The \\`\\`color\\`\\` function will be used to map cases to the associated quantile color. The \\`\\`path\\`\\` and \\`\\`projection\\`\\` functions are needed for mapping the JSON data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"format = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${data.title[0]} ${a} ${labelsRR[x(a)] && ` (${labelsRR[x(a)]})`}\n${data.title[1]} ${b} ${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"schemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#D3CFE6\", \"#A5BEDB\", \"#76ADD0\",\"#489CC5\",\n \"#D0A2CE\", \"#A395C5\", \"#7588BA\",\"#477AB1\",\n \"#CD74B5\", \"#A06BAD\", \"#7361A4\",\"#46589C\",\n \"#CA479E\", \"#9E4196\", \"#713B8F\",\"#453687\"\n ]\n },\n {\n name: \"RdBu\", \n colors: [\n \"#D3CFE6\", \"#A5BEDB\", \"#76ADD0\",\"#489CC5\",\n \"#D0A2CE\", \"#A395C5\", \"#7588BA\",\"#477AB1\",\n \"#CD74B5\", \"#A06BAD\", \"#7361A4\",\"#46589C\",\n \"#CA479E\", \"#9E4196\", \"#713B8F\",\"#453687\"\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"//states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]));\nstates = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"us = FileAttachment(\"counties-albers-10m@9.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md\n` ## Import Useful Tools\nImport legend and date scrubber from Mike Bostok, and a general purpose slider from Jeremy Ashkenas.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md\n`## Helper Functions\nHelper function to convert JS dates to format used in the data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"function dateToString(date) {\n var year = date.getFullYear();\n var month = (\"0\" + (date.getMonth() + 1)).slice(-2);\n var day = (\"0\" + date.getDate()).slice(-2);\n \n return `${year}-${month}-${day}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"md\n`## Source code of spiral map\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"md`### Appendix of spiral map`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"mapID = new Map(d3.csvParse(await FileAttachment(\"state_fips.csv\").text(), d3.autoType).map(d => [d.stname, d.stusps]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"data_spiral = (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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"today = new Date(\"2022-06-30\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"yesterday = {\n const yd = today;\n return new Date(yd.setDate(yd.getDate() ));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"//diameter = Math.min(screen.width, screen.height) * 0.8\ndiameter = width/2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"import {GridMap} from \"@analyzer2004/gridcartogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"md\n`## References\n\n1. Animated Map of COVID-19 Cases:\nhttps://observablehq.com/@onoratod/animated-map-of-covid-19-cases\n\n2. Bivariate Choropleth:\nhttps://observablehq.com/@d3/bivariate-choropleth\n\n3. Time Spiral with a COVID Demo: https://observablehq.com/@analyzer2004/timespiral\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"