Lab: D3 Transitions

Assigned: Wednesday, Mar 1, 2017

Due: Friday, Mar 3, 2017 at noon

Collaboration: You may choose your own partner(s) for this lab. Please work in groups of two or three.

Overview

In this lab, you will combine the basic D3 updates we learned in class on Monday with transitions to build a live view of edits on Wikipedia. We’ll be using the pubnub feed again, which is all set up in the starter code for this lab. Your task is to respond to each update message with the following steps:

1. Generate a new <div> element on the page in a random location.
2. Inside the <div>, add a clickable link to the Wikipedia page that was edited.
3. Add a transition so the link will gradually fade out over approximately 5 seconds.
4. Once the link has completely faded out, remove it from the page.

You can find the starter code on GitHub at grinnell-cs/datavis-wikipedia-updates. This starter code includes a standard HTML template, a CSS file that defines two potentially useful rules, and a JavaScript file that subscribes to the Wikipedia pubnub stream. Make a fork of this repository and add your lab partner as a collaborator. When you are finished with the lab, submit a pull request to turn in your work.

The process you follow to finish the lab is largely up to you, but the following hints should be helpful:

Use the left and top CSS properties in the style attribute of each link box.

These allow you to position the box relative to the upper left corner of the page. By setting these in the style attribute of the tag you can position each <div> independently.

Use the opacity CSS property to make elements fade out.

Elements with an opacity of 1 are completely visible, while an opacity of 0 gives you a completely transparent element.

Generate random positions on the page with Math.random().

This JavaScript function produces a random value between zero and one.

Get the window size with window.innerHeight and window.innerWidth.

These values (not functions) tell you the number of pixels in the current view.

Remove elements with the .remove() method in D3.

Adding this after a call to transition() will delete the element from the page after the transition completes.

Use the .duration() D3 method to set the time a transition will take.

Times are measured in milliseconds.