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

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

I’ll be honest, this post is a little premature, but in the flavor of what’s to come we’d rather share on a consistent cadence and improve slowly rather than delay and miss out on your feedback.

So, what’s this all about? Ludovic and I have started the journey of learning D3 together. I have been dabbling with the library for some years, while Ludovic is fresh. We see our differences as a huge benefits. I benefit from Ludovic’s slick style and constant questions, while he can learn from mistakes I have already made.

Following along, should allow you to pick up on our tips so you can make our work your own. Simply forking (copying) the code and editing to your hearts’ content.

Our aim is to write every month of 2019. This month and the next are experiments before we start the new year. We hope these early posts help us find our groove, learn what we like, what’s worth trimming back and, of course, understanding how we can share what we’ve learned in a way that’s useful.

So, yes, this is your invitation to share feedback on what you would like to gain. Call out areas you would have liked us to dive into more detail. I’m sure we can come up with creative ways to make this project productive for you as well.

DM myself @robcrock or Ludovic @Itavernier7 at anytime.

I’m already very grateful for the format feedback Alli Torban of Data Viz Today has shared.

Objective

Recreate Ludovic’s viz for the #SWDChalenge on Slope charts with D3.

 
 

We picked this viz for a couple different reasons. Slope charts aren’t overly complex and we need a softball this month, as I’m a bit rusty. No need to dive right into the deep end before at least warming up. Another reason is Ludovic’s original visualization gives us a chance to put one of D3’s strengths to good use by transitioning between the two scales.

This redesign gives a few wins. We reduce with number of charts from two to one. Educate users by letting them toggle between the two scales to understand the result of this transformation. And I’d argue that we earn more engagement through this interaction.

Those working with Tableau know you can simulate transitions with the pages shelf. However, D3 provided this capability with their robust transitions API. Mike Bostock wrote about them at length in a post titled Working with Transitions.

As I began collecting data for this visualization the thought of choosing between different countries seemed like a feature we should add as well. Hello, scope creep 👋 I knew it was possible and the data was available, but I wasn’t sure if we could make it happen.

Thankfully, we were able to quickly meet our original goals, so we had more time to spend building out the program to accommodate this additional feature. And yes, updating the data for different countries made the code much more complex, but this learning was well worth the strain.

 
 

For those new to D3, you should know there’s a big difference between creating a static chart and one where your data needs to update. What this might mean for you is that creating beautiful explanatory visualizations is much easier than fully featured apps. It seems obvious when I put it in those terms, but some features we take for granted in applications like Tableau are much more of an engineering challenge than a data visualization one. You can save your self a lot of hassle by avoiding those features.

Personally, I like learning how to build apps that are more feature rich, which is why I am taking the Object Orient approach. As a freelancer, I aim to apply these skills to client project which are likely going to require me to be able to hand off code that works with different data sets and accommodates exploration.

Another benefit of pushing ourselves past the simple static charts is that working with the trickier bits of this library expose more knowledge gaps that need to be filled. Hopefully, you’ll be encouraged to do the same.

What resources did we find helpful?

As this is my first big dive back into D3 in over eight months, I knew I was going to need a refresher or two. This month included classes, articles, YouTube and much more. The coming months will likely involve more JavaScript classes and less dedicated strictly to D3 as mastery of the library requires mastery of this language.

Courses

YouTube

Articles

Visualizations

Tools

So yeah, A LOT of time was spent ramping up this month. I might have put more into my head than I can apply right now. I do like to learn 🤓

Sometimes I find myself studying more than doing. This might not sound like a problem but can easily turn into procrastinating. That’s what deadlines are for, ha.

What was harder than expected?

  • Tooltips

    • There is plenty that’s new to me and elegantly positioning elements of the DOM is one of those areas I’ll need to improve on. This was much harder than it should have been, but we got there in the end.

 
 
  • Event handling

    • A single event firing from a single element isn’t a problem, but it wasn’t straightforward as to how you can have multiple actions fire from a single event. I was able to sort out this issue by reviewing some of my old code where I handled this before and reading Mike Bostock's great documentation on Event Handling.

That insight was put to use on the mouseover.highlight and mouseover.tooltip.

  • Smoothly entering and existing new elements

    • Okay, I didn’t expect this one to be straightforward, but it was honestly much harder than I originally anticipated. I watched Curran’s videos over and over again trying to understand how his scenario mirrors mine so I could leverage his brilliance for our gain, but he has clearly learned more than meets the eye in studying this code base for as long as he has.

 
 

What was easier than expected?

  • Getting Ludovic on board

    • I asked Ludovic to team up on this one because of an admiration I have for his style. I also think his designs lend themselves to D3 better than they do Tableau. Upon asking him to jump on board he let me know D3 is a library he has been wanting to learn for some time. So the match an instant win/win. I’m excited to see what we’ll be able to create together and what D3 knowledge I can pass on.

  • Creating barbells

    • Maybe it’s my rustiness that’s to blame for expecting this to be so hard. When it came down to creating these shapes it couldn’t have been easier. Positioning lines and circles are pretty straightforward.

 
 
  • Swapping the scales

    • I did have to fiddle with this code throughout the iterations, but for the most part, it just worked. Swapping out Log for Linear and Linear for Log and regenerating the scales transitioned everything as cleanly as I would’ve liked.

What new gaps have been exposed?

  • There is a lot more to learn about the general update pattern. I’m going to watch Curran’s talk again and again while studying my code to figure out how it all works. It still haven’t quite sunk in yet. At the moment I can get it to work, but my copy/paste here and there approach feels a little like dragging pills around in Tableau until you get something close to what you wanted.

  • I’m going to continue learning how to code JavaScript in a more Object Oriented way. At the moment I’m pulling bits I understand from here and there and making tweaks. I’d like to get the point where I could sketch out the programs on paper. I feel like understanding JS to this degree will allow us to think more about how the users' interactions might break the app and how we can write the code to account for these edge cases.

  • The last big area I’m thinking about right now are Promises. I know the Tableau APIs leverage Promises, so if we want to combine D3 and Tableau down the road that knowledge will serve of well. But I think I can also put Promises to use in our D3 applications right now. Currently clicking a button calls a couple function one after another, kind of. Since JavaScript is asynchronous some function might finish before others even if they aren’t written in that order. Promises give us more control over this flow by only executing the next function upon successful completion of the prior function.

Progress Gallery

Here you can see some shots taken along the long road to completion. Always from to look back AFTER a successful build to see how for you have come.

Again, we’re still working out the format of these monthly projects. Next month will be a different chart, different approach, but still D3. It’d be great to get feedback on what’s being shared so we can make it more useful for you.

Thanks for reading!

Don’t Learn Data Visualization Aimlessly

Don’t Learn Data Visualization Aimlessly