Public
Edited
Jun 9, 2023
import {rangeSlider} from "@mootari/range-slider"
import {Scrubber} from "@mbostock/scrubber"
import {select, radio, slider, checkbox} from "@jashkenas/inputs"
cntry_data_raw = d3.json("https://raw.githubusercontent.com/covid19-data/covid19-data/master/output/cntry_stat_owid.json")
cntry_data = cntry_data_raw.filter(d => d.region !== null)
us_state_data_raw = d3.json("https://raw.githubusercontent.com/covid19-data/covid19-data/master/output/us_state_nyt.json")
us_state_data = us_state_data_raw.map(d => ({
//https://forum.freecodecamp.org/t/parenthesis-wrapped-around-the-object/426725/6
'country_code': d.code,
'country_name': d.name,
'region': "US States",
'confirmed': d.confirmed,
'deaths': d.deaths
}))
data = cntry_data.concat(us_state_data)
// viewof timeSliderT = Inputs.range([0, 255], {step: 1, label:"Favorite number"})
parseTime = d3.timeParse("%Y-%m-%d");
all_dates = data[0]['confirmed'].map(x => parseTime(x[0]))
startDate = d3.timeDay(new Date(2020, 0, 22))
endDate = all_dates[all_dates.length - 1]
formatDate = d3.timeFormat("%Y-%m-%d")
viewof timeSliderT = rangeSlider({
min: 0,
max: d3.timeDay.count(startDate, all_dates[all_dates.length - 1]),
step: 1,
format: date => formatDate(d3.timeDay.offset(startDate, date)),
title: 'Adjust the date range as you need.'
})
viz_data = data.map(d => ({
'country_code': d.country_code,
'country_name': d.country_name,
'population': d.population,
'region': d.region,
'confirmed': d.confirmed.filter(d => new Date(d[0]) < currDateT)
}))
currDateT
viewof currDateT = Scrubber(d3.timeDays(d3.timeDay.offset(startDate, timeSliderT[0]), d3.timeDay.offset(startDate, timeSliderT[1] + 1)), {
autoplay: true,
loop: false,
alternate: false,
initial: 0,
format: date => date.toLocaleString("ko-KO", {year: "numeric", month: "numeric", day: "numeric"}),
delay: 500 - playSpeedT * 100,
})
params = ({
width: 800,
height: 500,
opac_weak: 0.5,
margin: ({top: 25, right: 35, bottom: 35, left: 60}),
xmin: 10,
xmax: 1e8,
ymin: 10,
ymax: 1e7,
});
color = d3.scaleOrdinal(cntry_data.filter(d => d.country_code != 'OWID_WRL').concat(us_state_data).map(d => d.region), ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#17becf"])
viewof yTypeT = radio({
title: 'Show',
options: [
{label: "Confirmed cases", value: 'confirmed' },
{label: "Deaths", value: 'deaths'}
],
value: 'confirmed'
});
x = d3.scaleLog([params.xmin, params.xmax], [params.margin.left, params.width - params.margin.right])
xAxis = g => g
.attr("transform", `translate(0, ${params.height - params.margin.bottom})`)
// how many ticks, or numbers, to show. the ',' i guess is to automatically add ',' in, say, 1000
.call(d3.axisBottom(x).ticks(10, ","))
.call(g => g.append("text")
.attr("font-size", 15)
.attr("x", params.width)
.attr("y", params.margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(`Total ${yTypeT} →`)
)
y = d3.scaleLog([params.ymin, params.ymax], [params.height - params.margin.bottom, params.margin.top])
showAxis = {
const svg = d3.create("svg").attr("width", params.width).attr("height", params.height)
svg.append("g").call(xAxis)
return svg.node()
}
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.
