#KnowledgeGaps | Clean D3 Code Written with Classes
As a reminder, this #KnowledgeGaps project is designed to give any joiner space to develop deep knowledge. The knowledge developed in this space should be built as close to the first principles as possible. The thought that deep knowledge will serve you for much longer and that it simply takes longer to develop such a level of a familiarity.
The final result of your work might not look impressive, but I’m sure the knowledge you have gained is gorgeous. This December is exactly one of those months where much more time was spent under the hood on elements you might not notice on the surface.
Tableau only updates the chart after you let go of the slider. Obviously, this isn’t the most pleasant experience. I’d go so far as to argue that it’s a different experience than what you are expecting all-together. You want to drag the slider back and forth along the timeline to explore the data. Sure, dragging and seeing the line shift around is fun, but besides being fun you also get a sense of volatility during certain periods you won’t get releasing the handle at every point of interest.
It would be nice if you could hover over the lines to learn more about the different countries as you do with Tableau’s tooltips, but the code required to add tooltips was more than I felt like biting off. Again, not trying to code up the BEST solutions every month. There was a lot learned without the need to add tooltips.
You can follow long by downloading either of the gists here or here. The first link includes the SVG defs that allow us to get those colors. The seconds is slightly simpler, but also not as complete. To see the charts tied to each gist, just replace “gist.github.com” with “bl.ocks.org”
The Hard Stuff
Calculating the difference
It wasn’t just the calculation that proved challenging, but the fact that these numbers needed to update for every line at every point along the time line. That’s a lot of processing! Will it be smooth??
If you know a better way to process this data, please put me in my place.
For this calculation we need an array of the life expectancy for the selected year for every country. We can get that by filtering the clean data by the year. Then we transform the data with D3’s nest utility function. Nesting the data gives us and array for each country (key). We’ll loop over these keys later to draw a path for each.
Knowing when to Merge
What you need to know here is that we are keeping the same lines on the screen that we plotted at the start.
We aren’t adding new lines or removing any lines. All we are doing to the lines is updating them with the new life expectancies. In D3 lingo we are say you only need to merge data. No need to deal with the Enter selection any longer.
Looking back this seems like a no-brainer, but it’s a tricky aspect of D3. It’s a concept tripping up a lot of people myself included. I’m getting better though. Curran’s videos on the General Update Pattern have been extremely helpful. I would recommend following along with his examples until you think you get it, then test yourself with a small project to see what knowledge gaps still linger.
Getting this to work the first time felt like magic. It’s these ah-ha moments you live for as an eager learner. All these magic moments are just on the other side of the challenging work. Stick with it.
I love how this code looks after organizing everything with classes. I also believe it makes tying the charts behaviors together much easier. Rather than needing to have the Slider and LineChart share the same function scope, you can call these object methods outside of the classes and intuitively target the Slide and Line Chart or any other Class you want to create.
Another win with this approach comes from creating a general Chart class that has methods and properties both the Slide and LineChart class can use. This greatly reduced the duplicated code involved with the data cleaning, margin convention and scales.
Coloring Line Segments
Big shout out to David B creating a quick example of how my idea would come to be in the code. I had fully given up on coloring the lines, but with David stepping up I knew I have to push forward and do my best to incorporate the promising example into the code. Once I got the hang of what defs are doing and how lines reference them it was just a little more wiring to get it all sorted and look that much closer to Ludovic’s original.
The Easy Stuff
This could have been very difficult, but sliders are sexy. This sexy appeal has created an abundance of examples. No need to recreate the wheel.
I rarely succeed in rendering a sensible visualization on the first go. However, this time around, the graph seemed to work out just as it was supposed to. Of course, the data wasn’t in the right form, but I at least saw the lines on the screen quickly. This gives you that validation to know all is working and well in the world. Again, credit to this early win goes to the Object Oriented pattern.
Next month I’ll grab a different chart type from Ludovic’s Tableau Public work that’s still fairly simple. And rather than simply referencing the full D3 library I’ll try to only pull the pieces of the API we need for our chart. This will reduce the amount of code in our code base and teach us more about the modular nature of the D3 library.
Thanks for reading!