Published
Edited
May 17, 2020
md`# Confirmed Case Per Province in Indonesia`
viewof selected_province = DOM.select(provinces)
html`<style> .grid2col { display: grid; grid-template-columns: auto auto; } </style>`
{
let provinces = provincefilt.reduce(red_by_Province,[]);
const divProp =
html`<div class="grid2col">${provinces.map(
CreateChart)
}</div>`
return divProp
}
CreateChart = (province)=> {
const data = provincefilt.filter(function(d) {
return [province].includes(d.province);
});
//debugger
const Div = DOM.element('div', {
//style: `width:${width}px`
});
const X = data.reduce(function(acc, it) {
//debugger;
if(it.date) acc.push(it.date);
return acc;
},[]);
const Y = data.reduce(function(acc, it) {
//debugger;
if(it.total||it.total=='') acc.push(it.total);
return acc;
},[]);
const DF = {
x: X,
y: Y,
mode: 'lines+markers',
type: 'scatter',
line: {shape: 'spline'},
};
const DG = [DF];
const layout = {
title: `Confirmed case in ${province}`,
showLegend: true,
width: 450
};
Plotly.newPlot(
Div,
DG,
layout,
{
displayModeBar: true,
displaylogo: false,
//staticPlot: true
}
);
return Div;
}
red_by_Province = function(acc, it) {
//console.log(it.PROVINSI);
//debugger;
if(!acc.includes(it.province) && it.province) acc.push(it.province);
return acc;
}
provincefilt = provincedata.filter(function(d) {
return ["EAST JAVA", "WEST JAVA", "BANTEN","CENTRAL JAVA","SOUTH SULAWESI" ].includes(d.province);
});
provinces = data.reduce(function(acc, it) {
//console.log(it.PROVINSI);
//debugger;
if(it.PROVINSI) acc.push(it.PROVINSI);
return acc;
},[]);
provincedata = Object.values(confirmed.reduce(function(r, e) {
var key = e.province + '|' + e.date;
debugger
if (!r[key]) {
r[key] = {"province": e.province, "date": e.date, "cases": e.cases, total: e.total};
} else {
r[key].cases += e.cases;
r[key].total += e.total;
}
return r;
}, {}))
confirmed = tidy(data, "confirmed")
data = d3.csv("https://raw.githubusercontent.com/Srabutdotcom/covid-19/Indonesia/Indonesia/COVID-19%20NEW%20CASES%20INDONESIA.csv",d3.autotype)
tidy = (data, type) => {
const t = data
.map(d => {
debugger
let prev = 0; // previous total, to compute diffs
let seven = 0;
let group = 0;
debugger;
return (
Object.keys(d)
.filter(dt.timeParse("%e-%b-%y"))
// .filter(d => d !== "2/12/20") // bad data day
.map(k => {
const total = +d[k],
cases = total - prev;
prev = total;
seven = total/7;
group = total % 8;
debugger;
return {
type,
province: d["PROVINSI"],
date: dt.timeParse("%e-%b-%y")(k),
ymd: dt.timeFormat("%y-%b-%e")(dt.timeParse("%e-%b-%y")(k)),
cases,
seven,
group,
total
};
})
);
})
.flat()
return t;
}
md`### Library`
d3 = require("d3-fetch")
dt = require("d3-time-format")
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.
