Hello, everyone. I know that there are already a few posts about learning D3 (as of writing this, FreeCodeCamp doesn’t have the D3 “learning” section complete), but I found that I didn’t really “connect” with most of the resources.
Most of the resources I’ve found are either old (v3, I know I can still follow them, but I’d rather follow a v4 tutorial) or very convoluted. It seems like I spend half my time trying to figure out why the graph won’t compile.
Really, I’m looking for a solid resource that can get me started.
So, what resources did you guys use to learn D3? Where were you stumped? Where did you to find the answers to your questions?
@Dereje1, Thanks for the resource. I’m looking into it now.
D3 is supposedly hard to learn - but it will reveal its secrets, just take it one step at a time.
You might find http://www.d3noob.org/ interesting. I’m not sure how many v4 tutorials this blog has, but even the older ones are pretty good.
Also I found a juicy looking book while exploring the site. It looks incredibly detailed. I wish I found this sooner.
I got a lot from this video https://www.youtube.com/watch?v=8jvoTV54nXw, the first half or so is all on svg if I recall - which I used with all the D3 projects. And the rest of the video is all D3, there should be some stuff to code along with. I do think they are using v3 in the video but i think most of it translates to v4 almost seamlessly. The biggest change from v3 to v4 has to do with using the simulations that you need for the force-directed graph. --the d3 docs as well https://github.com/d3/d3/blob/master/API.md
I collaborated to edit the book Fullstack D3 earlier this year with Amelia Wattenberger and I learned a ton while doing it. She does a fantastic job at explaining all of the weird edges of d3 in a clear, linear way.
One of the key ideas is that there are basically 7 essential steps in each D3 chart:
Access data : Look at the data structure and declare how to access the values you’ll need
Create chart dimensions : Declare the physical (i.e. pixels) chart parameters
Create canvas : Render the chart area and bounds element
Create scales : Create scales for every data-to-physical attribute in our chart
Draw data : Render your data elements
Draw peripherals : Render your axes, labels, and legends
Set up interactions : Initialize event listeners for interaction
While I had fumbled around building D3 charts before, breaking it down like this made it feel a lot simpler.
We started out by writing basic line charts of the weather, but by the end of the book I was making charts like this one: