An curious maker & coder from Malaysia, doing fun projects related to Arduino RPi, IoT, PCB, LED, linux, javascript (p5, phaser, Vue), dataviz & art installation
viewof newCase3 = rangeSlider(newCase2, d=>d.date)
viewof shift = Inputs.radio(["leading", "centered", "trailing"], {
value: "trailing",
label: "shift"
})
viewof k = Inputs.range([1, 30], {value: 1, step: 1, label: "k"})
Plot.plot({
grid: true,
width:1200,
height: 600,
marginLeft: 80,
marginBottom: 50,
// color: {
// },
y: {
label: "New Cases / Clusters ",
padding: 2
},
x: {
label: "Date",
nice: true,
ticks: 5
},
marks: [
Plot.rectY(newCase3.data , Plot.binX({y: "first"}, { x:"date", y: (d) =>d.cases_new/10, fill:"#00ff00",curve: "step", thresholds: d3.utcDay} )),
Plot.lineY( newCase3.data ,Plot.windowY ({ x:"date", y: "cluster_import", stroke:spectral[0], k, shift } ) ),
Plot.lineY( newCase3.data ,Plot.windowY ({ x:"date", y: "cluster_religious", stroke:spectral[1], k, shift } )),
Plot.lineY( newCase3.data ,Plot.windowY ({ x:"date", y: "cluster_community", stroke:spectral[2], k, shift } )),
Plot.lineY( newCase3.data ,Plot.windowY ({ x:"date", y: "cluster_highRisk", stroke:spectral[3], k, shift } )),
Plot.lineY( newCase3.data ,Plot.windowY ({ x:"date", y: "cluster_education", stroke:spectral[4], k, shift } )),
Plot.lineY( newCase3.data ,Plot.windowY ({ x:"date", y: "cluster_detentionCentre", stroke:spectral[5], k, shift } )),
Plot.lineY( newCase3.data ,Plot.windowY ({ x:"date", y: "cluster_workplace", stroke:spectral[6], strokeWidth: "3", k, shift } )),
]
})
Inputs.table(newCase3.data)
// Setup an array of web colours
spectral = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]
newCase2 = newCase.map( d => (
{
...d,
date: dateParser(d.date),
}
)
).splice(343)
dateParser = d3.timeParse("%Y-%m-%d")
newCase = await d3.csv(url1)
url1 = "https://raw.githubusercontent.com/MoH-Malaysia/covid19-public/main/epidemic/cases_malaysia.csv"
import {date} from "@jashkenas/inputs"
import {rangeSlider} from "@bumbeishvili/utils"
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.
