On This Page...

Week 13: Animation with a Timer, "Play" buttons, More UI

Homework Review

Design Tips

Leaflet and the countries.json:

Note: Mike B says Leaflet can't display map files cut at the antimeridian:

That's why this map is messed up: https://github.com/mbostock/topojson/blob/master/examples/world-50m.json

Taxi Data Maps

Responsive Maps

Animation in D3

One of the most famous animated graphs ever is Hans Rosling's Gapminder.

Tom Carden (RandomEtc) re-did it in javascript using canvas (not D3):

And then Mike Bostock did it too, in D3: Gapminder animation in d3: http://bost.ocks.org/mike/nations/

But his version has a hidden (IMO) brush for the years. Can you find it?

Animated Bar Charts

Example by Tom Carden: http://bl.ocks.org/RandomEtc/cff3610e7dd47bef2d01

Note that again, we set up the page, then load the data, and call a "replay" function that is a timer that calls the "draw" function with new data.

The draw function sets the domains based on current data set, transitions the axes, and does the data binding, exiting, entering, and updating, with transitions.

Timer example:

setInterval(function() {
  redraw();  // call the function you created to update the chart
}, 1500);  // this is the seconds delay before executing.

Animated Line Charts (and Section Highlights)

The unrolling effect! This is all over in real news stories. So you need to know how to do it.

See the examples in animated_lines.html. You could use this in your own scrolly stories if you wanted to.

These examples illustrate how to "unroll" a line, how to highlight a segment of a line, and how to animate the highlight of a segment of a line.

Animated Paths on Maps

See my example animated_map_path.html with a play/pause button added to it. (Thanks to Jim Vallandingham for fixing a bug in the timer code.)


Chained Transitions

See animation_end.html for an example of chained transitions, where one starts after another, on the same "object".

UI Sliders for Timelines

Tom MacWright's control that I recommend (it has changed maintenance/ownership):

See my example use of it in africa_map_slider.html. It has options for configuring it to restart playing, etc.

More related items:

Chart in a Tooltip

Because the D3 tooltip is HTML, you can attach and svg and update a chart in it, if you want.

See Eric's example: http://bl.ocks.org/suneric1/4c974350b1eb2f20a080cf2d08084d5a

Also my more complex example in africa_map_tooltips_graph.html.

The key point is to call an update function that transitions your data in the tooltip chart, on mouseover.

Icons, Images, etc in SVG

More Than One D3 Chart Per Page

One way is to use multiple div tags, with different id's.

In this example, there is a nice function for drawing each data set, which means the variables for each graph are in the function scope, not global:

Ideally, you are using functions to protect your variable scope and encapsulate operations. This will make debugging easier.

Take a look at the code in the animated_lines.html file for some organization of different chart code into functions.

Overall, tips:

Set Up Your Project Pages (Github.io)

Let's do this:

After you do the stuff on the github site, in your local directory for the project,

>git pull
>git checkout gh-pages

You will now be working only in the branch that is public for the website, gh-pages. Then if you want to commit and push from the command line, you can edit your files, and then do:

>git status [to see what files need adding, vs what have changed]
>git add [filename] -- for each file you want to add to the repo if it's not there yet
>git commit -am 'My note about what I did'  [this commits everything you have added or edited and uses that note to say what you did]
>git push [push the changes to the repo so i can pull them :)]

If you need to delete a file from the repo, delete it from your local folder using the command line:

>git rm [filename]
>git commit -am "deleted file [filename]"
>git push

On the repo project page, reload/refresh the page. You should see all the files you added and edited there. If you have the index.html page showing your d3 work, it will update with the latest work when you look at
your your-username.github.io/project-name page.

You can work in a github GUI or some other way if you want. Just make sure you check your work is visible in the url view.

If you screw yourself up, this guide might help:

Recent Interesting Things


Homework 1 (10pt) Create your project site.

Send me the link to the repo. Make sure it has an index page. Put the CSVs for your data in the repo in a data directory. I will be pulling from your projects to debug and review from now on. Send me your link as "Repo link".

Homework 2 (25pt) Two Graphs on a Page!

Make two charts for your project, on the same page. Use functions to structure this, so the variables don't stomp on each other. I won't be judging the content of the vis yet, just structure and making sure they "work" on the same page.