This is a nice tutorial. I like the order and accessible way it introduces selections and data binding, which are some of the harder things to get into when starting with d3.
However, once you dive a bit deeper with selections and nesting, there are some things that are not immediately obvious how to structure. For example, when we implemented small multiple visualization, figuring out the best way to structure enter and update sets for nested data took a few attempts.
This is one of the main reasons I'm writing these tutorials - small multiples (nested selections) in D3 are explained very poorly in the official docs, and are a constant stumbling block for coworkers not very familiar with the library.
Sadly, getting around to properly explaining them will take another lesson or two.
Results after the first one fail to load in the latest Firefox. It looks like a Firefox bug btw, the style and script tags are not being added to the created iframes (except the first, which is always ok) unless I mess with the timing, either by using a 100ms delay in setTimeout() or a breakpoint with Firebug.
PS: it's a fantastic tutorial, thanks for writing it!
Agreed. This seems like a better introduction than other tutorials I've seen, but it could just be that I've already grokked D3's data binding model through some tutorials plus a bit of trial and error.
However, once you dive a bit deeper with selections and nesting, there are some things that are not immediately obvious how to structure. For example, when we implemented small multiple visualization, figuring out the best way to structure enter and update sets for nested data took a few attempts.