Skip to content

Commit

Permalink
Merge pull request #48 from Datavisualiatie-UGent/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@milachae
milachae authored May 13, 2024
2 parents fb9d5e6 + d3b84fc commit 8049b82
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 92 deletions.
26 changes: 24 additions & 2 deletions docs/aalst.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ title: Aalst
```js
const jaaroverzicht = FileAttachment("data/jaaroverzicht.csv").csv({typed: true});
const sites = FileAttachment("data/sites.csv").csv({typed: true});
const in_out = FileAttachment("data/inOutData.csv").csv({typed: true});


import {doubleBarHorizontal} from "./components/dailyVolume.js";
import {overviewYearWeekday} from "./components/overviewYear.js";
import {createMap} from "./components/mapUtils.js";

Expand Down Expand Up @@ -50,6 +51,8 @@ import {createMap} from "./components/mapUtils.js";
createMap(sites, 19);
```

## Jaaroverzicht
```html
<div>
<div>
Het jaaroverzicht bevestigt het vermoeden dat deze fietsroute vaak wordt gebruikt, met dagelijkse aantallen variërend van ongeveer 100 tot 1000. Bovendien blijkt dat er tijdens de warmere maanden meer fietsers op de weg zijn, wat duidelijk wordt door de donkerdere plekken in het midden van het jaar. Echter, dit is niet het enige opvallende. Op 27/03/2022 is er aanzienlijk meer activiteit van fietsers dan op andere momenten. Een mogelijke verklaring hiervoor is een grootschalig wielerevenement, zoals blijkt uit een beetje onderzoek. Het blijkt dat op die dag de <a href="https://valckenier.be/nl/nieuws/1700-deelnemers-en-veel-sfeer-dit-was-de-valckenier-classic-2022-xxl">Valckenier Classic 2022 XXL</a> plaatsvond, waarvan het parcours ook door Aalst liep.
Expand All @@ -59,4 +62,23 @@ createMap(sites, 19);
${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(19), width))}
</div>
</div>
</div>
</div>
```

## Inkomend en uitgaand verkeerd

```js
const inOutData = in_out.filter(item => item.siteID === 19).sort((a, b) => new Date(a.timeframe) > new Date(b.timeframe))
```

```html
<div>
<div>
Overigens is deze locatie wel een mooi voorbeeld van ochtend en avondspits.
Zo zie je dat er 's ochtends vooral uitgaand verkeer is en 's avonds vooral inkomend.
</div>
<div class="grid grid-cols-1">
<div class="card">${resize((width) => doubleBarHorizontal(inOutData, {width}))}</div>
</div>
</div>
```
4 changes: 2 additions & 2 deletions docs/components/historyPlot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export function plotNormalizedData(normalizedSiteCumulativeCountsGemeente, start
marks: [
...lines,
],
title: "Procentuele verandering van cumulatief gemiddelde ten opzichte van initiële maand"
title: "Procentuele verandering van cumulatief gemiddelde ten opzichte van januari"
});
}

Expand Down Expand Up @@ -183,4 +183,4 @@ export function getFistAndSecondTrendYears(cumulatieveCounts, firstTrend, second
maxY,
totalMothsCount: 12
}
}
}
1 change: 0 additions & 1 deletion docs/components/mapUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ function createPopUp(d) {
return 'Site ID: ' + d.siteID + '<br>' +
'Naam site: ' + d.naam + '<br>' +
'Naam gemeente: ' + d.gemeente + '<br>' +
'Interval tellingen: ' + d.interval + "minuten" + '<br>' +
extractInstallationDate(d)
}

Expand Down
143 changes: 79 additions & 64 deletions docs/explore.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const in_out = FileAttachment("data/inOutData.csv").csv({typed: true});
const jaaroverzicht = FileAttachment("data/jaaroverzicht.csv").csv({typed: true});
const cumulatieveCounts = FileAttachment("data/cumulativeMeanPerMonth.json").json();

