24:null 25:["$","title",null,{"children":"Road traffic under COVID restrictions (France) as speed (#1) | datagistips | Observable"}] 2a:T90d,{ const margin = 50 // Margin for the plot let header = html`

Date n%

` // Add phases (Confinement, Déconfinement,...) to header in div#phase d3.select(header) .select('div#phase') .selectAll('div') .data(phases) .join('span') .attr('id', (d,i)=>'span'+i) .text(d=>d) .style('color', 'lightgrey') .style('margin-right', '10px') // SVG main node let svgGroup = d3.select(header).select('svg') let phase = 0; // Before lock down for (let i = 0; i <= (fr.length-6); i ++) { // Indices for each dates let row = fr[i] let MGL = row.MGL_ITV let date = row.date phase = getPhase(date, phase) // Update the header with the date, the ITV and the corresponding phase (Lock down,...) updateHeader( header, parser3(date), // Date MGL, // Taux phase) // Phase index let duration = scaleITV(MGL) * 100 // Transition duration for the dots depends on Indice // Now, the little rectangles for (let j = 0; j < nRects; j++) { // Iterate over rectangles (number : nRects) // Set transition between rectangles const t = svgGroup.transition() .duration(duration) .delay(Math.random() * 100) // Random delay between each rectangle const widthRect = 12 const heightRect = 10 // Rectangles svgGroup.append("rect") .attr("width", widthRect) .attr("height", heightRect) .attr("x", 0) .attr("y", scaleY(j)) .attr("fill", MGL < 0 ? "blue" : "red") .attr("fill-opacity", Math.abs(MGL) + 0.4) .transition(t) // Now, the transition .attr("x", width) // Rectangles flow and disappear at the right corner .remove() // See above } yield header // Asynchronous rendering (in combination with await Promises) await Promises.delay(duration * 0.03) // Introduce a delay between each load } }2b:[] 28:{"id":"55f43acca6cb5882","slug":"road-traffic-under-covid-restrictions-france-with-speed","title":"Road traffic under COVID restrictions (France) as speed (#1)","thumbnail":"f95fe8fa07a273288d626f1063f2019f1848ed4d1f17b20a4be20c3858d9662a","access_level":"public","create_time":"$D2021-09-30T20:01:01.400Z","update_time":"$D2021-10-12T08:35:56.870Z","view_time":null,"first_public_time":"$D2021-10-01T08:29:43.360Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"56ae9e485519d9ea","login":"datagistips","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a2630d6559fd2ae8f5f8101933508368aef9cccbac53f97a4cbe19f60a3695d6","tier":"starter_2024"},"version":2688,"publish_version":2688,"role":null,"authored":false,"authors":[{"type":"individual","id":"1be989cdaf38ac83","login":"datagistips","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a2630d6559fd2ae8f5f8101933508368aef9cccbac53f97a4cbe19f60a3695d6","tier":null}],"members":[{"type":"individual","id":"1be989cdaf38ac83","login":"datagistips","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a2630d6559fd2ae8f5f8101933508368aef9cccbac53f97a4cbe19f60a3695d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Road traffic under COVID restrictions (France) as speed (#1)","cells":[{"id":1806,"value":"# Road traffic under COVID restrictions (France) as speed (#1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2120,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"This animation aims at making you **get a feeling** of the evolution of traffic, through acceleration and deceleration.\n\nIt is based on Traffic Indices in France, which **compare traffic to a pre-COVID19 crisis period**.\n\nThe indices are between -100% and 100%. Negative indices indicate that traffic is lower than in the pre-crisis situation and appear with lockdowns. Positive values appear with the end of curfews.\n\n- *Color* : Red ■ indicate Higher than usual traffic, Blue ■ indicate Lower than usual traffic \n- *Speed* : the speed of dots depends on Traffic :\nRed ■ are faster than the blue ■ \n- *Opacity* : Transparency means lower intensity, intensity being the absolute value of the indice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1426,"value":"---\n## Data & references\n- [dataviz.cerema.fr/trafic-routier](https://dataviz.cerema.fr/trafic-routier/)\n- [Cerema Github repo with Data](https://github.com/cerema/data-trafic)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"### Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"Number of rectangles in vertical position, from the left :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"nRects = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"Height of the graphics :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"height = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"### Read Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"import {fr, dates} from '@datagistips/road-traffic-data'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"There is also a file for the key dates : lock down, end of curfew,...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"### Key dates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2152,"value":"phases = ['Avant le confinement']\n.concat(dates.map(d=>d.evenement))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"datesConfinement = dates.filter(function(d) {return d.evenement.match(\"^(Rec|C)onfinement\")}).map(d=>d.date).map(d=>parser(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"datesDeconfinement = dates.filter(function(d) {return d.evenement.match(\"^Déconfinement\")}).map(d=>d.date).map(d=>parser(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"dateFin = parser(dates.filter(function(d) {return d.evenement.match(\"Fin du couvre-feu\")}).map(d=>d.date)[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"### Scale for the Y position of the rectangles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2602,"value":"scaleY positions the rectangles along the Y axis. You can set height for a taller plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"scaleY = d3.scaleLinear()\n .domain([0, nRects]) // nCircles\n .range([0, height]) // hauteur du graphique","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"scaleY(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"### Scale for the All-Vehicle Index","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"minITV = d3.min(fr, d=>d.ITV)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2060,"value":"minMGL = Math.min(...fr.filter(d=>d.MGL_ITV!=\"NA\").map(d=>d.MGL_ITV))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"maxITV = d3.max(fr, d=>d.ITV)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2084,"value":"maxMGL = Math.max(...fr.map(d=>d.MGL_ITV).filter(d=>d!==\"NA\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"scaleITV = d3.scaleLinear()\n.domain([minMGL, maxMGL])\n.range([100, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"ScaleITV is used for speed and opacity : the lower the index, the longer will be the transition.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"### Parsers for dates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"parser = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"parser(dates[0].date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"parser2 = d3.timeFormat(\"%e %B %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"parser2(dates[0].date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2519,"value":"parser3 = d3.timeFormat(\"%d-%m-%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2342,"value":"## Various functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2392,"value":"Function which returns the index corresponding to the phase (lock down, etc...) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2261,"value":"getPhase = function(date, phase) {\n let dateParsed = parser(date)\n \n if(dateParsed === datesConfinement[0]) {\n phase = 1\n } else if(dateParsed === datesDeconfinement[0]) {\n phase = 2\n } else if(dateParsed === datesConfinement[1]) {\n phase = 3\n } else if(dateParsed === datesDeconfinement[1]) {\n phase = 4\n } else if (dateParsed === datesDeconfinement[2]){\n phase = 5\n } else if (dateParsed === dateFin) {\n phase = 6\n }\n return phase\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"Function which updates the header :","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2234,"value":"updateHeader = function(bloc, date, itv, phase) {\n // Change date\n d3.select(bloc).select('span#date').text(date)\n \n // Change ITV\n d3.select(bloc)\n .select('div')\n .select('span#itv')\n .text(Math.round(itv*100) + ' %')\n .style('color', itv < 0 ? 'blue' : 'red')\n \n // Enhance phase\n d3.select(bloc)\n .select('div#phase')\n .selectAll('span')\n .style('color', 'lightgrey') // Reinit all spans to grey\n \n d3.select(bloc)\n .select('div#phase')\n .selectAll('#span' + phase) // ex. #span1 corresponds to the 'Lock down' span\n .style('color', 'black') // Set surrent phase to black\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2037,"value":"## TODO\n- Utiliser append\n- Simplifier la gestion des dates : comparaison aux dates de confinement / déconfinement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2039,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2b","stdlib":"1","titling":"auto"}} 29:"$28:body"