Learn how to clean data using functional programming patterns. Later (during frontend data), create a data visualisation with d3 based on given data. See frontend data repo for more about that.
... link to deploy
gif screencapture (click to expand)
This assignment actually consists of two parts:
- Data cleaning of survey data with functional patterns
- RDW data manipulation and rendering
On the deploy, I first wanted to keep these two parts are divided between the 'Survey Data' and 'RDW Data'-tabs.
But then for, I decided to keep this repo all as it were after the survey data-part, as the whole part of functional programming is to be able to re-use functions anyways. I think it's much cleaner this way too, otherwise I would've had some weird folder structure. The two parts are clearly divided in the documentation in the wiki, and split between my functional-programming repo (this one) and frontend-data repo.
See the project board for my current to-do's
The actual concept for the end project is documented in the wiki of frontend data For more information about that concept, visit that wiki page (in Dutch).
For this repo, the concept was to fetch a dataset of a questionnaire that the students filled in during the Information Design Datavisualization-course, and to clean this data using filters based on functional programming principles.
Clone this repository to your own device:
$ git https://github.com/deannabosschert/functional-programming.gitThen, navigate to this folder and run:
npm installTo run the project:
npm run dev"devDependencies": {
"@11ty/eleventy": "^0.11.0",
"cross-env": "^7.0.2",
"node-fetch": "^2.6.0",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.2",
"csvtojson": "^2.0.10",
"mkdirp": "^0.5.1"
} "scripts": {
"predev": "rimraf _site",
"dev:eleventy": "npx @11ty/eleventy --formats=html,njk,ejs,gif,jpg,png,css --serve --port=3000",
"dev:css": "sass --watch assets/scss:_site/assets/css/",
"dev": "cross-env ELEVENTY_ENV=development run-p dev:*",
"debug": "DEBUG=* eleventy",
"prebuild": "rimraf _site",
"build": "cross-env ELEVENTY_ENV=production run-s build:*",
"build:eleventy": "eleventy",
"build:css": "node-sass --importer node_modules/node-sass-glob-importer/dist/cli.js assets/scss/index.scss _site/assets/css/index.css"
}_What has been done with the fetched data?What has been done with the initial data? Cleaning pattern?
See my Wiki for a detailed view of my data cleaning and functional patterns.
What would you like to add (feature wishlist / backlog)?
- Some script that automatically writes the filtered data to my 'data'-folder in prebuild
(click to expand)
In this course we were rated on:- Application of subject matter
- Understanding
- Quality
- Process
This assessment focusses on:
- goal 1 (learn how to create with libraries)
- goal 2 (create interactive visualisations from external data)
- subgoal 1 (read _site)
- subgoal 2 (write _site)
- subgoal 5 (manipulate elements)
- subgoal 6 (load external data)
- subgoal 7 (transform data)
- subgoal 8 (use svg)
- subgoal 9 (use libraries)
Goal: learn how to create with libraries
I've learned how to load data locally and to fetch externally from an API, to clean that data and render this data.
See my wiki for more.
Goal: create interactive visualisations from external data
I've learned how to visualize the previous cleaned data in an interactive datavisualization, made with D3.js
See my wiki for more.
Rubric- detailed rating of my project
- Our superamazingteachers at the Tech Track @CMD ❤️
- My amazing support group ❤️
- Everyone keeping up with/tolerating me in Teams ❤️
- https://www.section.io/engineering-education/templating-your-static-site/ for using ejs with 11ty
- https://opendata.rdw.nl/browse?category=Parkeren&provenance=official&page=1 for the datasets
- _site of Nunjucks, Eleventy, EJS, D3.js, etc.
- My former projects, like progressive-web-apps
Author: Deanna Bosschert , license by
MIT
