Published
Edited
Jul 28, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
widthNow
Insert cell
width
Insert cell
import {radio} from "@jashkenas/inputs"

Insert cell
allTime = d3.extent(datenZHOrg, d => d.date)
Insert cell
smallTime = [parseTime("2020-06-01"), d3.extent(datenZHOrg, d => d.date)[1]]
Insert cell
Insert cell
range
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
widthNow = d3.min([768, width]);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
datenZH = datenZHOrg.filter(el => el.date>=dateZH_extent[0])
Insert cell
Insert cell
datenAlterGeschlechtTotal = d3.nest()
.key(d => d.Week)
.rollup(function(leaves) { return d3.sum(leaves, function(d) {return +(d.NewConfCases);})})
.entries(datenAlterGeschlecht)
Insert cell
Insert cell
Insert cell
Insert cell
datenAlterWide = function () {
let nest = d3.nest()
.key(d => d.Week)
.key(d => d.AgeYearCat)
.rollup(function(leaves) { return d3.sum(leaves, function(d) {return +(d.NewConfCases);})})
.entries(datenAlterGeschlecht)
for (let i = 0;i<nest.length;i++) {
let tot = 0;
for (let j = 0; j<nest[i].values.length;j++) {
tot += nest[i].values[j].value;
nest[i][''+nest[i].values[j].key] = nest[i].values[j].value;
}
//nest[i].total = tot;
}
return nest;
}()
Insert cell
ageSeries = d3.stack()
.keys(ages)
.offset(d3.stackOffsetExpand)
(datenAlterWide)
Insert cell
area = d3.area()
.x(d => xScaleWeek(d.data.key))
.y0(d => yScaleArea(d[0]))
.y1(d => yScaleArea(d[1]))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mapPlz2056 = d3.json("https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_plz/PLZ_gen_epsg2056_F_KTZH_2020.json")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dateZH_extent2 = [parseTime("2020-06-01"), dateZH_extent[1]]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
xScaleWeek = d3
.scaleLinear()
.domain(weeks)
.range([margin.left, widthNow - margin.right])
Insert cell
yScaleArea = d3.scaleLinear()
.range([height - margin.bottom, margin.top])
Insert cell
Insert cell
Insert cell
Insert cell
projectionPlz = d3
.geoIdentity()
.reflectY(true)
.fitExtent(
[[padding, padding], mapSize.map(d => d - padding)],
mapPlz2056
)
Insert cell
Insert cell
pathPlz = d3.geoPath(projectionPlz);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more