import {createMap} from "./components/mapUtils.js";
import {overviewYearMonth, overviewYearWeekday} from "./components/overviewYear.js";
import {doubleBarHorizontal} from "./components/dailyVolume.js";
import {estimatedOverview} from "./components/estimatedOverview.js";
Expand All @@ -43,57 +44,35 @@ const names = Array.from(siteIDs.keys()).sort();
# Explore it yourself
```html
<div>
<p>Hier kan je zelf spelen</p>
<p>
Hier kan je zelf experimenteren.
De volgende visualisaties zijn afhankelijk van welke site je kiest.
</p>
</div>
```

## Selecteer site
```js
let selectedSite = view(Inputs.select(names, {value: "Gent"}))
```


## Gemiddeld aantal tellingen per meetpunt
```js
let selectedSiteId = siteIDs.get(selectedSite)
```

```html
<div>
<p>
Over het algemeen is bij de meeste punten de volgende trend te zien:
rond 8h is er een toename van fietsers in beide richtingen, dit zal de ochtendspits zijn van iedereen die naar het werk moet.
De avondspits is meer uitgesmeerd aangezien sommige mensen langer werken of misschien nog een activiteit hebben na het werk.
Sommige meetpunten liggen langs een grote baan, en zijn gesplitst in 2 stations. Hierdoor is er een asymmetrie tussen het binnenkomende en uitgaande verkeer.
Een paar voorbeelden hiervan zijn 'Ardooie teller 1' en 'Ardooie teller 2'.
De oriëntatie van de teller is ook niet altijd consistent zoals bijvoorbeeld bij 'Brasschaat 2' en 'Brasschaat 1'
</p>
<h3>${selectedSite}:</h3>
</div>
```



```js
let data = in_out.filter(item => item.siteID === selectedSiteId).sort((a, b) => new Date(a.timeframe) > new Date(b.timeframe))
```

<div class="grid grid-cols-1">

<div class="card">${resize((width) => doubleBarHorizontal(data, {width}))}</div>

</div>

## Drukte

```js
const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new Date(b.datum) - new Date(a.datum))
const drukte_data = jaaroverzicht.filter(d => d.siteID === selectedSiteId).sort((a,b) => new Date(b.datum) - new Date(a.datum))
```
```html

```html
<div>
<div>
<p>tekst</p>
<p>
Om een gevoel te krijgen wanneer de drukkere periodes zijn aan een gegeven tellingespunt, hebben we volgende grafiek gemaakt.
Hierop kan je zien hoeveel fietsers er ongeveer op deze plaats passeren op een bepaalde periode.
Het is hier direct mogelijk om te zien wanneer de drukke en rustigere periodes zijn.
</p>
</div>
<div class="grid grid-cols-1">
<div class="card">
Expand All @@ -104,6 +83,33 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new
<hr>
```

## Gemiddeld aantal inkomende en uitgaande fietsers

```js
const inOutData = in_out.filter(item => item.siteID === selectedSiteId).sort((a, b) => new Date(a.timeframe) > new Date(b.timeframe))
```

```html
<div>
<p>
Er wordt ook bijgehouden in welke richting fietsers passeren langs een telpunt.
Dit wordt weergegeven in de volgende grafiek.
Hier tonen we het gemiddelde aantal fietsers, opgesplitst naar de richting waarin ze fietsen.
Deze grafiek kan worden gebruikt om te beoordelen of dit fietspad voornamelijk wordt gebruikt tijdens de ochtend- en avondspits.
</p>
<p>
Sommige meetpunetn liggen echter langs een brede baan, waardoor ze gesplitst zijn.
Hierdoor kan er dus soms asymmetrie zijn tussen het binnenkomende en uitgaande verkeer.
Een paar voorbeelden hiervan zijn 'Ardooie teller 1' en 'Ardooie teller 2'.
Ook de oriëntatie van de teller is ook niet altijd consistent zoals bijvoorbeeld bij 'Brasschaat 2' en 'Brasschaat 1'
</p>
</div>
<div class="grid grid-cols-1">
<div class="card">${resize((width) => doubleBarHorizontal(inOutData, {width}))}</div>
</div>
<hr>
```

## Jaaroverzicht

```js
Expand All @@ -114,28 +120,29 @@ const SelectedYearInput = Inputs.select(all_years)
const selectedYear = Generators.input(SelectedYearInput)
```

```html
<div>
<div>
<div>${SelectedYearInput}</div>
</div>

