EJ Fox & Ian Johnson
streaming data, code, acid, design
metrics = [
"total_icu_beds_7_day_avg",
"total_staffed_adult_icu_beds_7_day_avg",
"icu_beds_used_7_day_avg"
]
viewof week = Scrubber(weeks.reverse(), { delay: 100, autoplay: false })
import { Scrubber } from "@mbostock/scrubber"
weeks = d3.range(eventsByHospital.get("010108").length)
function value(d) {
// percent icu used out of total on average
return (+d["icu_beds_used_7_day_avg"] / +d["total_icu_beds_7_day_avg"]) * 100;
}
hospitals
.filter(d => {
let events = eventsByHospital.get(d.hospital_pk);
if (events && events[week]) return value(events[week]) > 75;
})
.sort(function(a, b) {
let eventsA = eventsByHospital.get(a.hospital_pk);
let eventsB = eventsByHospital.get(b.hospital_pk);
if (!eventsA || !eventsB) return -1;
return value(eventsA[week]) - value(eventsB[week]);
})
.map(d => {
return eventsByHospital.get(d.hospital_pk)[week]; //.map(d => value(d));
})
hospitalDots = {
let canvas = d3
.create("canvas")
.attr("width", width)
.attr("height", height)
.node();
let ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighter";
scaleCanvas(canvas, ctx);
let projection = d3
.geoAlbersUsa()
.fitSize([width - 10, height], countyShapes);
// .geoEquirectangular()
// .fitWidth(width * 0.98, land)
// .translate([width / 2, height / 2]);
let path = d3
.geoPath()
.projection(projection)
.context(ctx);
ctx.fillStyle = "#111";
ctx.fillRect(0, 0, width, width);
ctx.fillStyle = "#555";
let r = 1;
// let r = 10;
hospitals
.filter(d => {
let events = eventsByHospital.get(d.hospital_pk);
if (events && events[week]) return value(events[week]) > 75;
})
.sort(function(a, b) {
let eventsA = eventsByHospital.get(a.hospital_pk);
let eventsB = eventsByHospital.get(b.hospital_pk);
if (!eventsA || !eventsB) return -1;
return value(eventsA[week]) - value(eventsB[week]);
})
.forEach(d => {
let p = projection([d.LONGITUDE, d.LATITUDE]);
// total_icu_beds_7_day_avg
// icu_beds_used_7_day_avg
// total_beds_7_day_avg
let events = eventsByHospital.get(d.hospital_pk);
// console.log(d, events);
// if (!events || !events.length) return;
if (events && p) {
// events.sort((a, b) => {});
let alpha = metricNormalize(value(events[week]));
r = metricRadius(value(events[week]));
let c = d3.rgb(colorScale(alpha));
// let c = d3.rgb("#fff");
ctx.fillStyle = `rgba(${[c.r, c.g, c.b]}, ${alpha}`;
ctx.beginPath();
ctx.arc(p[0], p[1], r, 0, Math.PI * 2);
ctx.fill();
// ctx.fillRect(p[0], p[1], r, r);
}
// ctx.fillStyle = "#fff";
// if (p) ctx.fillRect(p[0], p[1], r, r);
});
return canvas;
}
metric = metrics[0]
// colorScale = d3.scaleSequential(d3.interpolateGreys)
colorScale = d3.scaleSequential(d3.interpolateMagma)
extent = d3.extent(eventsByHospital, d => value(d[1][week]))
metricNormalize = d3
.scaleLinear()
.range([0, 1])
// .domain(extent)
.domain([0, 101])
metricRadius = d3
.scaleSqrt()
.range([0, 5])
// .domain(extent)
.domain([70, 101])
eventsByHospital.get("010108")
import { countyShapes } from "@enjalot/us-county-datasets"
import { scaleCanvas } from "@john-guerra/canvas-retina-display"
hospitals = FileAttachment("hospitals-maplarge.csv").csv()
hospitalsByPK = new Map(hospitals.map(d => [d.hospital_pk, d]))
hhs = FileAttachment(
"slimmed-reported_hospital_capacity_admissions_facility-level_weekly_average_timeseries_20201207.csv"
).csv()
hhs.filter(d => d.hospital_pk == "010108")
// how many events per hospital (seems 18)
d3.rollup(hhs, v => v.length, d => d.hospital_pk)
eventsByHospital = d3.group(hhs, d => d.hospital_pk)
// how many events per county
d3.rollup(hhs, v => v.length, d => hospitalsByPK.get(d.hospital_pk).fips_code)
d3 = require("d3@6", "d3-geo", "d3-geo-projection@3")
/*
mkdir data
curl https://healthdata.gov/sites/default/files/reported_hospital_capacity_admissions_facility-level_weekly_average_timeseries_20201207.csv > data/reported_hospital_capacity_admissions_facility-level_weekly_average_timeseries_20201207.csv
npm install d3
node slim.js
*/
/*
let fs = require("fs")
let d3 = require("d3")
let dir = "data/"
let filename = "reported_hospital_capacity_admissions_facility-level_weekly_average_timeseries_20201207.csv"
let txt = fs.readFileSync(dir + filename).toString().slice(1) // weird character at begin of file
let data = d3.csvParse(txt)
let todelete = "hospital_name,address,city,state,zip,fips_code,hospital_subtype,ccn,is_metro_micro".split(",")
Object.keys(data[0]).forEach(key => {
if(key.indexOf("previous_day") >= 0) {
todelete += "," + key
}
})
todelete = todelete.split(",")
console.log("todelete", todelete)
let slimmed = data
.filter(d => !!d.address)
// .filter(d => !!d.fips_code)
.map(function(d) {
let obj = {...d}
Object.keys(obj).forEach(key => {
let v = obj[key]
if(v == "-999999" || v == "-999999.0") obj[key] = ""
})
// we can look up all these fields in the hospitals geocoded map
todelete.forEach(del => {
delete obj[del]
})
return obj
})
console.log("writing slimmed full file")
fs.writeFileSync(dir + "slimmed-" + filename, d3.csvFormat(slimmed))
// // let byStateFips = d3.rollup(data, v => v.length, d => d.fips_code.slice(0,2))
let byStateFips = d3.group(data, d => d.fips_code.slice(0,2))
let states = Array.from(byStateFips.keys())
states.forEach(state => {
let d = byStateFips.get(state)
console.log(state, d.length)
fs.writeFileSync(dir + state + "-slimmed-" + filename, d3.csvFormat(d))
})
*/
import { world } from "@d3/world-map"
topojson = require("topojson-client@3")
land = topojson.feature(world, world.objects.land)
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.
