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

25:["$","title",null,{"children":"Animated Bivariate Map & Time Spiral Map of COVID-19 2021 with legend | Ped Ram | Observable"}] 49: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")); } } 4a: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]} `; }4b: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; }4c: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; }4d: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}`); } }4e: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] }));4f:[{"id":"47c3afa5a8ad6a69db1044acff231f6b6d26cda48326c162ac8a814220412642b6505dc6c3dba4481556fa101e4e3d65f46fcc0db3a565534542671aec03caf3","href":"https://static.observableusercontent.com/files/47c3afa5a8ad6a69db1044acff231f6b6d26cda48326c162ac8a814220412642b6505dc6c3dba4481556fa101e4e3d65f46fcc0db3a565534542671aec03caf3","name":"spiral_allnew.csv","type":"text/csv","lastModified":1705950983426.95,"size":1920273},{"id":"c3af4157bc9f946d2f26807b269d046fd5aee365321901ef0704b392e46069e0b12241ded8ac79de46b8eff5c73d49198535e789f930052fdb70f63c6d1d5d7f","href":"https://static.observableusercontent.com/files/c3af4157bc9f946d2f26807b269d046fd5aee365321901ef0704b392e46069e0b12241ded8ac79de46b8eff5c73d49198535e789f930052fdb70f63c6d1d5d7f","name":"allcluster.csv","type":"text/csv","lastModified":1705950983426.95,"size":24464611},{"id":"e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","href":"https://static.observableusercontent.com/files/e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","name":"counties-albers-10m@9.json","type":"application/json","lastModified":1705950983426.95,"size":745424},{"id":"26edb36af0fde039070b2cdaf9a865171e244f093ab0697c0f55b88c81cdc1ed53576b24a3e6c4813d58d732eec847c031838bef446909ac33691ab14035bb9a","href":"https://static.observableusercontent.com/files/26edb36af0fde039070b2cdaf9a865171e244f093ab0697c0f55b88c81cdc1ed53576b24a3e6c4813d58d732eec847c031838bef446909ac33691ab14035bb9a","name":"state_fips.csv","type":"text/csv","lastModified":1705950983426.95,"size":861}] 29:{"id":"f9d9ad09d265dc7d","slug":null,"title":"Animated Bivariate Map & Time Spiral Map of COVID-19 2021 with legend","thumbnail":"5ab8e99b12dcc7f6f980eb26a0cf434485f73a5d553762b1fea680f3cb15c092","access_level":"public","create_time":"$D2024-01-22T19:16:23.426Z","update_time":"$D2024-01-22T19:16:23.426Z","view_time":null,"first_public_time":"$D2024-01-22T19:16:23.426Z","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":"b0bbcf444e46bf02","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1307,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"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":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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"// currentState","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"// Object.values(currentState)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"selected = Object.values(currentState)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"// getYesterdayNumbers(\"cases\", true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"firstDay = src[0].date;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"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"},{"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"md`### Appendix of spiral map`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"today = new Date(\"2022-06-30\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"import {GridMap} from \"@analyzer2004/gridcartogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null