Merge pull request #38 from Datavisualiatie-UGent/overview

create general overview of amount of cyclist

docs/components/estimatedOverview.js

@@ -0,0 +1,19 @@
+import * as Plot from "npm:@observablehq/plot";
+
+export function estimatedOverview(data, width) {
+    return Plot.plot({
+        title: "Drukte benadering",
+        width: width,
+        x: {
+            label: "datum"
+        },
+        y: {
+            label: "drukte",
+            grid: true
+        },
+
+        marks: [
+            Plot.lineY(data, Plot.windowY({k: 50, reduce: "mean"}, {x: (d) => new Date(d.datum), y: "aantal", stroke: "grey", curve:"basis"})),
+        ]
+    })
+}

docs/data/allFilteredData.js

@@ -3,13 +3,13 @@ import path from 'path';
 import url from 'url';
 
 const startDate = ({
-    year:2020,
-    month:1
+    year:2019,
+    month:8
 });
 
 const endDate = ({
-    year:2023,
-    month: 12
+    year:2024,
+    month: 4
 });
 
 

docs/data/estimatedCounts.csv.js

@@ -0,0 +1,47 @@
+
+import * as d3 from "d3";
+import fs from "node:fs/promises"
+import path from 'path';
+import url from 'url';
+import {sites} from "./sitesUtils.js";
+import {csvFormat} from "d3-dsv";
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const filePath = __dirname + '/tellingen.csv';
+const tellingen = d3.csvParse(await fs.readFile(filePath, "utf8"));
+
+// counts for a date how many sites were added. Only the dates where there is actually one added are used.
+const sites_added_date = d3.rollup(sites, v => d3.count(v, d => d.siteID), d => {
+    const date = new Date(d.datum_van)
+    return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
+})
+
+// counts the active sites at a given date. Date is in the format: yyyy-mm-dd
+function before(date) {
+    let tot = 0
+    sites_added_date.forEach((value, key, map) => {
+        if (new Date(key) <= new Date(date)) {
+            tot += value
+        }
+    })
+    return tot
+}
+
+// for every date, the amount of counts that were registered
+const counts = d3.rollup(tellingen, v => d3.sum(v, d => d.aantal), d => {
+    const date = new Date(d.van)
+    return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
+})
+
+// The total amount of sites
+const total_sites = sites.length
+
+// weighted counts for every date.
+const weighted_counts = [...counts.keys()].map(date => {
+    const b = before(date)
+    const tot = b > 0 ? ((total_sites / before(date)) * counts.get(date)).toFixed(2) : 0
+    return {datum:date, aantal:tot}
+}).sort((a, b) => new Date(b.datum) - new Date(a.datum))
+
+process.stdout.write(csvFormat(weighted_counts));

docs/index.md

@@ -71,13 +71,14 @@ title: Fietstellingen
 
 ```js
 // Imports
+const estimatedCounts = FileAttachment("data/estimatedCounts.csv").csv({typed: true});
 const totalCounts = FileAttachment("data/totalCounts.csv").csv({typed: true});
 const sites = FileAttachment("data/sites.csv").csv({typed: true});
-const richtingen = FileAttachment("data/richtingen.csv").csv({typed: true});
 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 {estimatedOverview} from "./components/estimatedOverview.js"
 import {overviewYearMonth, overviewYearWeekday} from "./components/overviewYear.js";
 import {createMap} from "./components/mapUtils.js";
 import {barChart} from "./components/barChartSiteIDAantal.js";
@@ -89,6 +90,14 @@ import {plotNormalizedData, getTrendCompareData, getFistAndSecondTrendYears} fro
 createMap(sites);
 ```
 
+## Drukte benadering
+
+<div class="grid grid-cols-1">
+  <div class="card">
+    ${resize((width) => estimatedOverview(estimatedCounts, width))}
+  </div>
+</div>
+
 ```js
 const siteIDs = new Map();