Visualizations
With the help of D3, different visualizations can be made when the data has been cleaned up and transformed.
Since the library D3 was still completely unknown to me, it seemed sensible to start making a bar chart. I watched many of Curran Kelleher's videos on YouTube to understand the logic of D3. Despite the good explanation from Curran, I soon found out that I found coding using the library D3 extremely difficult.
What I really ran into is the coding itself. The moment I watched the videos, I understood almost everything but when I started coding myself, I didn't know where to start. I got several errors there including:
Uncaught (in promise) TypeError: _d.scaleLinear().domain(...).range(...).padding is not a function
Uncaught (in promise) TypeError: _d.json.selectAll is not a function
By looking up these errors in Google, I didn't get much wiser either. By watching Curran's videos again and by looking at Laurens' code from the coding lecture, I know now that I was constantly confusing the scales.
In retrospect, very logical, but not at the moment: It turns out that .scaleLinear () and .scaleBand () differ per type of value on your axes. You use the .scaleLinear() with numbers on the axis and in this you indicate at the domain a starting point (0) to the maximum value from that number series (max()). With .scaleBand() you use text such as country names or descriptions and in domain you include the text (by means of .map()). I only understood this very late.
But that was not the only thing I ran into. First I tried to load the first 5 values of my dataset. I did not see any rectangles on my screen. I searched online for a long time to find out how. For example, I thought the problem was in my code and I did not understand why I did not see an error.
By inspecting the DOM I saw te following:
<rect class="bars" x="3.0278884462151154" y="300" width="12.11155378486056" height="NaN">The reason why I did not see my bars was because by chance the first 5 parking spaces in my data set have no charging points / unknown number of charging points. Unfortunately, I spent a lot of time looking for the problem in my code when it wasn't actually even with my code.
Finally I could see the static bar chart I needed:
After this I started making my bar chart interactive. To begin with, I started by watching the Curran video - Scatter Plot with Menus. The problem was that I couldn't get out of this at all. When I tried to rewrite his code into the code I already had, my basic visualization stopped working. I did not get any errors, but at my axes I was constantly seeing way too many values, including double values. Also the rectangles kept piling up and I was not sure why.
With the help of @jordyfronik I found out that I had to use .exit().remove() to get that to work. This was due to the d3 data join principle.
But unfortunately this still didn't work the way I wanted. I found out that my rectangles could be seen upside down (so from the top of the browser down). Since I didn't get an error in my console, I knew the bug was somewhere in my code. I searched for this for a very long time, but I just couldn't find it. For this reason I started to rewrite the code from scratch (within the visualization of course).
With the help of Laurens' code, I finally managed to get my visualization to work. As you can read all in all, I struggled a lot with the d3 code. Because I have lost a lot of time watching videos, looking up errors and testing code, I have unfortunately not been able to make a spectacular graph. I simply had no time left for this. I did learn a lot from making this interactive graph and D3 in general.
Personally, I have no idea whether I should take a resit from school, but I do have the feeling that now I understand more quickly when I have to make a graph. I think that is the most important thing than getting a good / bad grade.
My Interactive bar chart:
