Merge pull request #52 from Datavisualiatie-UGent/final_cleanup

Final cleanup

.github/workflows/deploy.yml

@@ -24,7 +24,7 @@ jobs:
           node-version: 20
       - run: npm install
       - run: node docs/data/allFilteredData.js
-      - run: npm run build:mem
+      - run: npm run build:mem:linux
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

README.md

@@ -1,6 +1,7 @@
 # Datavisualisatie: Fietsen
 
 This is a project for the Datavisualisatie course at UGent.
+We visualised the data of multiple bicycle counting places around Flanders.
 
 
 ## Authors
@@ -14,58 +15,40 @@ This is a project for the Datavisualisatie course at UGent.
 
 ## Dataset
 
-[fietstellingen - Agentschap Wegen en Verkeer](https://opendata.apps.mow.vlaanderen.be/fietstellingen/index.html)
+We used the data from Agenschap Wegen en Verkeer. The raw data can be found [here](https://opendata.apps.mow.vlaanderen.be/fietstellingen/index.html).
+
 
 # Developing
 
-This is an [Observable Framework](https://observablehq.com/framework) project. To start the local preview server, run:
+This project is made with [Observable Framework](https://observablehq.com/framework) project. To start your developing environment, run:
 
+on windows:
 ```
-npm run dev
+node docs/data/allFilteredData.js
+npm run dev:mem:windows
 ```
 
-Then visit <http://localhost:3000> to preview your project.
-
-For more, see <https://observablehq.com/framework/getting-started>.
-
-## Project structure
-
-A typical Framework project looks like this:
-
-```ini
-.
-├─ docs
-│  ├─ components
-│  │  └─ timeline.js           # an importable module
-│  ├─ data
-│  │  ├─ launches.csv.js       # a data loader
-│  │  └─ events.json           # a static data file
-│  ├─ example-dashboard.md     # a page
-│  ├─ example-report.md        # another page
-│  └─ index.md                 # the home page
-├─ .gitignore
-├─ observablehq.config.js      # the project config file
-├─ package.json
-└─ README.md
+on linux:
+```
+node docs/data/allFilteredData.js
+npm run dev:mem:linux
 ```
 
-**`docs`** - This is the “source root” — where your source files live. Pages go here. Each page is a Markdown file. Observable Framework uses [file-based routing](https://observablehq.com/framework/routing), which means that the name of the file controls where the page is served. You can create as many pages as you like. Use folders to organize your pages.
-
-**`docs/index.md`** - This is the home page for your site. You can have as many additional pages as you’d like, but you should always have a home page, too.
-
-**`docs/data`** - You can put [data loaders](https://observablehq.com/framework/loaders) or static data files anywhere in your source root, but we recommend putting them here.
+Then visit <http://localhost:3000> to preview the data visualisations.
 
-**`docs/components`** - You can put shared [JavaScript modules](https://observablehq.com/framework/javascript/imports) anywhere in your source root, but we recommend putting them here. This helps you pull code out of Markdown files and into JavaScript modules, making it easier to reuse code across pages, write tests and run linters, and even share code with vanilla web applications.
+# Building
 
-**`observablehq.config.js`** - This is the [project configuration](https://observablehq.com/framework/config) file, such as the pages and sections in the sidebar navigation, and the project’s title.
+To build our visualisations as a static website, run the following commands.
+on windows:
+```
+node docs/data/allFilteredData.js
+npm run build:mem:windows
+```
 
-## Command reference
+on linux:
+```
+node docs/data/allFilteredData.js
+npm run build:mem:linux
+```
 
-| Command           | Description                                              |
-| ----------------- | -------------------------------------------------------- |
-| `npm install`            | Install or reinstall dependencies                        |
-| `npm run dev`        | Start local preview server                               |
-| `npm run build`      | Build your static site, generating `./dist`              |
-| `npm run deploy`     | Deploy your project to Observable                        |
-| `npm run clean`      | Clear the local data loader cache                        |
-| `npm run observable` | Run commands like `observable help`                      |
+The static website can be found in the `.dist/` folder.

docs/aalst.md

@@ -52,14 +52,19 @@ createMap(sites, 19);
 ```
 
 ## Jaaroverzicht
+```js
+const jaarWeekTitle = "Jaaroverzicht van Aalst 1 - per week"
+const jaarWeekSubtitle = "Het totaal aantal fietsers op één dag is weergegeven. Elke rij is een weekdag."
+```
+
 ```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.
     </div>
     <div class="grid grid-cols-1">
         <div class="card">
-            ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(19), width))}
+            ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(19),jaarWeekTitle,jaarWeekSubtitle, width))}
         </div>
     </div>
 </div>

docs/components/estimatedOverview.js → docs/components/generalOverview.js

@@ -1,8 +1,9 @@
 import * as Plot from "npm:@observablehq/plot";
 
-export function estimatedOverview(data, k, width, showY= true) {
+export function generalOverview(data, k, title, subtitle, width, showY= true) {
     return Plot.plot({
-        title: "Drukte benadering",
+        title: title,
+        subtitle: subtitle,
         width: width,
         x: {
             label: "datum"

docs/components/overviewYear.js

@@ -22,13 +22,14 @@ function filterData(data, year=null, site=null) {
  * @param {number} year
  * @param {*} site
  */
-export function overviewYearMonth(data, year, site, width) {
+export function overviewYearMonth(data, year, site, title, subtitle, width) {
     // Only use the data of the correct year and site
     const filtered = filterData(data, year, site)
 
     // create the plot
     return Plot.plot({
-        title: "Jaaroverzicht - maand",
+        title: title,
+        subtitle: subtitle,
         padding: 0,
         color: {type: "linear", scheme: "Greens"},
         width: width,
@@ -59,13 +60,14 @@ export function overviewYearMonth(data, year, site, width) {
  * @param {*} data
  * @param {*} site
  */
-export function overviewYearWeekday(data, site, width) {
+export function overviewYearWeekday(data, site, title, subtitle, width) {
     // Only use the data of the correct year and site
     // const filtered = filterData(data, year, site)
     const filtered = filterData(data, undefined, site)
     // create the plot
     return Plot.plot({
-        title: "Jaaroverzicht - weekdag",
+        title: title,
+        subtitle: subtitle,
         padding: 0,
         color: {type: "linear", scheme: "Greens"},
         width: width,

docs/explore.md

@@ -21,7 +21,7 @@ const cumulatieveCounts = FileAttachment("data/cumulativeMeanPerMonth.json").jso
 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";
+import {generalOverview} from "./components/generalOverview.js";
 import {plotNormalizedData, getTrendCompareData, getFistAndSecondTrendYears} from './components/historyPlot.js';
 ```
 
@@ -65,6 +65,11 @@ let selectedSiteId = siteIDs.get(selectedSite)
 const drukte_data = jaaroverzicht.filter(d => d.siteID === selectedSiteId).sort((a,b) => new Date(b.datum) - new Date(a.datum))
 ```
 
+```js
+const overviewTitle= `Drukte benadering in ${selectedSite}`
+const overviewSubtitle = "Benadering van het aantal fietsers die dit meetpunt voorbij fietsen."
+```
+
 ```html
 <div>
     <div>
@@ -76,7 +81,7 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === selectedSiteId).sort(
     </div>
     <div class="grid grid-cols-1">
         <div class="card">
-            ${resize((width) => estimatedOverview(drukte_data, 20, width))}
+            ${resize((width) => generalOverview(drukte_data, 20,overviewTitle,overviewSubtitle, width))}
         </div>
     </div>
 </div>
@@ -120,21 +125,65 @@ const SelectedYearInput = Inputs.select(all_years)
 const selectedYear = Generators.input(SelectedYearInput)
 ```
 
+```js
+const jaarMonthTitle = `Jaaroverzicht van ${selectedSite} in ${parseInt(selectedYear)} - per maand`
+const jaarMonthSubtitle = "Het totaal aantal fietsers op één dag is weergegeven. Elke rij is één maand."
+
+const jaarWeekTitle = `Jaaroverzicht van ${selectedSite} - per week`
+const jaarWeekSubtitle = "Het totaal aantal fietsers op één dag is weergegeven. Elke rij is een weekdag."
+```
+
 ```html
 <div>
+    <div>
+        <p>
+            Je zou verwachten dat er in de data zeker patronen zijn te herkennen,
+            zoals dat er meer gefietst zou worden in de zomer dan de winter of dat er bijvoorbeeld meer fietsers in de week zijn dan in het weekend.
+            Om dit te kunnen weergeven hebben we twee jaaroverzichten voorzien.
+        </p>
+
+        <p>
+            De eerste grafiek geeft een overzicht van één jaar waar elke dag van het jaar wordt weergegeven door het aantal fietsers op die dag.
+            De dagen zijn hier geordend per maand, zo is 1 rij gelijk aan 1 maand.
+            Dagen met meer fietsers zijn donkerder gekleurd.
+            Het jaar dat wordt weergegeven kan je zelf kiezen aan de hand van onderstaande dropdown.
+        </p>
+
+        <p>
+            De tweede grafiek geeft een overzicht van alle jaren in de data.
+            Maar hier wordt de data geordend per week i.p.v. per maand.
+            Zo zijn patronen die afhankelijk zijn per week beter zichtbaar.
+        </p>
+    </div>
+
     <div>
         <div>${SelectedYearInput}</div>
     </div>
 
     <div class="grid grid-cols-1">
         <div class="card">
-            ${resize((width) => overviewYearMonth(jaaroverzicht, parseInt(selectedYear), parseInt(selectedSiteId), width))}
+            ${resize((width) => overviewYearMonth(
+                                    jaaroverzicht, 
+                                    parseInt(selectedYear), 
+                                    parseInt(selectedSiteId),
+                                    jaarMonthTitle,
+                                    jaarMonthSubtitle,
+                                    width
+                                )
+            )}
         </div>
     </div>
 
     <div class="grid grid-cols-1">
         <div class="card">
-            ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(selectedSiteId), width))}
+            ${resize((width) => overviewYearWeekday(
+                                    jaaroverzicht, 
+                                    parseInt(selectedSiteId),
+                                    jaarWeekTitle,
+                                    jaarWeekSubtitle,
+                                    width
+                                )
+            )}
         </div>
     </div>
 </div>

docs/gent.md

@@ -15,7 +15,7 @@ const jaaroverzicht = FileAttachment("data/jaaroverzicht.csv").csv({typed: true}
 const sites = FileAttachment("data/sites.csv").csv({typed: true});
 const cumulatieveCounts = FileAttachment("data/cumulativeMeanPerMonth.json").json();
 
-import {estimatedOverview} from "./components/estimatedOverview.js";
+import {generalOverview} from "./components/generalOverview.js";
 import {overviewYearWeekday} from "./components/overviewYear.js";
 import {createMap} from "./components/mapUtils.js";
 import {plotNormalizedData, getTrendCompareData, getFistAndSecondTrendYears} from './components/historyPlot.js';
@@ -65,6 +65,12 @@ createMap(sites, 13);
 ```js
 const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new Date(b.datum) - new Date(a.datum))
 ```
+
+```js
+const overviewTitle= "Drukte benadering in Gent"
+const overviewSubtitle = "Benadering van het aantal fietsers die dit meetpunt voorbij fietsen."
+```
+
 ```html
 
 <div>
@@ -77,7 +83,7 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new
     </div>
     <div class="grid grid-cols-1">
         <div class="card">
-            ${resize((width) => estimatedOverview(drukte_data, 20, width))}
+            ${resize((width) => generalOverview(drukte_data, 20,overviewTitle,overviewSubtitle, width))}
         </div>
     </div>
 </div>
@@ -86,6 +92,11 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new
 
 ## Jaaroverzicht
 
+```js
+const jaarWeekTitle = "Jaaroverzicht van Gent - per week"
+const jaarWeekSubtitle = "Het totaal aantal fietsers op één dag is weergegeven. Elke rij is een weekdag."
+```
+
 ```html
 <div>
     <div>
@@ -104,7 +115,7 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new
     </div>
     <div class="grid grid-cols-1">
         <div class="card">
-            ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(13), width))}
+            ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(13),jaarWeekTitle,jaarWeekSubtitle, width))}
         </div>
     </div>
 </div>

