Published
Edited
Aug 19, 2021
3 stars
dataURL = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv'
md`\`fetch\` is an asyncronous function, it goes to the internet and downloads something. In normal JS it'd just keep executing so that it doesn't block the flow of the program. This makes _some_ JS code _hellishly_ complicated.
Modern JS is pretty great. It had a lot of good features before, but dealing with _promises_ was always a bit of a pain. We can now use \`await\` to assign the result of a promise to a variable, as if we were doing it in python.`
res = await fetch(dataURL);
res_implicit = fetch(dataURL);
raw = res.text();
{
let res = await fetch(dataURL)
let raw = await res.text()
return d3.csvParse(raw)
}
d3 = require('d3-dsv')
data = d3.csvParse(raw)
nsw = data
.filter((d) => d["Country/Region"]=="Australia")
.filter((d) => d["Province/State"]=="New South Wales")[0]
nsw_2 = data
.filter((d) => d["Province/State"]=="New South Wales" && d["Country/Region"]=="Australia")[0]
graphData = {
let dates = [];
let values = [];
for (const k in nsw){
let d = Date.parse(k);
if(!isNaN(d)){
values.push(nsw[k]);
dates.push(new Date(d));
}
}
return {dates, values}
}
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
{
let covidNumbers = {
x: graphData["dates"],
y: graphData["values"],
mode: 'lines',
type: 'scatter'
};
let data = [covidNumbers];
var layout = {
width: width,
title: 'NSW cumulative infection rate',
xaxis: {
title: 'Date',
showgrid: true,
zeroline: false
},
yaxis: {
title: 'Count',
showline: false
}
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
{
let covidNumbers = {
x: graphData["dates"],
y: graphData["values"],
mode: 'lines',
type: 'scatter',
line:{
width:20,
color:"yellow"
}
};
let data = [covidNumbers];
var layout = {
width: width,
plot_bgcolor: "#0300aa",
xaxis: {
visible: false,
},
yaxis: {
visible: false,
}
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
function unpack(rows, key) {
return rows.map((row)=> row[key]);
}
async function csv(url) {
return Plotly.d3.csv.parse((await (await fetch(url)).text()));
}
{
const rows = await csv("https://raw.githubusercontent.com/plotly/datasets/master/2010_alcohol_consumption_by_country.csv");
var data = [{
type: 'choropleth',
locationmode: 'country names',
locations: unpack(rows, 'location'),
z: unpack(rows, 'alcohol'),
text: unpack(rows, 'location'),
autocolorscale: true
}];
var layout = {
title: 'Pure alcohol consumption among adults (age 15+) in 2010',
width: width,
height: width * 0.6,
geo: {
projection: {
type: 'robinson'
}
}
};
const div = DOM.element('div');
Plotly.plot(div, data, layout, {showLink: false});
return div;
}
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.
