md
`This map shows the bivariate map of case fatality rate and percent vaccination.`
viewof color_test2 = selection_function.container;
schemes = [
{
name: "RdBu",
colors: [
"#f3f3f3", "#A5BEDB", "#76ADD0","#489CC5",
"#D0A2CE", "#A395C5", "#7588BA","#477AB1",
"#CD74B5", "#A06BAD", "#7361A4","#46589C",
"#CA479E", "#9E4196", "#713B8F","#453687"
]
},
{
name: "RdBu",
colors: [
"#ffffff", "#ffe6fe", "#eed3e5", "#ebc2de",
"#e9b2d7", "#e6a2d0", "#d7adca", "#c7b7c5",
"#b8c2bf", "#a9ccb9", "#99d7b4", "#8ae1ae"
]
}
]
legend = () => {
const k = 24;
const arrow = DOM.uid();
return svg`<g font-family=sans-serif font-size=10>
<g transform="translate(-${k * n / 2},-${k * n / 2}) rotate(-45 ${k * n / 2},${k * n / 2})">
<marker id="${arrow.id}" markerHeight=10 markerWidth=10 refX=6 refY=3 orient=auto>
<path d="M0,0L9,3L0,6Z" />
</marker>
${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg`<rect width=${k} height=${k} x=${i * k} y=${(n - 1 - j) * k} fill=${colors[j * n + i]}>
<title>${data.title[0]}${ labelsRR[j]&&` (${labelsRR[j]})` }
${data.title[1]}${labels[i] && ` (${labels[i]})`}</title>
</rect>`)}
<line marker-end="${arrow}" x1=0 x2=${n * k} y1=${n * k} y2=${n * k} stroke=black stroke-width=1.5 />
<line marker-end="${arrow}" y2=0 y1=${n * k} stroke=black stroke-width=1.5 />
<text font-weight="bold" dy="0.71em" transform="rotate(90) translate(${n / 2 * k},6)" text-anchor="middle">${data.title[0]}</text>
<text font-weight="bold" dy="0.71em" transform="translate(${n / 2 * k},${n * k + 6})" text-anchor="middle">${data.title[1]}</text>
</g>
</g>`;
}
import {zip, zipreader} from "@fil/jszip"
reader = zipreader(FileAttachment("USA_PLACES_COVID@1.csv.zip"))
USA_PLACES_COVID = reader.get("USA_PLACES_COVID.csv").then(d3.csvParse)
dates = (async function() {
const rows = await USA_PLACES_COVID;
const uniqueDates = [...new Set(rows.map(d => d.Date))];
return uniqueDates;
})();
data_OG = Object.assign(new Map(
USA_PLACES_COVID.map(({ countyFIPS, Date, variable_1, variable_2 }) => [(countyFIPS + " " + Date), [+variable_1, +variable_2]])
), { title: ["Case Fatality Rate", "% Vaccinated"] });
data = (async function() {
const variable_1 = await selection_function.selectedVariables[0];
const variable_2 = await selection_function.selectedVariables[1];
const data = Object.assign(
new Map(
USA_PLACES_COVID.map(({ countyFIPS, Date, [variable_1]: value_1, [variable_2]: value_2 }) => [
`${countyFIPS} ${Date}`,
[+value_1, +value_2]
])
),
{ title: [variable_1, variable_2] }
);
return data;
})();
labels = ["lowest", "low","medium", "high"]
labelsRR= ["lowest", "low","medium", "high"]
n = Math.floor(Math.sqrt(colors.length))
x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))
y = d3.scaleQuantile([1,14], d3.range(n))
path = d3.geoPath()
color = {
return value => {
if (!value) return "#ccc";
let [a, b] = value;
return colors[y(b) + x(a) * n];
};
}
md`## Data Manipulations`
columnNames = Object.keys(USA_PLACES_COVID[0]);
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)]})`}`;
}
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@5")
//import {legend} from "@d3/color-legend"
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
`## 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
`
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.