docs/index.md

@@ -83,7 +83,7 @@ const estimatedCounts = FileAttachment("data/estimatedCounts.csv").csv({typed: t
 const totalCounts = FileAttachment("data/totalCounts.csv").csv({typed: true});
 const sites = FileAttachment("data/sites.csv").csv({typed: true});
 
-import {estimatedOverview} from "./components/estimatedOverview.js"
+import {generalOverview} from "./components/generalOverview.js"
 import {createMap} from "./components/mapUtils.js";
 import {barChart} from "./components/barChartSiteIDAantal.js";
 ```
@@ -92,6 +92,11 @@ import {barChart} from "./components/barChartSiteIDAantal.js";
 createMap(sites);
 ```
 
+```js
+const overviewTitle = "Algemene drukte benadering"
+const overviewSubtitle= "Benadering van de drukte op de fietspaden vanaf het begin van de metingen."
+```
+
 ## Drukte benadering
 ```html
 <div>
@@ -103,7 +108,7 @@ createMap(sites);
     </div>
     <div class="grid grid-cols-1">
     <div class="card">
-        ${resize((width) => estimatedOverview(estimatedCounts,50, width, false))}
+        ${resize((width) => generalOverview(estimatedCounts,50, overviewTitle, overviewSubtitle, width, false))}
     </div>
     </div>
 </div>

package.json

@@ -3,9 +3,11 @@
   "private": true,
   "scripts": {
     "clean": "rimraf docs/.observablehq/cache",
-    "build:mem": "NODE_OPTIONS=--max_old_space_size=4096 && npm run build",
+    "build:mem:linux": "export NODE_OPTIONS=--max_old_space_size=4096 && npm run build",
+    "build:mem:windows": "set NODE_OPTIONS=--max_old_space_size=4096 && npm run build",
     "build": "rimraf dist && observable build",
-    "dev:mem": "NODE_OPTIONS=--max_old_space_size=4096 && npm run dev",
+    "dev:mem:linux": "export NODE_OPTIONS=--max_old_space_size=4096 && npm run dev",
+    "dev:mem:windows": "set NODE_OPTIONS=--max_old_space_size=4096 && npm run dev",
     "dev": "observable preview",
     "deploy": "observable deploy",
     "observable": "observable"