How did you learn D3.js? Having Trouble

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?

Try this :
beginner friendly

My struggles with D3:

  1. I want to just jump in, yet it seems like I need to know a bunch of the api to get even a simple graph up.
  2. Many of the tutorials are big blobs of code that don’t convey their meaning effectively. (Ex: Why a linear scale instead of Ordinal? Why group your svg elements in a g tag? How does an axis work? Does it work on every graph? Why? Why not? Etc.)
1 Like

@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 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, 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

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:

  1. Access data : Look at the data structure and declare how to access the values you’ll need
  2. Create chart dimensions : Declare the physical (i.e. pixels) chart parameters
  3. Create canvas : Render the chart area and bounds element
  4. Create scales : Create scales for every data-to-physical attribute in our chart
  5. Draw data : Render your data elements
  6. Draw peripherals : Render your axes, labels, and legends
  7. 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: