3f:null 40:["$","title",null,{"children":"Fietsen in 2020 | Tom van Tilburg | Observable"}] 46:T411,intro = md`

Op de website van het NDW kan je van een paar plekken in Nederland recente fiets-tellingen downloaden. Van een zo'n plek (een fietspad tussen Rotterdam en Delft) heb ik een jaar aan data binnengehaald om te kijken wat voor informatie er in zit. Hoewel er behoorlijk wat locaties beschikbaar zijn duurt het even voordat je er een gevonden hebt waarin (bijna) een jaar aan continue data zonder gaten zit. In dit geval is het een inductielus langs de Rotterdamseweg die vanaf 6 januari een continue meetreeks levert van verkeer beide kanten op. Hoewel je de data ook per minuut kunt binnenhalen heb ik voor uurwaardes gekozen omdat die iets behapbaarder zijn in de analyse en een minuutniveau waarschijnlijk niet heel veel toevoegt aan het totaalbeeld van een jaar.`47:T5b4,regression = function (data,param,xtitle){ return vl.layer( vl.markPoint({opacity:0.1,filled:true}).encode( vl.x().fieldQ(param).title(xtitle), vl.y().fieldQ("intensiteit_oplopend").title("Aantal passages") ).title(""), /* vl.markLine().title("") .encode( vl.x().fieldQ(param), vl.y().mean("intensiteit_oplopend").title("") ), vl.markErrorband({ extent: "stdev" }).title("") .encode( vl.x().fieldQ(param), vl.y().mean("intensiteit_oplopend").title("") ), */ vl.markLine({color: "firebrick",strokeDash: [5, 5]}) .transform( vl.loess("intensiteit_oplopend").on(param).as('rx','ry') //vl.groupby("tempint").aggregate(vl.mean("intensiteit_oplopend").as("mean_pass")), //vl.regression("mean_pass").on("tempint").method('quad').as('rx','ry') ) .encode( vl.x().fieldQ("rx").title(""), vl.y().fieldQ("ry") ) /*, vl.markText({"color": "firebrick","x": "width", "align": "right", "y": -5}).title("") .transform( vl.groupby(param).aggregate(vl.mean("intensiteit_oplopend").as("mean_pass")), vl.regression("mean_pass").on(param).method('quad').params(true), vl.calculate("'R²: '+format(datum.rSquared, '.2f')").as("R2") ) .encode( vl.text().fieldN("R2") )*/ ) .data(data) .width(200) .height(200) //.render() }48:T2130,// A spiral heatmap // The following options are available // radius: radius of the overall plot, not including any labels. Default 250 // holeRadiusProportion: the proportion (0 to 1) of the radius (see above) that is left as a hole. Default 0. // arcsPerCoil: a 'coil' is one revolution of the spiral. This sets how many arcs (or arcs) you want per coil. Typically this would // be set according to the periodicity of the data. For example, 12 for months per year, 24 for hours per day, etc // coilPadding: the proportion (0 to 1) of the coil width that is used for padding between coils. Useful for making the spiral very noticeable // arcLabel: the field name to use for the labels around the circumference // coilLabel: the field name to use for the labels at the beginning of each coil spiralHeatmap = function () { // constants const radians = 0.0174532925 // All options that are accessible to caller // Default values var radius = 250 var holeRadiusProportion = 0.3 // proportion of radius var arcsPerCoil = 12 // assuming months per year var coilPadding = 0 // no padding var arcLabel = '' // no labels var coilLabel = '' // no labels function chart (selection) { selection.each(function (data) { const arcAngle = 360 / arcsPerCoil const labelRadius = radius + 20 var arcLabelsArray = [] for (var i = 0; i < arcsPerCoil; i++) { arcLabelsArray.push(i) } // Create/update the x/y coordinates for the vertices and control points for the paths // Stores the x/y coordinates on the data updatePathData(data) let thisSelection = d3 .select(this) .append('g') .attr('class', 'spiral-heatmap') var arcLabelsG = thisSelection .selectAll('.arc-label') .data(arcLabelsArray) .enter() .append('g') .attr('class', 'arc-label') arcLabelsG .append('text') .text(function (d) { return data[d][arcLabel] }) .attr('x', function (d, i) { let labelAngle = i * arcAngle + arcAngle / 2 return x(labelAngle, labelRadius) }) .attr('y', function (d, i) { let labelAngle = i * arcAngle + arcAngle / 2 return y(labelAngle, labelRadius) }) .style('text-anchor', function (d, i) { return i < arcLabelsArray.length / 2 ? 'start' : 'end' }) arcLabelsG .append('line') .attr('x2', function (d, i) { let lineAngle = i * arcAngle let lineRadius = chartRadius + 10 return x(lineAngle, lineRadius) }) .attr('y2', function (d, i) { let lineAngle = i * arcAngle let lineRadius = chartRadius + 10 return y(lineAngle, lineRadius) }) var arcs = thisSelection .selectAll('.arc') .data(data) .enter() .append('g') .attr('class', 'arc') arcs.append('path').attr('d', function (d) { // start at vertice 1 let start = 'M ' + d.x1 + ' ' + d.y1 // inner curve to vertice 2 let side1 = ' Q ' + d.controlPoint1x + ' ' + d.controlPoint1y + ' ' + d.x2 + ' ' + d.y2 // straight line to vertice 3 let side2 = 'L ' + d.x3 + ' ' + d.y3 // outer curve vertice 4 let side3 = ' Q ' + d.controlPoint2x + ' ' + d.controlPoint2y + ' ' + d.x4 + ' ' + d.y4 // combine into string, with closure (Z) to vertice 1 return start + ' ' + side1 + ' ' + side2 + ' ' + side3 + ' Z' }) // create coil labels on the first arc of each coil let coilLabels = arcs .filter(function (d) { return d.arcNumber == 0 }) .raise() coilLabels .append('path') .attr('id', function (d) { return 'path-' + d[coilLabel] }) .attr('d', function (d) { // start at vertice 1 let start = 'M ' + d.x1 + ' ' + d.y1 // inner curve to vertice 2 let side1 = ' Q ' + d.controlPoint1x + ' ' + d.controlPoint1y + ' ' + d.x2 + ' ' + d.y2 return start + side1 }) .style('opacity', 0) coilLabels .append('text') .attr('class', 'coil-label') .attr('x', 3) .attr('dy', -4) .append('textPath') .attr('xlink:href', function (d) { return '#path-' + d[coilLabel] }) .text(function (d) { return d[coilLabel] }) }) function updatePathData (data) { let holeRadius = radius * holeRadiusProportion let arcAngle = 360 / arcsPerCoil let dataLength = data.length let coils = Math.ceil(dataLength / arcsPerCoil) // number of coils, based on data.length / arcsPerCoil let coilWidth = chartRadius * (1 - holeRadiusProportion) / (coils + 1) // remaining chartRadius (after holeRadius removed), divided by coils + 1. I add 1 as the end of the coil moves out by 1 each time data.forEach(function (d, i) { let coil = Math.floor(i / arcsPerCoil) let position = i - coil * arcsPerCoil let startAngle = position * arcAngle let endAngle = (position + 1) * arcAngle let startInnerRadius = holeRadius + i / arcsPerCoil * coilWidth let startOuterRadius = holeRadius + i / arcsPerCoil * coilWidth + coilWidth * (1 - coilPadding) let endInnerRadius = holeRadius + (i + 1) / arcsPerCoil * coilWidth let endOuterRadius = holeRadius + (i + 1) / arcsPerCoil * coilWidth + coilWidth * (1 - coilPadding) // vertices of each arc d.x1 = x(startAngle, startInnerRadius) d.y1 = y(startAngle, startInnerRadius) d.x2 = x(endAngle, endInnerRadius) d.y2 = y(endAngle, endInnerRadius) d.x3 = x(endAngle, endOuterRadius) d.y3 = y(endAngle, endOuterRadius) d.x4 = x(startAngle, startOuterRadius) d.y4 = y(startAngle, startOuterRadius) // CURVE CONTROL POINTS let midAngle = startAngle + arcAngle / 2 let midInnerRadius = holeRadius + (i + 0.5) / arcsPerCoil * coilWidth let midOuterRadius = holeRadius + (i + 0.5) / arcsPerCoil * coilWidth + coilWidth * (1 - coilPadding) // MID POINTS, WHERE THE CURVE WILL PASS THRU d.mid1x = x(midAngle, midInnerRadius) d.mid1y = y(midAngle, midInnerRadius) d.mid2x = x(midAngle, midOuterRadius) d.mid2y = y(midAngle, midOuterRadius) d.controlPoint1x = (d.mid1x - 0.25 * d.x1 - 0.25 * d.x2) / 0.5 d.controlPoint1y = (d.mid1y - 0.25 * d.y1 - 0.25 * d.y2) / 0.5 d.controlPoint2x = (d.mid2x - 0.25 * d.x3 - 0.25 * d.x4) / 0.5 d.controlPoint2y = (d.mid2y - 0.25 * d.y3 - 0.25 * d.y4) / 0.5 d.arcNumber = position d.coilNumber = coil }) return data } function x (angle, radius) { // change to clockwise let a = 360 - angle // start from 12 o'clock a = a + 180 return radius * Math.sin(a * radians) } function y (angle, radius) { // change to clockwise let a = 360 - angle // start from 12 o'clock a = a + 180 return radius * Math.cos(a * radians) } function chartWH (r) { return r * 2 } } chart.radius = function (value) { if (!arguments.length) return radius radius = value return chart } chart.holeRadiusProportion = function (value) { if (!arguments.length) return holeRadiusProportion holeRadiusProportion = value return chart } chart.arcsPerCoil = function (value) { if (!arguments.length) return arcsPerCoil arcsPerCoil = value return chart } chart.coilPadding = function (value) { if (!arguments.length) return coilPadding coilPadding = value return chart } chart.arcLabel = function (value) { if (!arguments.length) return arcLabel arcLabel = value return chart } chart.coilLabel = function (value) { if (!arguments.length) return coilLabel coilLabel = value return chart } return chart }49:[{"id":"cc3d7fa48b9c36de20b6cb466cd9b66c673917be7079ef4027ff015fcf147cc495c65ea3cbb67b77a368d5f425989290f0e42fec087fe45a4264afa4d708aecb","href":"https://static.observableusercontent.com/files/cc3d7fa48b9c36de20b6cb466cd9b66c673917be7079ef4027ff015fcf147cc495c65ea3cbb67b77a368d5f425989290f0e42fec087fe45a4264afa4d708aecb","name":"fiets-data-export2020.csv","type":"text/csv","lastModified":1609154438439.235,"size":1711518},{"id":"251163ab72a5fe7144a9b201c7d74e774fcf4e735ede8699b72e56098f5b46c30c38d09bb2fdbc9de179f832dbbf31e1c6b79b11cbbec0852f80f31792999cb3","href":"https://static.observableusercontent.com/files/251163ab72a5fe7144a9b201c7d74e774fcf4e735ede8699b72e56098f5b46c30c38d09bb2fdbc9de179f832dbbf31e1c6b79b11cbbec0852f80f31792999cb3","name":"image@1.png","type":"image/png","lastModified":1612452588643.152,"size":822564},{"id":"2b438ef277407d82a06efef4a1c2f159290b4e36917dac8d97178b299e7077e311f09178d12fa75651ea625fb1da96b694f70f99a00d233576afd1ac90b14057","href":"https://static.observableusercontent.com/files/2b438ef277407d82a06efef4a1c2f159290b4e36917dac8d97178b299e7077e311f09178d12fa75651ea625fb1da96b694f70f99a00d233576afd1ac90b14057","name":"image.png","type":"image/png","lastModified":1611175455874.435,"size":166935},{"id":"25f9d686afbc131ca5bf4c0b8d1fe67e5110b5960872dce3fcb8a7d5fdb741b98ca6f1a49e52942e9d53dc23101e75b304aac9b7cd80ac8b3538fde62f80bae7","href":"https://static.observableusercontent.com/files/25f9d686afbc131ca5bf4c0b8d1fe67e5110b5960872dce3fcb8a7d5fdb741b98ca6f1a49e52942e9d53dc23101e75b304aac9b7cd80ac8b3538fde62f80bae7","name":"knmi_343_2020@4.tsv","type":"text/tab-separated-values","lastModified":1609276277545.681,"size":1341724},{"id":"4a2e5f7ab0e7bbd425841b88cf7c662b9b5f1533d5b12974c1dc285c889ed869b2d73fb1b7738c963048d92d7c136cbf9eaeb27a7252f43b9794c57755618b59","href":"https://static.observableusercontent.com/files/4a2e5f7ab0e7bbd425841b88cf7c662b9b5f1533d5b12974c1dc285c889ed869b2d73fb1b7738c963048d92d7c136cbf9eaeb27a7252f43b9794c57755618b59","name":"knmi_343_2019@1.tsv","type":"text/tab-separated-values","lastModified":1609412281625.183,"size":1349117},{"id":"946b4af5852b7b6796245d99945d2994f7cb9906de5e4c6376b776f2ef7faf09549a75f3a118ea23dc656051d3f08b1a56c50a977f27a81d5a871640ed7719f9","href":"https://static.observableusercontent.com/files/946b4af5852b7b6796245d99945d2994f7cb9906de5e4c6376b776f2ef7faf09549a75f3a118ea23dc656051d3f08b1a56c50a977f27a81d5a871640ed7719f9","name":"RDH03_LG04_2019.csv","type":"text/csv","lastModified":1609676282165.524,"size":2093116}] 44:{"id":"0ff6d70798f40710","slug":"fietsen-in-2020","title":"Fietsen in 2020","thumbnail":"34546bad09370ac0ea30ff38747beb37384618963b05f84107a2f7361cc7cea9","access_level":"public","create_time":"$D2020-12-28T10:42:15.148Z","update_time":"$D2023-06-21T08:32:55.866Z","view_time":null,"first_public_time":"$D2021-01-04T15:40:47.466Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b647bc22a67ec061","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":"starter_2024","bio":"","following":false},"version":1650,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a7a260a29251abf","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"fd7dd305c55a284f","login":"corentink","name":"Corentin Kuster","avatar_url":"https://avatars-next.observableusercontent.com/6fcebed76188077da03b072d8f7f38935191565ec99ce1830eeb998e9757a2d9","tier":null,"role":"editor"},{"type":"individual","id":"a140b603ada6b5a8","login":"tebben","name":"Tim Ebben","avatar_url":"https://avatars-next.observableusercontent.com/8b5cc97cf64271ffa70fce56e7c014ec00960070eeca17a68867b936a21cee7a","tier":null,"role":"editor"},{"type":"individual","id":"6a7a260a29251abf","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fietsen in 2020","cells":[{"id":0,"value":"titel = md`# Fietsen in 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"tel_lus = md`Overigens ziet de locatie van de tel-lus er vermoedelijk zo uit:

\nOpvallend is dat de kast waar het signaal wordt doorgegeven in de tuin van het huis ernaar lijkt te staan.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"fietsdata_tabel_text = md`De gegevens zien er als volgt uit. De enige data die wijzigt is de tijd en het aantal passages, de rest is metadata.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"fietsdata_tabel = printTable(fietsdata2020.slice(9,15), Object.keys(fietsdata2020[0]).slice(0,19), null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"aantal_passages = vl.markPoint({filled:true,opacity:0.2}).data(fietsdata2020)\n .encode(\n vl.x().fieldT(\"date\").title(\"Datum\"),\n vl.y().fieldQ(\"intensiteit_beide_richtingen\").title(\"Aantal passages\"),\n //vl.color().fieldQ(\"intensiteit_oplopend\")\n // .scale({domain: domainIntensiteit, scheme: \"redyellowgreen\"}),\n vl.tooltip().fieldT(\"date\")\n )\n .width(900)\n .render() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"aantal_passages_text = md`In bovenstaande scattergraph zie je in principe wel alle data maar het is lastig om ook echte informatie eruit te halen. Ik heb data daarom samen proberen te vatten in een aantal andere grafieken. 2020 is verder natuurlijk een gek data-jaar omdat we door de impact van de Corona crisis heel anders leven dan we gewend zijn. In het ideale geval zouden we kunnen vergelijken met dat uit voorgaande jaren maar omdat die slechts sporadisch beschikbaar zijn heb ik geprobeerd om wat meer aanknopingspunten te vinden door de fiets-tellingen te combineren met andere gegevens. Onderstaande drie visualisaties leggen dat uit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"meest_gefietst_text = md`## Op welke dagen is er het meest gefietst?\nOnderstaande heatmap geeft weer hoeveel fietsers er over een hele dag langs zijn gekomen. Geel is veel en blauw is weinig. De rood omrande hokjes zijn dagen waar iets speciaals mee aan de hand zijn, je krijgt dat te zien door er met de muis overheen te bewegen.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"meest_gefietst_heatmap = vl\n.layer(\n vl.markRect().data(fietsdata2020)\n .encode(\n vl.x().fieldN(\"week\").title(\"Week\"),\n vl.y().fieldN(\"dayname\").sort(\"dow\").title(\"\"), \n vl.stroke().max(\"intensiteit_oplopend\")\n .scale({ scheme: \"viridis\"}),\n vl.color().max(\"intensiteit_oplopend\")\n .scale({ scheme: \"viridis\"}),\n vl.tooltip().fieldN(\"dateday\")\n ),\n vl.markRect({fillOpacity: 0}).data(coronatijdlijn).encode(\n vl.x().fieldN(\"week\").title(\"Week\"),\n vl.y().fieldN(\"dayname\").sort(\"dow\").title(\"\"), \n vl.stroke().value(\"red\"),\n vl.tooltip().fieldN(\"label\")\n )\n )\n.width(700)\n .height(200)\n .render() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"meest_gefietst_uitleg = md`Wat opvalt is dat er een omslag zit tussen week en weekend fietsers in het voorjaar. In januari en februari zijn er vrijwel geen mensen die voor hun plezier in het weekend fietsen (het is een lange weg langs het water) forensen zich tijdends de weekdagen kennelijk nog wel verplaatsen. Zodra de scholen echter gesloten worden op 16 maart zie je dat steeds meer mensen in het weekend kan fietsen. Het zal ongetwijfeld met het verbeterde weer te maken hebben maar wellicht willen we ook meer naar buiten als het kan vanwege de 'gedeeltelijke lockdown'. Dat laatste lijkt ook wel uit het feit dat er massaal gefietst wordt op de eerste mooie lentedag in het weekend op 9 mei en ook op Hemelvaartsdag is het druk.\nTenslotte zien we nog een opleving in het fietsverkeer als de scholen weer open gaan aan het einde van de zomervakantie `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"/*vl\n.layer(\n vl.markRect().data(combineddata)\n .encode(\n vl.x().fieldN(\"week\").title(\"Week\"),\n vl.y().fieldN(\"dayname\").sort(\"dow\").title(\"\"), \n vl.stroke().max(\"tempint\")\n .scale({ scheme: \"viridis\"}),\n vl.color().max(\"tempint\")\n .scale({ scheme: \"viridis\"}),\n vl.tooltip().fieldN(\"tempint\")\n )\n\n )\n.width(700)\n .height(200)\n .render() */","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"fietsen_we_meer = md`### Fietsen we meer als het warm weer is?\n\nEen beetje.\n\nEr is zit verschil tussen warm en koud weer. Hieronder zie je het gemiddeld aantal passages voor elke hele graad in temperatuur. Daarbij zijn alleen uren tussen 7 uur 's ochtens en zes uur 's avonds gebruikt, omdat je anders een onevenredige bijdrage krijgt van de nachten waarin het wel altijd kouder is maar ook nooit iemand fietst.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"viewof dayselect = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"viewof selecteddows = checkbox({\n title: \"Dagen\",\n description: \"Kies de weekdagen om mee te nemen\",\n options: [\n { value: 1, label: \"Maandag\" },\n { value: 2, label: \"Dinsdag\" },\n { value: 3, label: \"Woensdag\" },\n { value: 4, label: \"Donderdag\" },\n { value: 5, label: \"Vrijdag\" },\n { value: 6, label: \"Zaterdag\" },\n { value: 7, label: \"Zondag\" }\n ],\n value: [1,2,3,4,5],\n submit: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"selecteddows.indexOf(\"4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"grafiek_weer = {\n let data = combineddata.filter(d=>d.date.getHours()>=6 && d.date.getHours()<=18 && selecteddows.indexOf(d.dow.toString()) > -1)\n return vl.vconcat(\n vl.hconcat(\n regression(data,\"temp\",\"Temperatuur (Celsius)\"),\n regression(data,\"wind\",\"Windsnelheid (m/s)\")\n ),\n vl.hconcat(\n regression(data.filter(d=>d.rain < 2),\"rain\",\"Neerslag\"),\n regression(data,\"globrad\",\"Zonneschijn (J/cm²)\")\n )\n )\n .render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"selecteddows","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"domainIntensiteit = [0,d3.max(fietsdata2020,d=>parseInt(d.intensiteit_oplopend))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"mutable combineddata_week = combineddata.filter(d=>d.week==23)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"grafiek_intensiteit = vl.data(combineddata_week) \n .encode(\n vl.x().fieldT(\"date\").title(\"Datum\"),\n )\n.layer(\n \n vl.markBar().encode(\n vl.y().fieldQ(\"intensiteit_oplopend\")\n .scale({ domain: domainIntensiteit }).title(\"Aantal fietspassages\"), \n vl.color().fieldQ(\"intensiteit_oplopend\")\n .scale({domain: domainIntensiteit, scheme: \"redyellowgreen\"}),\n vl.tooltip().fieldN(\"Name\")\n ),\n vl.markLine().encode(\n vl.y().fieldQ(\"globrad\")\n //.scale({domain:[-5,35]}).title(\"Temperatuur\")\n //.scale({domain:[0,100]}).title(\"Windsnelheid\")\n )\n )\n .resolve({\"scale\": {\"y\": \"independent\"}})\n .render() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"chart = {\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", chartWidth + margin + margin)\n .attr(\"height\", chartHeight + margin + margin);\n\n const g = svg\n .append(\"g\")\n .attr(\n \"transform\",\n \"translate(\" + (margin + chartRadius) + \",\" + (margin + chartRadius) + \")\"\n );\n\n g.datum(fietsdata2020).call(heatmap);\n\n g.selectAll(\".arc\")\n .selectAll(\"path\")\n .style(\"fill\", function(d) {\n return colour(d.intensiteit_oplopend);\n }).on('mouseover',handleMouseover);\n\n g.selectAll('text').attr(\"font-size\", \"10px\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"handleMouseover = function(e,datum){\n console.log(datum.week);\n mutable combineddata_week = combineddata.filter(d=>d.week == datum.week);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"weatherchart(weatherdata2020)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"weatherchart(weatherdata2019)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"weatherchart = function(data){\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", chartWidth + margin + margin)\n .attr(\"height\", chartHeight + margin + margin);\n\n const g = svg\n .append(\"g\")\n .attr(\n \"transform\",\n \"translate(\" + (margin + chartRadius) + \",\" + (margin + chartRadius) + \")\"\n );\n\n g.datum(data).call(heatmap);\n\n g.selectAll(\".arc\")\n .selectAll(\"path\")\n .style(\"fill\", function(d) {\n return raincolour(d.temp);\n });\n\n g.selectAll('text').attr(\"font-size\", \"10px\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"chartWidth = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chartHeight = chartWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"chartRadius = chartWidth / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"margin = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"heatmap = spiralHeatmap()\n .radius(chartRadius)\n .holeRadiusProportion(0.2)\n .arcsPerCoil(168)\n .coilPadding(0.01)\n //.arcLabel(\"hour\")\n //.coilLabel(\"week\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"coronatijdlijn = [{\n date: d3.timeParse(\"%Y%m%d\")(\"20200301\"),\n label: 'Persconferentie. Nieuwe maatregelen: thuiswerken en evenementen afgelast'\n},{\n date: d3.timeParse(\"%Y%m%d\")(\"20200316\"),\n label: 'Scholen gesloten'\n},{\n date: d3.timeParse(\"%Y%m%d\")(\"20200509\"),\n label: 'KNMI: \"op 9 mei werd het in het midden en zuiden plaatselijk zomers warm (25 °C of meer)\"'\n},{\n date: d3.timeParse(\"%Y%m%d\")(\"20200521\"),\n label: 'Hemelvaartsdag'\n},{\n date: d3.timeParse(\"%Y%m%d\")(\"20200601\"),\n label: 'Versoepeling maatregelen',\n description: ''\n},{\n date: d3.timeParse(\"%Y%m%d\")(\"20200831\"),\n label: 'Einde zomervakantie, scholen beginnen weer'\n},{\n date: d3.timeParse(\"%Y%m%d\")(\"20201014\"),\n label: 'Start gedeeltelijke lockdown'\n}].map(d=>{\n d.week = d3.timeFormat(\"%W\")(d.date);\n d.dayname = d3.timeFormat(\"%a\")(d.date);\n return d;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"//RDH03_DT12_2020.csv\nfietsdata2020 = FileAttachment(\"fiets-data-export2020.csv\").csv()\n .then(parseFietsdata)\n .then(data=>data.map(addDateParams))\n .then(data=>data.filter(d=>d.begintijd > \"2020-01-05 00:00:00\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"fietsdata2019 = FileAttachment(\"RDH03_LG04_2019.csv\").csv()\n .then(parseFietsdata)\n .then(data=>data.map(addDateParams))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"weatherdata2020 = FileAttachment(\"knmi_343_2020@4.tsv\").csv()\n .then(parseWeatherdata)\n .then(data=>data.filter(d=>d.date > d3.timeParse(\"%Y-%m-%d %H:%M:%S\")(\"2020-01-06 00:00:00\")))\n .then(data=>data.map(addDateParams));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"weatherdata2019 = FileAttachment(\"knmi_343_2019@1.tsv\").csv()\n .then(parseWeatherdata)\n .then(data=>data.map(addDateParams));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"parseFietsdata = function(data){\n return data\n .map(d=>{\n d.date = d3.timeParse(\"%Y-%m-%d %H:%M:%S\")(d.begintijd);\n return d;\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"parseWeatherdata = function(data){\n return data\n .map(d=>{\n d.date = d3.timeParse(\"%Y%m%d %H\")(d.YYYYMMDD + ' ' + parseInt(d.HH));\n d.wind= parseInt(d.FH)/10;\n d.rain= parseInt(d.RH)/10;\n d.rainint= Math.round(parseInt(d.RH)/10);\n d.temp= parseInt(d.T)/10;\n d.tempint= Math.round(parseInt(d.T)/10);\n d.globrad= parseInt(d.Q);\n d.globradint= Math.round(parseInt(d.Q)/10)*10;\n return d;\n })\n .map(addDateParams)\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"\ncombineddata = weatherdata2020.slice().map((d,i)=>{\n d.intensiteit_oplopend = fietsdata2020[i]?fietsdata2020[i].intensiteit_oplopend:null;\n return d;\n})//.filter(d=>d.date.getDay() == 0 || d.date.getDay() == 6);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"function addDateParams(d) {\n \n d.dateday = d3.timeFormat(\"%x\")(d.date);\n d.year = d3.timeFormat(\"%Y\")(d.date);\n d.month = d3.timeFormat(\"%b\")(d.date);\n d.monthnr = d3.timeFormat(\"%m\")(d.date);\n d.hour = d3.timeFormat(\"%H\")(d.date);\n d.dow = d3.timeFormat(\"%u\")(d.date);\n d.week = d3.timeFormat(\"%W\")(d.date);\n d.day = parseInt(d3.timeFormat(\"%j\")(d.date));\n d.dayname = d3.timeFormat(\"%a\")(d.date);\n let month = d.date.getMonth();\n d.season = month<=2?'Winter':month<=5?'Spring':month<=8?'Summer':month<=11?'Autumn':'Winter'\n \n return d;\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"colour = d3.scaleSequential(d3.interpolateRdYlGn).domain(\n d3.extent(fietsdata2019, function(d) {\n return d.intensiteit_oplopend;\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"raincolour = d3.scaleSequential(d3.interpolateBuPu).domain([-5,30]);\n/* d3.extent(weatherdataclean, function(d) {\n return d.rain;\n })\n)*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md` ## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"luxon = import('https://unpkg.com/luxon@1.25.0/src/luxon.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"