Public
Edited
Apr 25, 2023
// currentState
// Object.values(currentState)[0]
selected = Object.values(currentState)[0]
src = {
const td = new Date("2022-06-30");
//const data = await d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv", d => {
const data = statedata.map(d => {
const date = d3.timeParse('%Y-%m-%d')(d.date);
const y = date.getFullYear(), m = date.getMonth();
const ldy = new Date(y, m + 1, 0);
return {
date: date,
dayDiff: Math.floor((td - date) / ms.day), // diff from today
lastDay: date.getTime() === ldy.getTime(), // last day of the month
month: (y - 2021) * 12 + m,
state: d.state,
fips: +d.fips,
cases: +d.RR
//deaths: +d.deaths
}
});
// last day of dataset
const last = data[data.length - 1].date.getTime();
for(let i = data.length - 1; i > 0; i--) {
const row = data[i];
if (row.date.getTime() === last)
row.lastDay = true;
else
break;
}
return data;
}
// statedata = await d3.csv("https://raw.githubusercontent.com/YuLan1014/covid/main/spiral_allnew.csv")
// statedata = await d3.csv("https://raw.githubusercontent.com/YuLan1014/covid/main/stateName.csv")
statedata = await FileAttachment("spiral_allnew.csv").csv()
// getYesterdayNumbers("cases", true)
rrmap= {
const testww = await FileAttachment("allcluster.csv").csv();
return new Map(testww.map(({id,rr_c,rr_l,date}) => [(id+ " "+date), [+rr_c, +rr_l]]))
}
data = Object.assign(
rrmap
,{title: ["RR of cluster", "RR of county"]},)
labelsRR= ["Group 1", "Group 2","Group 3", "Group 4"]
labels = ["Group 1", "Group 2","Group 3", "Group 4"]
n = Math.floor(Math.sqrt(colors.length))
//x = d3.scaleLinear([0.053, 0.128,0.295 ,1000], d3.range(n))
x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))
//y = d3.scaleLinear([0.053, 0.128,0.295 ,1000], d3.range(n))
y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))
//y = d3.scaleQuantile([1,14], d3.range(n))
color = {
return value => {
if (!value) return "#ccc";
let [a, b] = value;
return colors[y(b) + x(a) * n];
};
}
format = (value) => {
if (!value) return "N/A";
let [a, b] = value;
return `${data.title[0]} ${a} ${labelsRR[x(a)] && ` (${labelsRR[x(a)]})`}
${data.title[1]} ${b} ${labels[y(b)] && ` (${labels[y(b)]})`}`;
}
schemes = [
{
name: "RdBu",
colors: [
"#D3CFE6", "#A5BEDB", "#76ADD0","#489CC5",
"#D0A2CE", "#A395C5", "#7588BA","#477AB1",
"#CD74B5", "#A06BAD", "#7361A4","#46589C",
"#CA479E", "#9E4196", "#713B8F","#453687"
]
},
{
name: "RdBu",
colors: [
"#D3CFE6", "#A5BEDB", "#76ADD0","#489CC5",
"#D0A2CE", "#A395C5", "#7588BA","#477AB1",
"#CD74B5", "#A06BAD", "#7361A4","#46589C",
"#CA479E", "#9E4196", "#713B8F","#453687"
]
}
]
//states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]));
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]));
us = FileAttachment("counties-albers-10m@9.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
function dateToString(date) {
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
return `${year}-${month}-${day}`;
}
md`### Appendix of spiral map`
mapID = new Map(d3.csvParse(await FileAttachment("state_fips.csv").text(), d3.autoType).map(d => [d.stname, d.stusps]))
data_spiral = (state) => {
const filtered = src.filter(d => d.state === state);
// for (let i = filtered.length - 1; i >= 1; i--) {
// const c = filtered[i], p = filtered[i - 1];
// c.newcases = c.cases - p.cases;
// //c.newdeaths = c.deaths - p.deaths;
// }
// filtered[0].newcases = 0;
//filtered[0].newdeaths = 0;
return filtered;
}
today = new Date("2022-06-30");
yesterday = {
const yd = today;
return new Date(yd.setDate(yd.getDate() ));
}
//diameter = Math.min(screen.width, screen.height) * 0.8
diameter = width/2
import {GridMap} from "@analyzer2004/gridcartogram"
import {form} from "@mbostock/form-input"
import { legend } from "@d3/color-legend"
md
`## References
1. Animated Map of COVID-19 Cases:
https://observablehq.com/@onoratod/animated-map-of-covid-19-cases
2. Bivariate Choropleth:
https://observablehq.com/@d3/bivariate-choropleth
3. Time Spiral with a COVID Demo: https://observablehq.com/@analyzer2004/timespiral
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
