On This Page...

Week 12: Storytelling Tools: Scrolling, Steppers

Homework Review

Chroniton.js Slider Moved

FYI: New home for the chroniton.js play/pause d3 slider control is here:

Reminders about Bugs

Things to check for:

Reminders about Git Workflow

You should be working from your local files, using your local server, and committing and pushing to the repo. DO NOT EDIT FILES ON THE GITHUB SITE. You will be out of sync then. See week13 for reminders about commands to use when pushing your code.

Reminder about Good Code Structure

Please avoid having a page structure that mixes html for the body with script elements -- We don't want this sequence of sections:

<div id="chart"></div>
<p>Text here</p>

<script>
...js Code for chart 1...
</script>

<div id="chart2"></div>
<p>More text here</p>

<script>
.... more js decode
</script>

Just don't do that, it's bad form to mix the html markup and script this way

Make your HTML and CSS to reflect the full project -- a single page app. Your html should have placeholder elements for the charts in divs, for example: <div id="chart1"></div>. Then you will use d3 to select that element and append the svg for the chart.

Load all your data in queue, and then use a function to call the functions to draw your charts.

// we use queue because we have 2 data files to load.
queue()
    .defer(d3.json, "data/file1.json")
    .defer(d3.csv, "data/file2.csv")
    .await(loadedData);

function loadedData(error, file1data, file2data) {
  // after the data is all in, we can draw the charts with it.

  // you might have another function or series of steps that manipulate data here.
  // then, call the code to draw the charts.

  drawChart1(file1data);
  drawChart2(file2data);

}

function drawChart1(data) {
  // nicely encapsulated code that takes the first data set to draw...

  var fullwidth = 600;
  etc.

  var svg = d3.select("#chart1").append("svg")...

}

function drawChart2(data) {
  // using the second data set for the next chart...

  var fullwidth = 300;
  etc.

  var svg = d3.select("#chart2").append("svg")...
}

You will probably want to have multiple files for your javascript code.
Remember, a file is not a function -- all the variables and code in one file.js will be in your global namespace after you load it.

One way to do this is to have a structure like:

Storytelling Structure Techniques

A Good Paper to Read

This is a smart paper on story telling in journalistic data vis. Journalists should read it.

Steppers ("Slideshow")

These are button-based stories, where the button changes the data view and the text, usually.

Reference Examples:

A Tutorial:

Btw, useful CSS Designs for Buttons:

There's an example you could modify in:

Scroll-Triggered: "Scrollytelling"

The example that influenced a lot of folks when it came out:

Jim Vallandingham's tutorial material:

Based on Jim's tutorial and talk, a Mike Freeman tutorial, but with a slightly modified code library:

Truth: I spent a lot of time trying to adapt 2 graphs to these techniques in both the Bloomberg framework in graph-tools.io and Jim's.

The example for the homework is much simpler, a combo using Mike Freeman's modified version of Jim's scroller:

Some issues that came up in "real examples": going backwards has to be handled too. This causes a lot more complexity than one would hope. Also, the beginning and end states are annoyingly placeholdery.

Some Simpler Layout Demos

Even if you don't do charts in it, this is a useful toy/demo:

Examples of Scrollytelling

Jim's list:

Position-based scrolling (as Mike Bostock calls it):

Scrolling with steppers:

Yet more scrolly goodness:

Zoomytelling, a subgenre?

Design Tip: Avoid Scolljacking

Read: http://bost.ocks.org/mike/scroll/

"Scrolljacking" is bad.

Contrast this MacPro page: http://www.apple.com/mac-pro/?afid=p238%7Csf9lg0Y3B-dc_mtid_1870765e38482_pcrid_91262087647_&cid=aos-us-kwg-mac-slid-
with the pencil examination in http://www.fiftythree.com/pencil.

In the latter, and in most of the good scrollytelling examples, the user can speed up and reverse to control their movement. Motion is dependent on the mouse, they aren't hijacked and forced into someone else's pace.

graph-scroll.js from Bloomberg/Adam R Pearce (even he says he has to read his source to use it :( ):

Scrollmagic (I couldn't get it to work well with a simple chart case. It's aimed at animating things on scroll, but not d3):

Mobile Touch Slider

Storytelling With Maps Tool:

Storytelling with Pageflow.io:

Example: http://pageflow.ericmakswitat.de/research

Javascript Tips

Switch Statement (and a Functional Alternative)

You'll see this in the Mike Freeman example and the homework based on his slides. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch.

switch (expression) {
  case value1:
    //Statements executed when the result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the result of expression matches valueN
    [break;]
  default:
    //Statements executed when none of the values match the value of the expression
    [break;]
}

However, notice that a lot of Javascript developers argue against switch statements in favor of using objects.

String Character Replacements Reminder

A useful string replace function -- replace spaces in a country name with underscore:

var country = country.replace(/\s/g, '_');

This comes in useful for creating id's on SVG elements for later reference in code.

Recent Interesting Things

Schedule Notes and Grading

I'm busy this Thursday and Friday with visitors, but can be available Wed 11-1.30.

I'm away the last Mon-Tues of classes, April 25-26.

If you want your project to get review comments before I grade it, I'd like it by April 29. Projects are due on Thursday May 5.

Project reminders:

Homework

Readings:

Homework 1 (15pt): Make Progress

Send me the link to your updated repo, with: