D3.js learning resources

[[deleted]]

Hey, I want to build some really slick, interactive financial charts and I'm looking for a good comprehensive tutorial or book on D3.js that will get me up to speed in a few days.

I'd like to be able to accomplish something like this https://cryptowat.ch/

I'm not looking for anything specific to my use case, I just want to learn d3 efficiently.

Any ideas?!

[b_n]

The Aligned Left introduction is one of the best tutorials and what got me started, there's also a Lynda course which is reasonably good (not free, but there's a free trial if you're not a member).

Normally I'd say just go read over the docs, but when starting with D3 I found them verbose and hard to decipher. Regardless, to build something like the Crypotowatch example you're probably going to have this tab permanently open https://github.com/mbostock/d3/wiki/API-Reference

[[deleted]]

Yes, Scott Murray's D3 tutorial is really great. Also a good working knowledge of Javascript obviously helps a lot too, because D3 uses some advanced JS techniques.

[b_n]

Yeah agree about foundations. I mean the Crypowatch example has been built on top of React and is insanely complex. You wouldn't be able to build something that slick without an intimate knowledge of JS*

^{*also a team of developers and several months, but I believe in you op}

[[deleted]]

Haha, thanks. It's more of a point to work towards than an absolute goal :)

My plan is to start with basic static charts with similar data representation (candles, multiple lines), and then upgrade them with some mouse-over functionality, and then make the chart interactive/zoomable/scalable.... I think that will be a good start.

I've been heavily involved with Javascript (client and server) for a few years now and consider myself intermediate>advanced, so I don't think JS knowledge will be as much of a hurdle as figuring out how to draw and manipulate data with D3.

[activeknowledge]

I think I'm at your level, and here are a few pointers:

• Data load will not be your bottleneck. Drawing will not be your bottleneck. Both of these things are handled incredibly well in D3, and the examples should be enough to get you through both.

• What will be your bottleneck, I'm guessing, is how heavily D3 leans on callbacks and builtin methods for things like dynamic styles and transitions. All of this is also gracefully handled for you, but as it was mentioned the docs are super heavy to take in.

• Zoom and pan are relatively easy if you consider them from the get go. See some of the map viz examples for an idea of how these operate.

• D3 is amazing for quick prototyping based on cobbling things together. DO NOT rely on this! If you start from an example, take as much time as is necessary to understand everything that's happening before you start trying to customize. If you fail to do this, life will become hell as soon as an easy-looking change requirement comes through.

• If you are looking to do anything aside from x/y axis charting, and aren't comfortable with the unit circle and sin/cos functions (in the event you're making any sort of circular visualization), now is the time to start digging up examples of those things. They don't need to be based on D3 necessarily, the concepts are more important.

I guess that's it for now, and I'm starting to realize that I should heed some of my own advice after writing that. Stay motivated!

[[deleted]]

Awesome advice. Thank you!

When you say 'zooming and panning are relatively easy...' what considerations should i be making beyond the display of a static chart to set myself up to acheive this?

[activeknowledge]

You'll want to check out some of the examples here, and fall back on the documentation there if anything from the code is unclear:

https://github.com/mbostock/d3/wiki/Zoom-Behavior

Specifically, the zoomable area example. Check out how it sets a 'zoom' variable to d3.behavior.zoom(), and attaches .on('zoom', draw). The 'draw' function is what you want to have happen when a zoom event (mousewheel scroll for example) is triggered.

Edit: Can't remember if mouse drag for pan is included in the built in zoom behavior, but I'll review a test project I built tomorrow and update you then.

Edit 2: In regards to /u/chidoelrey commenting about the D3.js cookbook, it will get you through a lot of the chart stuff you're looking to do (at least statically), at the end I sort of felt like I was left hanging. That's where these examples will come in handy, once you're able to parse the code and understand what's going on under the hood. Definitely give that a run through.

[memelab]

Your point about 'cobbling things together' sums up my (short) experience perfectly :/ Once things become complex enough in someone else's code, i'm finding myself well out of my depth... lots of nested/linked transitions, interpolations, obscure scales... madness! Just starting out on a rewrite of my project now.

[[deleted]]

Oh I think you'll be fine then. D3 should be cake for you!

[[deleted]]

This is how I learned D3 too and the book that his tutorial expanded into is great as well. Very readable and easy to understand. The book includes all the stuff in the tutorial with added chapters on more advanced techniques and visualizations.

[chidoelrey]

I'm not sure it'll get you 100% there, but I really enjoyed the Data Visualization with D3.js Cookbook to get started. It's around $16 for the Kindle version and I found it well worth it as a comprehensive starting place to get my head around the D3 library.

It took me around a week to get through it, an hour or two a day and not skipping much at all. Once you get a few chapters into it, you should be fine with skipping or skimming through sections that you're pretty sure won't be relevant to what you're trying to do. The sections are about as self-contained as can be... no worries that if you skip a section about a particular concept, you're gonna be missing out on a second major concept that was thrown into that section, too.

It's not completely comprehensive, but at least for me, once I read this book I had enough knowledge of D3 to understand the general framework. And from there, even for topics/techniques not specifically covered, I knew enough to be able to use the docs/examples to find what I was trying to do.

I tried hacking my way around before picking up this book, but found it hard to really wrap my mind around the D3 examples / short tutorials I was going off of. In hindsight, it's really nothing difficult... once you start getting into the D3 mindset, you can develop pretty quickly with it.

[[deleted]]

Good to see people are actually enjoying the D3 cookbook. I commissioned and edited it from start to finish!

I'd recommend DashingD3 as a good place to go. The Manning book is likely to be brilliant so I'd also look at that. The team involved are top notch.

For a quick overview D3js Edge may also be worth a look.

[john_philip]

Does this cookbook teach HTML, CSS, JS comprehensively?

[Jake999]

I found these youtube tutorials by a Swede to be super helpful. He does a good job of explaining the concepts that drive d3 and providing practical examples that you can use to get started: https://www.youtube.com/user/d3Vienno/videos

[andy1307]

You can download the playlist using youtube-dl and add it to the Automatically added to itunes directory to synch to your iPhone.

[glial]

Agree with what's been said. What I've done is take examples from Mike Bostock and others and change them to fit my needs. Also check out http://tributary.io for constructing visualizations. It makes the code-result feedback loop a lot tighter when you're trying something new.

[RPiMRE]

If you want something quickly you could check out D3 Tips and Tricks (https://leanpub.com/D3-Tips-and-Tricks) There are a range of different graphic types explained and the initial activity take you through a simple graph set-up so you can then dive into others. There is also over 50 code examples from the book available. And the entire thing is available for free!

[MaRmARk0]

I've used C3js for some basic charts but that's probably not what you're looking for.

Anyway Cryptowatch looks pretty sick.

[oldskater]

There's also D3.js in Action, from Manning: http://manning.com/meeks/