D3.js: hello world!

I started by following the video below by Shirley Wu and Daniel Shiffman. I already followed a couple introductory online tutorials, but Shirley's intro to D3 seems more robust and creative, and I thought it will make for a good first D3 "hello world" type of project.

‍

In the tutorial they work inside of an Observable online notebook (the creators of D3), but I want to work in VSCode so I could get full control and be able to integrate libraries more easily. On the other hand, working in VSCode requires me to make adjustments to what is done in the tutorial, as not everything behaves the same way. For example, in Observable you can call a dynamic variable inside of an HTML path tag, but this doesn't work in VSCode. The way to fix this, apparently, is to inject the variable into the element after it's created. I felt like I had a good enough intuition as to why this didn't work and was able to work it out myself (+some googling), and I also learned from it, so for now I think I'll keep using VSCode over Observable.

‍

In the tutorial they're loading a .json file from Github, but I wanted to use a different dataset. I was looking for something that would work similarly to the film ratings in the tutorial. I settled on population and area data on some Brooklyn neighborhoods. I gathered the data manually by googling and typing the results — they surely aren't accurate, and I couldn't find precise data for all of them, but this is just an exercise. I then exported it as a .csv file and moved it to the project's folder and referenced it in the code. I made sure I'm getting an array of objects, one per neighborhood, and that each has key-value pairs of the data points, same as with the .json file in the tutorial.

‍

‍

There were a lot more things that required adjusting from the tutorial, so after some troubleshooting I'm glad it finally worked! Some had to do with syntax, and some with things like rearranging and reordering. For example, in the tutorial they just scaled each svg according to a data point, but I added text and didn't want it to be scaled too, so that required separating the paths into a group inside of each group (yes) inside of the svg element. This makes sense but also wasn't very intuitive.

Anyway, I feel like doing this has really helped me to understand D3 (and Javascript!). It has a lot of little quirks but I can see the amazing potential this library has and can't wait to keep exploring it :-)

‍

I also used this as an opportunity to keep practicing working with both git and Github. So this little project is live through Github pages. And the code can be found on this repo.