Wait...Awesome things are coming your way!...

D3.js & Scrolling for Journalistic Narratives.

Single Button Economy: Transitions for Journalistic Narratives Where the Reader Only Needs to Swipe

I started to produce more D3 graphics for my journalistic stories. Last year some of the narratives received some criticism. Among the advice I got was that some graphics would have too many buttons, options and possibilities. One of the issue people brought forward in particular was that some of the button, handles, and clickable dashboard interfaces are cool, but still too complicated and that these extra interactive features would distract from the story. The desire is clearly to help readers focus on the story, not on the navigation. I went on a quest to find new libraries (in order to reduce the complexity for the user, but keep up the sophistication in data driven story telling) and came across some awesome examples from some awesome people such as the one from the Tampa Bay Times (this one), the example by Bloomberg’s data graphic department on climate change or this one by Elliot Bentley at the WSJ, or this - one - done via the comic strip technique (here). All examples have in common that the reader don’t have to do much more than swipe or scroll away.

The team at Hugeinc.com wanted to know how page design impacts these user behaviors and to what extent visual cues help users scroll below the fold. After intense testing, the result was that no matter what visual incentives given, almost all participants scrolled.Source: Hugeinc.com

As I love D3 and the transition method, I wondered whether there are JavaScript libraries that could support me in my quest to create these beautiful scrollable interfaces by including my d3.js graphics. Before we talk about what I found, let us have a quick looks at what d3 transitions can do to your visualizations. Source: Bloomberg

Transitions in D3

Here is a simple example taken from Scott Murray's D3 tranistion chapter. The example below shows how Scott's graph randomly generates data when you click on the canvas.

Click on the Graph

Updating events

With Var dataset you define the initial data array for the height of the bars.

First you set the domain and range for the bars. Next you would arrange the update funtion with "on("click", function()", which lets you replace the dataset array with a random set of numbers, between 0 and 100.

Finally you would reset the yScale domain, select all the bars again and transition with a delay to a new set of attributes, including y position, bar-height and color fill

The example code and additional explanations can be found in chapter 9 of Scott Murray’s Github resources page or in his D3.js book.

It’s a good example to understand the update function, event handlers and how to work with transitions and delays. Although the graph is looking good, as a story telling journalist, I need something slightly more complex.

What the experts produce

It's worth to check out Adam Pearce's projects on roadtolarissa.com (many of them of the scrolling kind). Graphic-Scroller.js is a neat idea, brought to us by Adam Pearce, from the graphics team at Bloomberg. Graphic scroller allows you not to have to start with your scroller project from zero. The reusable scroller graphic concept mentioned also in Jim Vallandingham’s tutorial post is based on Mike Bostock’s reusable chart concept.

The whole idea is to reuse code, and not to have to start from nothing every time you want to begin a news related scroller project. The code for Jim’s js file, with scroll detection capability (scroller.js - here), is partly based on Adam’s work (as far as I understood). One reason its worth to repeat some of the stuff Jim has already covered in his posts and presentations is that the capabilities and functionality of the scroller seems to be too important not to be mentioned many more times. Besides, the work by Jim and Adam put out there for all of us is just pure awesomeness (thanks guys to make our lives so much easier).

Work with Scroller.js

In April 2015, Jim Vallandingham had the second time the chance to present at the OpenVis Conference. His talk cirtainly had enough power to inspire me to start new projects, but possibly also loads of other journalists too. He made the scroller the core topic of his talk, which you can access here.

For non-experiences programmer, or designers who want to learn new tricks and new ways to use d3.js (like me), it helps to sometimes break down other people’s code into tiny little pieces and to learn from it. Below, please see the d3.js code by Jim Vallandingham scroller visualization broken down into parts. His full tutorial can be found here

(please note, as I am not an expert, I just tried to explain it as good as possible, let me know if anything went wrong somewhere, thx!).

How to start with your own scroller visualization?

I don’t want to repeat the same story Jim already told in his blog post. Instead, I want to talk more about what he did with the D3 graphics in particular and how to place your own d3 code snippets into it. Jim already covered in detail how the scroller works (so apologies that this isn’t covered here in full of its detail).

