An curious maker & coder from Malaysia, doing fun projects related to Arduino RPi, IoT, PCB, LED, linux, javascript (p5, phaser, Vue), dataviz & art installation
md `# Compare Two States with Total`
md `### Choose slider timeframe and two states (red,blue) below, green is daily total`
viewof mergeAllDateFilter = rangeSlider(mergeAll, d=>d.date)
viewof filterState = Inputs.select(["Selangor"].concat(stateList), {label: "State 1 (red)"})
viewof filterState2 = Inputs.select(["W.P. Kuala Lumpur"].concat(stateList), {label: "State 2 (blue)"})
url = "https://raw.githubusercontent.com/MoH-Malaysia/covid19-public/main/epidemic/cases_state.csv"
casebyState = await d3.csv(url)
url1 = "https://raw.githubusercontent.com/MoH-Malaysia/covid19-public/main/epidemic/cases_malaysia.csv"
newCase = await d3.csv(url1)
newCase2 = newCase.map( d => (
{
date: dateParser(d.date),
totalCases: d.cases_new
}
)
)
dateParser = d3.timeParse("%Y-%m-%d")
startDate = dateParser(casebyState[0].date)
endDate = dateParser(casebyState[7919].date)
stateList = _.uniqBy(casebyState, d => d.state)
.map(d => d.state)
md `### casebyState2 is filtered by 1st filter`
casebyState2 = casebyState.map( d => (
{
date: dateParser(d.date),
state1: d.state,
case1: d.cases_new
}
)
)
.filter(d => d.state1 == filterState )
md `### casebyState3 is filtered by 2nd filter`
casebyState3 = casebyState.map( d => (
{
date: dateParser(d.date),
state2: d.state,
case2: d.cases_new
}
)
)
.filter(d => d.state2 == filterState2 )
md `### mergedAll is merged all data plus daily cases ( newCase2 ) into a new array`
mergeAll = _.merge(casebyState2, casebyState3, newCase2 )
import {rangeSlider} from "@bumbeishvili/utils"
md `## Choose timeframes below`
md `### Data in table format`
Inputs.table(mergeAllDateFilter.data)
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.
