viewof newCase3 = rangeSlider(newCase2, d=>d.date)
viewof kinput = Inputs.range([1, 30], { value: 7, step: 1, label: "K value" })
viewof shift = Inputs.radio(["leading", "centered", "trailing"], {
value: "trailing",
label: "shift"
})
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: kinput,
shift
})
),
Plot.lineY(
newCase3.data,
Plot.windowY({
x: "date",
y: "cluster_religious",
stroke: spectral[1],
k: kinput,
shift
})
),
Plot.lineY(
newCase3.data,
Plot.windowY({
x: "date",
y: "cluster_community",
stroke: spectral[2],
k: kinput,
shift
})
),
Plot.lineY(
newCase3.data,
Plot.windowY({
x: "date",
y: "cluster_highRisk",
stroke: spectral[3],
k: kinput,
shift
})
),
Plot.lineY(
newCase3.data,
Plot.windowY({
x: "date",
y: "cluster_education",
stroke: spectral[4],
k: kinput,
shift
})
),
Plot.lineY(
newCase3.data,
Plot.windowY({
x: "date",
y: "cluster_detentionCentre",
stroke: spectral[5],
k: kinput,
shift
})
),
Plot.lineY(
newCase3.data,
Plot.windowY({
x: "date",
y: "cluster_workplace",
stroke: spectral[6],
strokeWidth: "3",
k: kinput,
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.
