#KnowledgeGaps | Clean D3 Code Written with Classes

#KnowledgeGaps | Clean D3 Code Written with Classes

Ramping up on D3 last month was brutal. Thankfully, there are tons of courses online to make it easier for you to pick up this library. You can find those link in last months post. This month deeper dive into the JavaScript, which is a subject with even more courses to dive into.

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.

The principles underpinning D3 are nothing more than: HTML, CSS, SVG and JavaScript with the emphasis on JavaScript. In the early stages that’s where most of your effort should be. Just like handstands. Most of the on-ramp is spent learning how to raise your arms above you head and strengthening your wrists. Certainly not as attractive as inverting your perfect posture, but necessary.

Objective

We are aiming to get this general form and function of what Ludovic created in Tableau with this dataset. A couple benefit we can gain with D3 are nice curves and smooth transitions. Oh, and developing the chart with D3 teaches you tons!

The Tableau Experience

The Tableau Experience

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.

The D3 Experience

The D3 Experience

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”

Switch out urls

Helpful Resources

Courses

YouTube

Articles

Visualizations

Tools

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.

Transforming Data

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.

We could have preprocessed the data to save ourselves the hassle here and also save our browser from doing this hard work. But I’m still learning JavaScript and I wanted to use the For… Of… loops. I’m also not sure how many records that dataset would have become, but it would have been humongous!

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.

Enter Selections

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.

Merge Line

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.

Object-Oriented JavaScript

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.

Chart Class

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

The Slider

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.

Object-Oriented JavaScript

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.

OOP Pattern

Work Gallery

New Gaps

So far we have seen a slope chart and a line chart. There is soo much more that can be created with D3. Of course, it’s tempting to want to create more interesting visual forms, but I know more time is needed to explore the fundamentals of JavaScript and test this new knowledge.

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.

As always, you can reach out to robert@vizsimply.com with D3 or Tableau questions and also ping me on Twitter @robcrock

Thanks for reading!


Let's Make a Tableau Extension - P1

Let's Make a Tableau Extension - P1

#KnowledgeGaps | Learning How to Build a Slope Chart with D3

#KnowledgeGaps | Learning How to Build a Slope Chart with D3