Table of Content

• Functional Programming
• Frontend Data
• Frontend Applications

Assignment

To apply your learning directly, we will be working on a real life case with De Volkskrant. You will be working with a number of datasets to do preliminary research / exploration about a topic that journalists might write an article about. During the tech-track you will regularly have to show your work to the client.

Goals

The main goals in this track are that you’re able to:

• Clean, transform data with functional programming patterns
• Create interactive visualizations from external data
• Use D3 to create interactive visualizations
• Work with front-end framework and think in components
• Refactor, debug and read complex programs (code)

Assignment

Create a data visualisation with d3 based on given data.

Rubic

	1-2	3-4	5-6	7-8	9-10
Application of subject matter	Git, is used; the project runs without errors; data is loaded with d3; there is a representation of data	Data is rendered with d3; interpreting the representation is easier that interpreting the data itself	Functional patterns are used to clean and transform data.	Representation and use of d3 go beyond an example. Code is set up in a modular way and has no unexpected side effects	😱 The way the student applies subject matter is more advanced than what they were taught in class; let’s switch places
Understanding	There is substantial own code; the student can explain the code that exists	The student can explain some parts of their code, how some parts works together, and some technical choices	The student can explain every part of their code, how everything works together, and why patters are used instead of alternatives; the project is structured logically	The project is complex but can easily be understood; alternatives to patterns covered in class was used that were great choices	🤓 The student deeply understands functional programming and can create their own functional code flows
Quality	The project is handed in on time, working, documented, and on GitHub	Code style is consistent; code and project are partially documented	Code adheres to standards; docs cover what the project is and does	Code quality is good and enforced; docs are useful and professional	📚 Code and docs both read like great books
Process	Process is partially documented in the wiki	Process is properly documented	Choices are evaluated and documented; progress is demonstrated; Work reflects client's needs	Significant progress or iterations are demonstrated; Client is happy with the work	💪 What you did this course is amazing; Teachers and client are in awe of your progress

Assignment

Create a data visualisation (using the d3 library) based on given data where data can be explored through interaction using enter, update, and exit.

Rubic

	1-2	3-4	5-6	7-8	9-10
Application of subject matter	Git and d3 are used; the project runs without errors; data is loaded with d3; there is a representation of data	Data is rendered with d3; interpreting the representation is easier that interpreting the data itself	Data is transformed; the data in the visualization is changed using the d3 update pattern to make an interactive representation.	Representation and use of d3 go beyond an example: there are demonstrable additions like well-chosen interaction methods, animation, multiple chart types, or user input	😱 The way the student applies subject matter is more advanced than what they were taught in class; let’s switch places
Understanding	There is substantial own code; the student can explain the code that exists	The student can explain some parts of their code, how some parts works together, and some technical choices	The student can explain every part of their code, how everything works together, and why software is used instead of alternatives; the project is structured logically	The project is complex but can easily be understood; alternatives to software covered in class was used that were great choices	🤓 The student deeply understands JavaScript and a geeky / nerdy conversation can be held about this
Quality	The project is handed in on time, working, documented, and on GitHub	Code style is consistent; code and project are partially documented	Code adheres to standards; docs cover what the project is and does	Code quality is good and enforced; docs are useful and professional	📚 Code and docs both read like great books
Process	Process is partially documented	Process is properly documented	Choices are evaluated and documented; progress is demonstrated; Work reflects client's needs	Significant progress or iterations are demonstrated; Client is happy with the work	💪 What you did this course is amazing; Teachers and client are in awe of your progress

Assignment

Create a client-side application in JavaScript which dynamically renders data to views using either a front-end framework or system created by you. Reflect on the merits and costs of frameworks together.

Rubic

	1-2	3-4	5-6	7-8	9-10
Application of subject matter	Git and npm are used; the project runs without errors; data is loaded; there is a view that represents the data	Views are rendered dynamically from data; interpreting the representation is easier that interpreting the raw data itself	Data can be read and changed; changes to data are reflected in the interface; changes persist across page reloads	Views go beyond an example or tutorial: there are demonstrable additions like routing or creating data	😱 The way the student applies subject matter is more advanced than what they were taught in class; let’s switch places
Understanding	There is substantial own code and the student can explain how the project was created	The student can explain some parts of their code, how some parts works together, and some technical choices	Student understands how components, state, lifecycle works in their app. The project is structured logically. Merits of frameworks can be explained	The project is complex but can easily be understood; student used or wrote code not covered in class that was carefully chosen while weighing alternatives	🤓 The student deeply understands their code and a geeky / nerdy conversation can be held about this
Quality	The project is handed in on time, working, documented, and on GitHub	Code style is consistent; code and project are partially documented	Code adheres to standards; docs cover what the project is and does	Code quality is good and enforced; docs are useful and professional	📚 Code and docs both read like great books
Process	Process is partially documented	Process is properly documented	Choices are evaluated and documented; progress is demonstrated; Work reflects client's needs	Significant progress or iterations are demonstrated; Client is happy with the work	💪 What you did this course is amazing; Teachers and client are in awe of your progress