The process

Concept

For this project, I created a dashboard that first shows the main categories of the NMVW organization and second the materials of their respective categories. The categories are displayed in a bar chart. This chart shows 5 categories. If the user scrolls he/she can view all categories. The user will be greeted with the materials of a category when clicked on a bar in the bar chart.

See the page

From Sketch to Design

The design page is very minimal. It explains the visual design choices I made to arrive at the current design. The interaction between two graphs Layout left to right. The left graph that updates the graph on the right. Color palette from ColorHunt looked for a warm palette. Brown tones. The colours symbolize materials. Only highlight one category since that is the one that passes data to the right. Sans-serif typeface works well with small texts.

See the page

Data Cleaning

The data that is being fetched from the database is pretty clean. The only thing I needed to do was format it in the right way. Therefore I worked on this data-cleaning exercise. The goal of this exercise is to end up with an array with only valid hex colors. This means a hash sign followed by either 3 or 6 values. These values can be a number from 0-9 or a letter from a-f. The letters can be lowercase and uppercase. If a value has these characteristics but misses the hash, we'll add it. If there is a color name we check if we have the same name stored in our object and then replace that value for a hex. If there is an empty value we replace it with null. These values will not be removed since each value comes from a student. If the empty value would be removed then the order of colors wouldn't equal the order of students.

See the page

Quest Tor The Query

In the final solution, I first fetch every main category with its respective termmaster link. The termmasters are combined with the name and object count into an array of objects. Now we have the termmasters we retrieve the materials of each category. With a forEach loop, we can iterate over each category and retrieve new data.

See the page

Examples & My work

There are three cases of code samples I used:

• Code in its entirety - these are code blocks like the helper functions. An example of this is the wrap function which allows for text wrapping of SVG text elements.
• Modified examples - I used three examples, two for the donut chart and one for the bar chart. These will be explained in this document.
• Acknowledgments - things like inspiration will be acknowledged in the readme. These cover the courses and tutorials I followed and the inspiration for the design like the color palette.

Since I continued the work I did for functional-programming, I will continue this wiki page as well. I will first explain switched and then reference the wiki page from the previous assignment.

See the page

The Update Pattern in D3

In his video, Curran Kelleher talks about the general update pattern of D3.js. This video served as the base of my interactions. I cover how I know which category contains the selected material from the donut chart. Then I created a new array with the value of the selected material within each category. This array is used to update the width of each bar in the bar graph. This only requires me to update the bar chart.

See the page

Notes & thoughts

Functional programming in Javascript

Functional programming is a style of programming where solutions are simple, isolated functions, without any side effects outside of the function scope. According to FCC it comes down to these points: Isolated functions - there is no dependence on the state of the program, which includes global variables that are subject to change. Pure functions - the same input always gives the same output. Functions with limited side effects - any changes, or mutations, to the state of the program outside the function are carefully controlled

See the page

Nadieh Bremer Skillshare

During the weekly checkup Danny pointed me to the skillshare course of Nadieh Bremer. In her course, Nadieh talks about the concepts she uses to create graphs. It's her goal to show interesting and visually pleasing visualizations. She goes beyond the basics and creates something unique. In my current design, I implemented the techniques she described in her course. An example of this is combining the brusher from a timeline graph with a horizontal bar chart.

See the page

D3 @FreeCodeCamp

I used freecodecamp.org to practice the techniques used in D3.js. I came across these lessons as I was brushing up on my functional programming skills. The d3 course was a great introduction to d3. In these you go over the basic principles from selecting elements, adding data, styling to using scales and adding the axis. When you are done with these you know how to make basic graphs like the bar graph and scatter plot graph. Here you see the notes I made whilst learning those basics.

See the page