After finishing the front end certificate, I wasn’t sure what to do next, since the Data Visualization learning challenges aren’t available yet. I grabbed an O’Reilly book (Data Visualization for the Web) which is a very accessible introduction to D3. I believe you can read it for free online at that link.
Unfortunately it covers D3 v.3- and the current version is D3 v.4. This did force me to consult the D3 documentation to update some of the code. It hasn’t been too much of a problem. For example, d3.scale.linear becomes d3.scaleLinear, etc.
After getting through most of the book, I figured I’d tackle the first D3 project, the bar chart. It wasn’t easy, but once I slowed down and really understood what I was doing, it came together. Other than some slight scale and font differences, I think I nailed it!
Congrats! D3 isn’t an easy one to wrap your noodle around, so I think it’s quite the accomplishment to be able to make a simple bar chart. Looking at your code, I think you’re pretty well equipped to do all but the final project easily (force directed maps are weird). If you’re looking to up your D3 game, I have a couple of suggestions:
The margin convention is pretty straightforward - instead of just having one variable for padding, you use an object to specify the chart’s top, bottom, left, and right margins. It could take you a bit to get the hang of it, but it’s something you’ll see in other people’s code, and something you’ll want to use yourself for sure. The second is something I haven’t seen in a lot of other people’s D3 code, even the professional code I’ve looked at, but I found it improved the structure of my D3 code immensely. In fact, I feel it improved my JavaScript skills overall. Mike Bostock himself (the creator of D3 and author of both articles) notes that the pattern can be difficult to get used to, but once you do, it will feel very natural. Don’t worry too much about either, though. They’re certainly not required for any of the projects.
I’ve seen the margin convention used in some examples before but didn’t try implementing it. I’ll definitely give that a shot. I thought about wrapping the code for making my chart in a function, but that’s about as far as I got- so the technique in the second link is something I’ll look into as well. Thanks for the tips!