diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 7b73cfe..cf46fcf 100644 --- a/.github/workflows/deploy.yml +++ b/.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: diff --git a/README.md b/README.md index d73f0da..aea61fc 100644 --- a/README.md +++ b/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 to preview your project. - -For more, see . - -## 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 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. diff --git a/docs/aalst.md b/docs/aalst.md index 23a83f3..52739ef 100644 --- a/docs/aalst.md +++ b/docs/aalst.md @@ -52,6 +52,11 @@ 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
@@ -59,7 +64,7 @@ createMap(sites, 19);
- ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(19), width))} + ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(19),jaarWeekTitle,jaarWeekSubtitle, width))}
diff --git a/docs/components/estimatedOverview.js b/docs/components/generalOverview.js similarity index 81% rename from docs/components/estimatedOverview.js rename to docs/components/generalOverview.js index 7cdc875..eb884ca 100644 --- a/docs/components/estimatedOverview.js +++ b/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" diff --git a/docs/components/overviewYear.js b/docs/components/overviewYear.js index b67c07b..09c0509 100644 --- a/docs/components/overviewYear.js +++ b/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, diff --git a/docs/explore.md b/docs/explore.md index b660418..8a35069 100644 --- a/docs/explore.md +++ b/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
@@ -76,7 +81,7 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === selectedSiteId).sort(
- ${resize((width) => estimatedOverview(drukte_data, 20, width))} + ${resize((width) => generalOverview(drukte_data, 20,overviewTitle,overviewSubtitle, width))}
@@ -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
+
+

+ 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. +

+ +

+ 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. +

+ +

+ 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. +

+
+
${SelectedYearInput}
- ${resize((width) => overviewYearMonth(jaaroverzicht, parseInt(selectedYear), parseInt(selectedSiteId), width))} + ${resize((width) => overviewYearMonth( + jaaroverzicht, + parseInt(selectedYear), + parseInt(selectedSiteId), + jaarMonthTitle, + jaarMonthSubtitle, + width + ) + )}
- ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(selectedSiteId), width))} + ${resize((width) => overviewYearWeekday( + jaaroverzicht, + parseInt(selectedSiteId), + jaarWeekTitle, + jaarWeekSubtitle, + width + ) + )}
diff --git a/docs/gent.md b/docs/gent.md index c934bfd..17b1195 100644 --- a/docs/gent.md +++ b/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
@@ -77,7 +83,7 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new
- ${resize((width) => estimatedOverview(drukte_data, 20, width))} + ${resize((width) => generalOverview(drukte_data, 20,overviewTitle,overviewSubtitle, width))}
@@ -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
@@ -104,7 +115,7 @@ const drukte_data = jaaroverzicht.filter(d => d.siteID === 13).sort((a,b) => new
- ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(13), width))} + ${resize((width) => overviewYearWeekday(jaaroverzicht, parseInt(13),jaarWeekTitle,jaarWeekSubtitle, width))}
diff --git a/docs/index.md b/docs/index.md index 2ab2fcc..38f2b28 100644 --- a/docs/index.md +++ b/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
@@ -103,7 +108,7 @@ createMap(sites);
- ${resize((width) => estimatedOverview(estimatedCounts,50, width, false))} + ${resize((width) => generalOverview(estimatedCounts,50, overviewTitle, overviewSubtitle, width, false))}
diff --git a/package.json b/package.json index 7910d67..c39b4a6 100644 --- a/package.json +++ b/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"