Building a D3 Site with little D3 Experience

I had never looked at or attempted to code in D3 before this class. I struggle with dyslexia, so my process in learning and attempting a new technology is to pick apart an existing example and modify it. For this exercise, I followed this tutorial by Jonathan Soma, which explains how to code a dynamic bubble chart.

I wanted to keep the data simple: two columns with a name and a number. Relaxing the complexity would help lessen my confusion and give me a good start to understanding the mechanics of D3. I really like beer, so I found a simple dataset on Kaggle that listed breweries by state. I was worried that it would be too much, so I parsed the data down to the state name and the number of breweries. This gave me two simple variables to correlate.

I wanted to keep this visualization simple, so the question I am answering is "Which states have the most breweries?". Since there were two variables and max number was 284, I chose a bubble chart to visualize this. I decided it didn't need to be confined to x and y axis, and after browsing dozens of examples, I found that tutorial. I liked that it was an organic blob mass, similar to the bubbles produced by carbonation in a beer glass. And I also liked that I could explore a little bit of animation and learn how the force code works.

The frustrating part of this was getting the code to pull in the data, but luckily Ben was able to help me and point out that the method of pulling data that the tutorial used was for an earlier version of D3 and was depricated. He set me on the right path by explaining how the function(data) works and that everything inside of that function is a manipulation of the data. Usually, this is where I feel bad because it's such a simple thing that I should have known, but my dyslexia makes it harder for me to wrap my head around these things. Once I reworded attributes and arranged swaths of code to exist under this function, I got it to work with my data!

I then set to styling the bubbles; I made them orange to resemble ale, the mouseover brown, and the selection red. I coded the mouse-over to highlight the state name and the click to show the amount of breweries. This is where I discovered that you can style an infobox! I didn't want this info to show up generically, I wanted it to vibe with the visualization. I set up styling in the ID code for the info boxes in the CSS and now it was a cohesive visual.

The next time I attempt this, I would give myself more time to really explore other visualizations that can be created with D3. I would also choose a more complex dataset so that I can play with axis, and I'd like to code custom tool tips.