Merge pull request #42 from Datavisualiatie-UGent/tekst

text + cleanup
Datavisualiatie-UGent · May 12, 2024 · bd12e02 · bd12e02
2 parents bc15117 + da21aee
commit bd12e02
Show file tree

Hide file tree

Showing 13 changed files with 866 additions and 805 deletions.
diff --git a/docs/aalst.md b/docs/aalst.md
@@ -0,0 +1,62 @@
+---
+title: Aalst
+---
+
+```js
+const jaaroverzicht = FileAttachment("data/jaaroverzicht.csv").csv({typed: true});
+const sites = FileAttachment("data/sites.csv").csv({typed: true});
+
+
+import {overviewYearWeekday} from "./components/overviewYear.js";
+import {createMap} from "./components/mapUtils.js";
+
+```
+
+# Aalst
+
+```html
+<style>
+    .center-map {
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+    }
+
+    .style-map {
+        border-radius: 25px;
+        border: 2px solid lightgray;
+        height: 300px;
+    }
+
+</style>
+
+<div class="grid grid-cols-2">
+    <div>
+        <p>
+        Laten we een diepgaande blik werpen op de gemeente Aalst, met name op de locatie Aalst 1. Deze bevindt zich langs een fietsautostrade (F414 Aalst – Zottegem). Aangezien dit een belangrijke verbindingsweg is, verwachten we dat deze locatie veel gebruikt wordt door fietsers.
+        </p>
+        <p>
+
+        </p>
+    </div>
+    <div class="center-map" style="width: 100%">
+        <div id="map" class="style-map"></div>
+    </div>
+</div>
+<hr>
+```
+
+```js
+createMap(sites, 19);
+```
+
+<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.
+    </div>
+    <div class="grid grid-cols-1">
+        <div class="card">
+            ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(19), width))}
+        </div>
+    </div>
+</div>
diff --git a/docs/components/dailyVolume.js b/docs/components/dailyVolume.js
@@ -8,6 +8,7 @@ function calculateLabel(timeframe) {
 
 export function doubleBarHorizontal(data, {width}) {
     return Plot.plot({
+        title: "Inkomende en uitgaande fietsers.",
         width: width,
         y: {grid: true},
         x: {
@@ -26,30 +27,31 @@ export function doubleBarHorizontal(data, {width}) {
         marginLeft: 50,
         color: {
             scheme: "PiYg",
-            type: "ordinal"
+            type: "ordinal",
+            legend: true
         },
         marks: [
             Plot.axisY({anchor: "left", label: "aantal fietsers"}),
             Plot.rectY(
                 data,
-                {y: "in", x: "timeframe", fill: (d) => Math.sign(d.in)},
+                {y: "out", x: "timeframe", fill: (d) => "Uitgaand"}
             ),
             Plot.rectY(
                 data,
-                {y: "out", x: "timeframe", fill: (d) => Math.sign(d.out)}
+                {y: "in", x: "timeframe", fill: (d) => "Inkomend"},
             ),
             Plot.ruleY([0]),
             Plot.tip(data, Plot.pointer({
                 y: "out",
                 x: "timeframe",
-                title: (d) => [`Hour: ${calculateLabel(new Date(d.timeframe))}`, `arrived: ${d.in}`, `departed: ${d.out}`].join("\n\n"),
-                fill: (d) => Math.sign(d.in)
+                title: (d) => [`Uur: ${calculateLabel(new Date(d.timeframe))}`, `Inkomend: ${d.in}`, `Uitgaand: ${d.out}`].join("\n\n"),
+                fill: (d) => "Uitgaand"
             })),
             Plot.tip(data, Plot.pointer({
                 y: "in",
                 x: "timeframe",
-                title: (d) => [`Hour: ${calculateLabel(new Date(d.timeframe))}`, `arrived: ${d.in}`, `departed: ${d.out}`].join("\n\n"),
-                fill: (d) => Math.sign(d.in)
+                title: (d) => [`Uur: ${calculateLabel(new Date(d.timeframe))}`, `Inkomend: ${d.in}`, `Uitgaand: ${d.out}`].join("\n\n"),
+                fill: (d) => "Inkomend"
             })),
         ]
     })

diff --git a/docs/components/estimatedOverview.js b/docs/components/estimatedOverview.js
@@ -1,6 +1,6 @@
 import * as Plot from "npm:@observablehq/plot";
 
-export function estimatedOverview(data, width) {
+export function estimatedOverview(data, k, width, showY= true) {
     return Plot.plot({
         title: "Drukte benadering",
         width: width,
@@ -13,7 +13,9 @@ export function estimatedOverview(data, width) {
         },
 
         marks: [
-            Plot.lineY(data, Plot.windowY({k: 50, reduce: "mean"}, {x: (d) => new Date(d.datum), y: "aantal", stroke: "grey", curve:"basis"})),
+            showY ? Plot.axisY() : Plot.axisY({ticks:1, textStroke:"black", textStrokeOpacity:1, textStrokeWidth: 1}),
+            Plot.ruleY([0], {stroke: "red"}),
+            Plot.lineY(data, Plot.windowY({k: k, reduce: "mean"}, {x: (d) => new Date(d.datum), y: "aantal", stroke: "grey", curve:"basis"})),
         ]
     })
 }
diff --git a/docs/components/historyPlot.js b/docs/components/historyPlot.js
@@ -97,7 +97,7 @@ export function plotNormalizedData(normalizedSiteCumulativeCountsGemeente, start
         marks: [
             ...lines,
         ],
-        title: "Gemiddelde Cumulatieve Procentuele Verandering in Tellingen per Gemeente vanaf Maand Eén"
+        title: "Procentuele verandering van cumulatief gemiddelde ten opzichte van initiële maand"
     });
 }
 
@@ -137,7 +137,7 @@ export function getTrendCompareData(cumulatieveCounts, year, firstTrend, secondT
  * @param secondTrend
  * @returns {{secondTrendActiveSince: *, firstTrendsYears: {}, firstTrendActiveSince: *, secondTrendsYears: {}}}
  */
-export function getFistAndSecondTrendYears(cumulatieveCounts, year, firstTrend, secondTrend) {
+export function getFistAndSecondTrendYears(cumulatieveCounts, firstTrend, secondTrend) {
     const firstTrendsYears = {}
     const secondTrendsYears = {}
 

diff --git a/docs/components/mapUtils.js b/docs/components/mapUtils.js
@@ -71,23 +71,30 @@ function checkBounds(map, bounds) {
 /**
  * Creates a map with the given sites
  * @param sites the sites to create the map with
+ * @param centerSite If needs to be centered on a site
  */
-export function createMap(sites) {
+export function createMap(sites, centerSite=null) {
     // create map
-    const northEast = L.latLng(51.6, 6.05),
-        southWest = L.latLng(50.4, 2.5),
-        bounds = L.latLngBounds(southWest, northEast);
-
-    const centerLat = (southWest.lat + northEast.lat) / 2;
-    const centerLng = (southWest.lng + northEast.lng) / 2;
-
+    const northEast = L.latLng(51.6, 6.05)
+    const southWest = L.latLng(50.4, 2.5)
+    const bounds = L.latLngBounds(southWest, northEast)
+
+    let centerLat, centerLng;
+    if (centerSite == null) {
+        centerLat = (southWest.lat + northEast.lat) / 2
+        centerLng = (southWest.lng + northEast.lng) / 2
+    } else {
+        const site = sites.filter(d => d.siteID === centerSite)
+        centerLat = site[0].lat
+        centerLng = site[0].long
+    }
 
     const map = L.map('map', {
         center: [centerLat, centerLng],
         bounds: bounds,
         maxBoundsViscosity: 0.9,
         zoomControl: false,
-    }).setView([centerLat, centerLng], 9);
+    }).setView([centerLat, centerLng], centerSite == null ? 9 : 14);
     L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
         subdomains: 'abcd',

diff --git a/docs/components/overviewYear.js b/docs/components/overviewYear.js
@@ -9,7 +9,7 @@ import * as d3 from "npm:d3";
  */
 function filterData(data, year=null, site=null) {
     return data.filter((d) => {
-        const y = year !== null ? new Date(d.dag).getFullYear() === year : true
+        const y = year !== null ? new Date(d.datum).getFullYear() === year : true
         const s = site !== null ? d.siteID === site : true
         return y && s
     }
@@ -35,11 +35,11 @@ export function overviewYearMonth(data, year, site, width) {
         y: {tickFormat: Plot.formatMonth("nl", "short")}, // labels will be names instead of numbers
         marks: [
             Plot.cell(filtered, {
-                x: d => new Date(d.dag).getDate(),
-                y: d => new Date(d.dag).getMonth(),
+                x: d => new Date(d.datum).getDate(),
+                y: d => new Date(d.datum).getMonth(),
                 fill: "aantal",
                 channels: {
-                    Datum: "dag",
+                    Datum: "datum",
                 },
                 tip: {
                     format: {
@@ -57,10 +57,9 @@ export function overviewYearMonth(data, year, site, width) {
 
 /**
  * @param {*} data
- * @param {number} year
  * @param {*} site
  */
-export function overviewYearWeekday(data, year, site, width) {
+export function overviewYearWeekday(data, site, width) {
     // Only use the data of the correct year and site
     // const filtered = filterData(data, year, site)
     const filtered = filterData(data, undefined, site)
@@ -70,16 +69,29 @@ export function overviewYearWeekday(data, year, site, width) {
         padding: 0,
         color: {type: "linear", scheme: "Greens"},
         width: width,
-        x: {axis: null},
+        x: {
+            axis: "both",
+            tickSize: "0",
+            tickFormat: (x) => {
+                let d = new Date(new Date().getFullYear(), 0, 1);
+                d.setDate(d.getDate() + (parseInt(x))*7)
+
+                if (d.getDate() < 8 && d.getFullYear() === new Date().getFullYear()) {
+                    return d.toLocaleString('nl-be',{month:'short'})
+                } else {
+                    return ""
+                }
+            },
+        },
         y: {tickFormat: Plot.formatWeekday("nl", "short"), tickSize: 0}, // labels will be names instead of numbers
-        fy: {tickFormat: ""},
+        fy: {tickFormat: "", padding:0.07},
         marks: [
             Plot.cell(filtered, {
-                x: (d) => d3.utcWeek.count(d3.timeYear(new Date(d.dag)), new Date(d.dag)),
-                y: d => new Date(d.dag).getDay() !== 0 ? new Date(d.dag).getDay() : 7,
-                fy: (d) => new Date(d.dag).getFullYear(),
+                x: (d) => d3.utcWeek.count(d3.timeYear(new Date(d.datum)), new Date(d.datum)),
+                y: d => new Date(d.datum).getDay() !== 0 ? new Date(d.datum).getDay() : 7,
+                fy: (d) => new Date(d.datum).getFullYear(),
                 channels: {
-                    Datum: "dag",
+                    Datum: "datum",
                 },
                 fill: "aantal",
                 tip: {

diff --git a/docs/data/jaaroverzicht.csv.js b/docs/data/jaaroverzicht.csv.js
@@ -22,7 +22,7 @@ grouped.forEach((value, key) => {
 )
 
 // Write results to stdout
-process.stdout.write("siteID,dag,aantal\n");
+process.stdout.write("siteID,datum,aantal\n");
 
 new_map.forEach((value, key) => {
     value.forEach(value => {