<div class="card" style="display: flex; gap: 0.5rem;">
<div>${SelectedYearInput}</div>
</div>

<div class="grid grid-cols-1">
<div class="card">
${resize((width) => overviewYearMonth(jaaroverzicht, parseInt(selectedYear), parseInt(selectedSiteId), width))}
</div>
</div>
<div class="grid grid-cols-1">
<div class="card">
${resize((width) => overviewYearMonth(jaaroverzicht, parseInt(selectedYear), parseInt(selectedSiteId), width))}
</div>
</div>

<div class="grid grid-cols-1">
<div class="card">
${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(selectedSiteId), width))}
</div>
<div class="grid grid-cols-1">
<div class="card">
${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(selectedSiteId), width))}
</div>
</div>
</div>
<hr>

```


<!--
TREND
-->
## Trend fietstellingen

<div>Patronen, in dit geval trends genoemd, worden zichtbaar gedurende een bepaalde periode. We concentreren ons hier op trends die zich binnen één jaar voordoen. Door deze trends te onderzoeken, kunnen we veel leren over de groei en afname van fietsers in een bepaalde gemeente gedurende deze periode.</div>
Expand Down Expand Up @@ -163,26 +170,34 @@ const secondTrend = view(Inputs.select(possibleSencondTrends), {value: possibleS

```js
const trendCompareData = getTrendCompareData(cumulatieveCounts, year, firstTrend, secondTrend);
const fistAndSecondTrendYears = getFistAndSecondTrendYears(cumulatieveCounts, firstTrend, secondTrend)
```
</div>
<div class="grid grid-cols-1">
<div class="card">${resize((width) => plotNormalizedData(trendCompareData.filteredObj, trendCompareData.startDate, trendCompareData.gemeenteActiveSince, trendCompareData.totalMothsCount, {width: width}))}</div>
</div>

<div>Over het algemeen is opmerkelijk dat er een aanzienlijke groei is tijdens de lente- en zomermaanden, naarmate het weer verbetert. Bovendien is er een duidelijke overgang naar de koudere herfst- en wintermaanden te zien, gekenmerkt door een significante neerwaartse trend.</div>
</div>
<div class="grid grid-cols-1">
<div class="card">${resize((width) => plotNormalizedData(trendCompareData.filteredObj, trendCompareData.startDate, trendCompareData.gemeenteActiveSince, trendCompareData.totalMothsCount, {width: width}))}</div>
</div>

```js
// all years after year for first trend
const fistAndSecondTrendYears = getFistAndSecondTrendYears(cumulatieveCounts, firstTrend, secondTrend)
```
```html
<div>
<p>
Naast de vergelijking tussen 2 gemeentes, hebben we ook een trend die eenzelfde gemeente vergelijkt door de jaren heen.
</p>
</div>