The example he built with the filler words and word-count functions seems at first rather specific, but can be easily broken down for your own data and d3 data graphics, as long there is a general understanding of d3 functions and methods. More on the basics on the D3 Wiki page.

Structure of Scroller Code:

The HTML file for the scroller viz is fairly straightforward. You first create section elements, in which the text that will sit next to the graphics will live in. The d3 graphics will appear in the #div element added after all the sections with the id #viz (for Jim’s example).

Every sections also links to a setupSections activateFunction, and indexing. When the user scrolls across the sections, the functions are fired with an event handler (via scroll.on, updating progress events and displaying your charts in accordance with the index scrolled on).

Sections.js for your own D3 charts

  1. The scrollVis function section
  2. The chart function section
  3. The setupVis function section
  4. The setupSections functions already mentioned above
  5. The Update functions
  6. The Data Functions
  7. Display and data loading

Knowing these parts well will allow the non-d3-expert (like me) to re-use Jim’s example code and the scroller.js file and provide a good base to insert your own d3 code snippets accordingly.

The first part is scrollVis. It contains all the code for setting up the scales, ranges and domains for the d3 graphics. Here you must specify your own parameters.

Charts setup: define data going into chart selections

First one shall append a svg element and define a width and height (as you have done it for every single static d3 graphic). Next, define this g element, which is the group element that will be used to contain all the elements for the graphics.

Now you can bring the data in from the data functions. Var wordData takes the data from the getWords function using the rawData from the tsv file. Var fillerWords just grabs the data from the column called “filler” in the tsv file. Then use the groupByWord data function to define fillerCounts for the barchart graphic with the fillerWords data. Then the scales are defines.

To grab the right data for the histogram, the get histogram data function helps. The getHistogram uses the d3's histogram layout (Mike’s explainer link here - and example histogram can be accessed here) to generate histogram bins for the Jim's word data. Then he sets the histogram’s domain. Finally, setupVis, with all the data we just defined for the charts (wordData, fillerCounts, histData) is called, and so are the setupSections.

Setting up your charts

In order to transition, you first need to set up the charts. Here you would define and insert the d3.js code you created.

SetupSections: Displaying your graphics, and hiding them again

In this part, you finally can hide your graphics. I know it sounds strange, but in order to scroll both ways (up and down), Jim explains that one need to hide graphics and make them appear via their opacity settings. You need to experiment a little with your own coded graphics, but it works and is not hard to figure out (as long as you always use transition(), in this part of the code).

Helper functions to hide or show axis:

The helper function for the axis helps you to insert it into the setupSections, via showAxis and hideAxis.

Loading your data:

In the function display(data) we can load our tsv data via the d3.tsv method. Here we can also find our scroll.on event handlers. Jim provides a very good overview of the progress event handling in his tutorial and how the scroller works. For more information visit Jim's tutorial here. I hope I could help with some clarity on the scrollerisation. Hope we see many scroller d3 visualistions for journalistic story telling soon.

Please note: All the credit goes to Jim's wonderful presentation, his tutorial, his example code, hist presentations and insight.

More tutorials and resources on transitions and scrollers

Want to learn more about the scrollers and how you can make use of it in your journalism projects? Here are some resources (again, thanks to Jim for some of his stuff too).

Adam Pearce Demo/Documentation of Scroller.js
Jim Vallandingham So You Want to Build A Scroller
Jim Vallandingham Scrolling In Data Visualization
Adam Pearce Demo of Scroller
Mike Bostock Working with Transitions
Mike Bostock Bostock's "How to scroll guide"
D3 Google group How to use scroller in your visualisation?
Jordan Koschei Why scrolljacking is a problem
Scrollytelling/ More scrolling examples

...And some additional JavaScript libraries

Jquery-mousewheel Dave Methvin
ScrollMagic The javascript library for magical scroll interactions
Graph-scroll Adam Pearce
Swiper Idangero
Skrollr Prinzhorn
Odyssey.js Geo Scroller
Pleens Pleens, the project
Pageflow.io Pageflow is a Rails engine

Examples of Journalistic (and sometime less journalistic) Scroller stories

Most programmers and journalists too learn from other’s best practice examples. Here is a list of some of the famous scroller visualizations you would find on the web. If you find your own project among the examples or you have an awesome project to include, be so kind and share the code with us (or feel free to drop me a line)