Temporal data / antonbardera

Assistant professor in the Universitat de Girona. In Fundació Visualització per a la Transparència (ViT). In Master’s Degree in Visual Tools to Empower Citizens.

Workspace

Published

2020-21 MVTEC Dataviz programming course

Edited

Nov 1, 2020

3 forks

2020-21 MVTEC Dataviz programming course

date1 = new Date(); //returns the current date/time

date2 = new Date("09/13/2020");

md`Date: ${date2.toDateString()}`

strDate = "20200913";

date3wrong = new Date("20200913");

dt1 = parseInt(strDate.substring(6,8))

strDate.substring(6,8)

date3init = {

var dt1 = parseInt(strDate.substring(6,8));

var mon1 = parseInt(strDate.substring(4,6));

var yr1 = parseInt(strDate.substring(0,4));

var date = new Date(yr1, mon1-1, dt1); //Warning with the month!!!!

return date;

}

dateCreator = function(str){

var dt1 = parseInt(str.substring(6,8));

var mon1 = parseInt(str.substring(4,6));

var yr1 = parseInt(str.substring(0,4));

var date = new Date(yr1, mon1-1, dt1);

return date;

};

date3 = dateCreator(strDate);

md`Date: ${date3.toDateString()}`

desiredData = OxCGRTdata.filter(d => d.CountryName === "Italy")

.map(d => {return {

date : dateCreator(d.Date),

cases : +d.ConfirmedCases,

deaths : +d.ConfirmedDeaths

};}

);

x = d3.scaleUtc()

.domain(d3.extent(desiredData, d => d.date))

.range([margin.left, width - margin.right])

x2 = d3.scaleTime()

.domain(d3.extent(desiredData, d => d.date))

.range([margin.left, width - margin.right])

p = d3.line()([[10, 60], [40, 90], [60, 10], [190, 10]]);

lineCases = d3.line()

.defined(d => !isNaN(d.date) && !isNaN(d.cases))

.x(d => x(d.date))

.y(d => y(d.cases))

lineDeaths = d3.line()

.defined(d => !isNaN(d.date))

.x(d => x(d.date))

.y(d => y(d.deaths))

y = d3.scaleLinear()

.domain([0, d3.max(desiredData, d => d.cases)]).nice()

.range([height - margin.bottom, margin.top])

temporalchart = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", lineCases);

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", lineDeaths);

return svg.node();

}

line = key => {return d3.line()

.defined(d => !isNaN(d.date) && !isNaN(d[key]) )

.x(d => x(d.date)) //.x(d => x(d['date']))

.y(d => y(d[key]))}

{

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line('cases'));

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line('deaths'));

return svg.node();

}

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x)

.ticks(width / 80)

.tickSizeOuter(0))

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y))

.call(g => g.select(".domain").remove())

.call(g => g.select(".tick:last-of-type text").clone()

.attr("x", 3)

.attr("text-anchor", "start")

.attr("font-weight", "bold")

.text("Total number of cases/deaths"))

temporalchartwithaxis = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line('cases'));

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line('deaths'));

return svg.node();

}

area = d3.area()

.x(d => x(d.date))

.y0(d => y(0))

.y1(d => y(d.deaths))

areachart = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line('cases'));

svg.append("path")

.datum(desiredData)

.attr("fill", 'steelblue')

.attr("d", area)

return svg.node();

}

dataGroup = d3.groups(desiredCountryData, d => d.country)

xmultiAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(xmulti).ticks(width / 80).tickSizeOuter(0))

ymultiAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(ymulti))

.call(g => g.select(".domain").remove())

.call(g => g.select(".tick:last-of-type text").clone()

.attr("x", 3)

.attr("text-anchor", "start")

.attr("font-weight", "bold")

.text("Total number of cases"))

xmulti = d3.scaleTime()

.domain(d3.extent(desiredCountryData, d => d.date))

.range([margin.left, width - margin.right])

ymulti = d3.scaleLinear()

.domain([0, d3.max(desiredCountryData, d => d.cases)]).nice()

.range([height - margin.bottom, margin.top])

d3.schemeCategory10

colorScale = d3.scaleOrdinal(dataGroup.map(d=> d[0]), d3.schemeCategory10)

dataGroup.map(d=> d[0])

colorScale("Canada")

lineMultiCases = d3.line()

.defined(d => !isNaN(d.date))

.x(d => xmulti(d.date))

.y(d => ymulti(d.cases))

multilinechart = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.append("g")

.call(xmultiAxis);

svg.append("g")

.call(ymultiAxis);

svg.selectAll('.line')

.data(dataGroup)

.join('path')

.attr("class", "line")

.attr("d", d => lineMultiCases(d[1]))

.attr("stroke", d => colorScale(d[0]))

.style("fill", "none")

.style("stroke-width", 1);

let legend = svg.selectAll(".legend")

.data(dataGroup)

.enter();

legend

.append('text')

.text(d => d[0])

.attr('x', legendOrigin[0] + labelHeight * 1.2)

.attr('y', (d,i) => legendOrigin[1] + labelHeight + labelHeight * 1.2 *i)

.style('font-family', 'sans-serif')

.style('font-size', `${labelHeight-3}px`);

legend

.append('rect')

.attr('x', legendOrigin[0])

.attr('y', (d,i) => legendOrigin[1] + labelHeight * 1.2 * i)

.attr('width', labelHeight)

.attr('height', labelHeight)

.attr('fill', d => colorScale(d[0]))

.attr('stroke', 'grey')

.style('stroke-width', '1px');

return svg.node();

}

legendOrigin = [100,50];

labelHeight = 15;

weather = (await require('vega-datasets@1'))['weather.csv']()

weather[2000]

margin = ({top: 20, right: 30, bottom: 30, left: 60})

d3 = require("d3@6");

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.

Learn more