<div class="grid grid-cols-2">
<div class="card">${resize((width) => plotNormalizedData(fistAndSecondTrendYears.firstTrendsYears, trendCompareData.startDate, trendCompareData.gemeenteActiveSince, fistAndSecondTrendYears.totalMothsCount, {width: width}, fistAndSecondTrendYears.firstTrendActiveSince, fistAndSecondTrendYears.minY, fistAndSecondTrendYears.maxY))}</div>
<div class="card">${resize((width) => plotNormalizedData(fistAndSecondTrendYears.secondTrendsYears, trendCompareData.startDate, trendCompareData.gemeenteActiveSince, fistAndSecondTrendYears.totalMothsCount, {width: width}, fistAndSecondTrendYears.secondTrendActiveSince, fistAndSecondTrendYears.minY, fistAndSecondTrendYears.maxY))}</div>
<div class="card">${resize((width) => plotNormalizedData(fistAndSecondTrendYears.firstTrendsYears, trendCompareData.startDate, trendCompareData.gemeenteActiveSince, fistAndSecondTrendYears.totalMothsCount, {width: width}, fistAndSecondTrendYears.firstTrendActiveSince, fistAndSecondTrendYears.minY, fistAndSecondTrendYears.maxY))}</div>
<div class="card">${resize((width) => plotNormalizedData(fistAndSecondTrendYears.secondTrendsYears, trendCompareData.startDate, trendCompareData.gemeenteActiveSince, fistAndSecondTrendYears.totalMothsCount, {width: width}, fistAndSecondTrendYears.secondTrendActiveSince, fistAndSecondTrendYears.minY, fistAndSecondTrendYears.maxY))}</div>
</div>

