The avatar for @datagistips
datagistips
Published
Edited
Oct 10, 2021
Fork of Road traffic under COVID restrictions (France) - Overlay (#2)
•
1 fork
Importers
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
f = d3.csv(
"https://raw.githubusercontent.com/CEREMA/data-trafic/main/fr/latest.csv", function(d) {
return {
Zone: d.Zone,
date: new Date(d.date),
ITV: d.ITV === 'NA' ? null : d.ITV, // NA becomes null
ITV: d.ITV === 'NA' ? null : d.IPL,
MGL_ITV: d.MGL_ITV === 'NA' ? null : d.MGL_ITV,
MGL_IPL: d.MGL_IPL === 'NA' ? null : d.MGL_IPL,
};
})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Inputs.table(f)
Insert cell
f[f.length-1]
Insert cell
Insert cell
Insert cell
fr = f.filter(function(d){ return d.Zone == "France" })
Insert cell
fr[fr.length-1]
Insert cell
Insert cell
dates = d3.csv(
"https://raw.githubusercontent.com/CEREMA/data-trafic/main/dates.csv",
d3.autoType)
Insert cell
fr
Insert cell
Insert cell
Insert cell
Insert cell
fr2020 = fr.filter(d => d.date.getFullYear() == 2020)
Insert cell
Insert cell
fr2021 = fr.filter(d => d.date.getFullYear() == 2021)
Insert cell
fr2021[fr2021.length-1]
Insert cell
Insert cell
On prend les dates de 2021, et on les cale sur 2020 grâce à la fonction *updateYear* :
Insert cell
dates2021On2020 = fr2021.map(d=>updateYear(d.date, 2020))
Insert cell
dates2021On2020[dates2021On2020.length-1]
Insert cell
Insert cell
Insert cell
Insert cell
dates2020OK = dates2020
.filter(d=>dates2021On2020
.map(d=>d.valueOf())
.includes(d.valueOf()))
Insert cell
dates2020OK[dates2020OK.length-1]
Insert cell
Insert cell
dates2021OK = dates2020OK.map(d=>updateYear(d, 2021))
Insert cell
fr2021OK = fr2021.filter(function(d) {
return (dates2021OK.map(d=>d.valueOf()).includes(d.date.valueOf()))
})
Insert cell
fr2021OK[fr2021OK.length-1]
Insert cell
fr2020OK = fr2020.filter(function(d) {
return (dates2020OK.map(d=>d.valueOf()).includes(d.date.valueOf()))
})
Insert cell
Insert cell
fr2020OK.length === fr2021OK.length
Insert cell
md`Le jeu de données, pour 2020, comprend maintenant ${fr2020.length - fr2020OK.length} lignes en moins, et le jeu de 2021 ${fr2021.length - fr2021OK.length} lignes en moins.`
Insert cell
Insert cell
data = {
var dates = fr2020OK.map(d=>d.date)
var v2020 = fr2020OK.map(d=>d.MGL_ITV).map(d=>d==='NA'?null:d)
var v2021 = fr2021OK.map(d=>d.MGL_ITV).map(d=>d==='NA'?null:d)
return d3.zip(dates, v2020, v2021)
}
Insert cell
data[data.length-2]
Insert cell
Insert cell
Insert cell
remainingData = {
var lastDate2020 = data[data.length-1][0] // dernière date pour 2020
var dataPoints = fr2020.filter(d=>d.date.valueOf() >= lastDate2020)
return d3.zip(dataPoints.map(d=>d.date),
dataPoints.map(d=>d.MGL_ITV),
dataPoints.map(d=>null))
}
Insert cell
Insert cell
Insert cell
Insert cell
function updateYear(date, year) {
var day = formatDay(date)
var month = formatMonth(date)
return new Date(year + '-' + month + '-' + day)
}
Insert cell
formatDay = function(date) {
return ('0'+date.getDate()).slice(-2)
}
Insert cell
formatMonth = function(date) {
return ('0' + (date.getMonth() + 1)).slice(-2)
}
Insert cell
Insert cell
Date.prototype.addDays = function(days) {
var date = new Date(this.valueOf());
date.setDate(date.getDate() + days);
return date;
}
Insert cell
function getDates(startDate, stopDate) {
var dateArray = new Array();
var currentDate = startDate;
while (currentDate <= stopDate) {
dateArray.push(new Date (currentDate));
currentDate = currentDate.addDays(1);
}
return dateArray;
}
Insert cell
days2020 = getDates(new Date('2020-01-01'), new Date('2020-12-31'))
Insert cell

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