Home - MartijnKeesmaat/functional-programming GitHub Wiki
Process
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.
Concept
This page document the process I went through to arrive at the current concept. What I want is to display each category with their respective sub-categories. Then show information based on each category. Information like the materials each category has. This is a problem. It's a huge amount of data to process. I think it's wise to separate these categories. First focus on the categories and then when there is room to work with, we can improve that.
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.
Quest for 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.
How I adapted the example code and made it my own
I reference the code I used when I use it in its entirety. For example with this wrap function. These types of functions are easily referenced. Libraries I use like D3 and examples I used as a base are referenced as an acknowledgment in the read.me. Below this code block, I show how I adapted the examples and made them my own.
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
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.
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.