<div>Ook het effect van de coronaperiode is waarneembaar. In 2020 begint de groei van fietsgebruik langzamer, wat toe te wijten is aan de start van de lockdown in maart. Dit fenomeen is ook duidelijk zichtbaar in de grafiek van de drukte. In latere jaren blijft de groei meestal rond dezelfde maanden plaatsvinden.</div>
<div>
<p>
Mogelijks is ook het effect van de coronaperiode waarneembaar.
In 2020 zien we duidelijk een zwakke groei en soms zelfs een daling in maart.
Dit kan erop wijzen dat de lockdown net begon en mensen binnen bleven.
Opvallend is echter de enorme groei die we zien in april.
Dit zou de oorzaak kunnen zijn van mensen die na verloop van tijd in lockdown veel zijn gaan fietsen.
</p>
</div>
```

<!--
TREND
-->
29 changes: 15 additions & 14 deletions docs/gent.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,12 @@ import {plotNormalizedData, getTrendCompareData, getFistAndSecondTrendYears} fro
<div class="grid grid-cols-2">
<div>
<p>
Hier bekijken we specifiek de info over de Gent site.
Dit meetpunt bevindt zich op de fietssnelweg naast de R5 rond Gent en bestaat al sinds 22 augustus 2019.
Hier bekijken we specifiek de info over de Gent-site.
Dit meetpunt bevindt zich langs de fietssnelweg naast de R4 rond Gent en bestaat al sinds 22 augustus 2019.
</p>
<p>
Je zou verwachten dat dit soort fietspaden vooral gebruikt worden door mensen die naar hun werk fietsen en studenten die naar school gaan.
Dit is ook wat we in onderstaande grafieken zullen aantonen.
Je zou veronderstellen dat dit soort fietspaden voornamelijk gebruikt worden voor woon-werkverkeer en studenten.
Dit is ook wat we in de onderstaande grafieken zullen illustreren.
</p>
</div>
<div class="center-map" style="width: 100%">
Expand All @@ -70,9 +70,9 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new
<div>
<div>
<p>
Hier zien we algemene drukte van het fietspad over de tijd dat het meetpunt bestaat.
Het valt hier direct al op dat het fietspad vooral gebruikt wordt tussen de maanden april/juni en september/November.
Ook valt het op dat er bijna elke zomer een grote daling is van de drukte.
De grafiek toont de algemene drukte op het fietspad gedurende de periode dat het meetpunt operationeel is.
Het is meteen duidelijk dat het fietspad voornamelijk wordt gebruikt tussen de maanden april tot juni en september tot november.
Bovendien valt op dat er bijna elk jaar een aanzienlijke daling van de drukte te zien is tijdens de zomermaanden.
</p>
</div>
<div class="grid grid-cols-1">
Expand All @@ -90,15 +90,16 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new
<div>
<div>
<p>
Hier zien we een jaaroverzicht dat geordend is per weekdag. Zo staan alle zondagen op eenzelfde lijn.
Hier valt het ook al direct op dat dit fietspad veel meer gebruikt wordt op maandag tot en met vrijdag dan in het weekend.
Deze grafiek geeft een jaaroverzicht dat geordend is per weekdag. Zo staat een bepaalde weekdag op eenzelfde lijn.
Het is hier meteen duidelijk dat dit fietspad aanzienlijk meer wordt gebruikt op maandag tot en met vrijdag dan in het weekend.
</p>
<p>
We hier opnieuw goed dat dit fietspad vooral gebruikt wordt tussen april/juni en september/November.
De maanden dat er het meeste studenten rondfietsen
We zien hier opnieuw goed dat dit fietspad vooral gebruikt wordt tussen april tot juni en september tot november.
De maanden dat de meeste studenten rondfietsen in Gent.
</p>
<p>
Als laatst vallen ook de vakanties enorm op. Zo zien we dat in de herfstvakantie er amper fietsers zijn.
Ten slotte vallen ook de vakantieperiodes op.
Zo is te zien dat er tijdens de herfstvakantie aanzienelijk minder fietsers zijn.
</p>
</div>
<div class="grid grid-cols-1">
Expand All @@ -122,8 +123,8 @@ const fistAndSecondTrendYears = getFistAndSecondTrendYears(cumulatieveCounts, fi
<div>
<div>
<p>
Als laatst zien we hier ook nog de trends van alle fietspunten gelegen in Gent.
Hier zien we opnieuw wat we ook op de andere grafieken zagen.
Als laatst zien we hier ook nog de trends van alle fietspunten gelegen in Gent.
Opnieuw zien we hier wat we al op andere grafieken hebben waargenomen.
</p>
</div>
<div class="grid grid-cols-1">
Expand Down
16 changes: 7 additions & 9 deletions docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,12 @@ p {
```html
<div>
<p>
Er wordt dagelijks veel gefietst in België. Dit voor het plezier,
maar ook heel veel woon-werk verkeer of studenten die van/naar school gaan.
Om dit beter in kaart te kunnen brengen heeft Agentschap wegen & verkeer Vlaanderen een 140-tal fietspunten geplaatst in Vlaanderen.
Hierdoor hebben ze meer zicht op bijvoorbeeld volgende dingen: hoeveel fietsers rijden er per jaar, Wat is het aantal op piekmomenten, etc.
In België wordt veel gefietst, zowel voor plezier, woon-werkverkeer en studenten die van/naar school gaan.
Om dit beter in kaart te kunnen brengen heeft Agentschap Wegen en Verkeer Vlaanderen een 140-tal fietspunten geplaatst in Vlaanderen.
Dit geeft hen een beter inzicht in zaken zoals het jaarlijkse aantal fietsers, de piekmomenten en meer.
</p>
<p>
Wij hebben ons gefocust om volgende feiten te bekijken:
We hebben ons gericht op het onderzoeken van de volgende feiten:
</p>
<div>
<ul>
Expand All @@ -62,9 +61,8 @@ p {
```html
<div>
<p>
Op deze map zijn alle meetpunten zichtbaar. Voor elk meetpunt is volgende info beschikbaar:
Op deze kaart zijn alle meetpunten zichtbaar, met extra informatie voor elk punt.
</p>

<div>
<ul>
<li>Naam van de site</li>
Expand Down Expand Up @@ -99,8 +97,8 @@ createMap(sites);
<div>
<div>
<p>
Het aantal fietsers op de baan is sterk afhankelijk per seizoen.
Vandaar hebben deze grafiek gemaakt die overheen de jaren de drukte op de fietspaden benadert.
Het aantal fietsers op de weg varieert sterk per seizoen.
Daarom hebben we een grafiek gemaakt die de drukte op de fietspaden door de jaren heen benadert.
</p>
</div>
<div class="grid grid-cols-1">
Expand Down

0 comments on commit 8049b82

Please sign in to comment.