How did you learn D3.js? Having Trouble

How did you learn D3.js? Having Trouble
0

#1

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?


#2

Try this : https://www.dashingd3js.com/table-of-contents
beginner friendly


#3

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.)

#4

@Dereje1, Thanks for the resource. I’m looking into it now.


#5

D3 is supposedly hard to learn - but it will reveal its secrets, just take it one step at a time.


#6

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.
https://leanpub.com/d3-t-and-t-v4/read


#7

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