Realtime Assignment

Create a web-page that features an up-to-date visualization of changing data.

Many collections of data are constantly changing. Stock quotes, sports stats, populations, and trends on Twitter all change throughout the day. Displaying these kinds of data requires a different approach. Instead of building a visualization, you must build a system to generate visualizations with the latest data. When you design, you need to think about not only what the data is, but also what the data may be.

Assignment Given March 11
Proposal Due March 18
No Class March 25
WIP Review April 1
WIP Review April 8
Final Critique April 15

Choosing a Data Set

Like last time, you may work with any data you can find. Your main concerns are that the data should change with time and that you can find a reliable source that provides up-to-date data in a form you can use. So, stay away from historical information: the U.S. birth rates for the last 50 years are not going to change.

There are many, many services that provide data APIs. Thousands of services are listed on Especially interesting are these services, that work with JSONP. Yahoo has a powerful service that allows you to use Yahoo Query Language (YQL) to retrieve and cross-reference a wide variety of information from different sources. Many big web companies like Google, Facebook, Twitter, Stack Exchange, and Amazon offer API’s to access their data.

Start searching around on the web and you will find many options. Try to find options that specifically mention JSONP support. JSONP is a protocol that allows one website to request data from another, without being stopped by security features in the browser.

Designing the Visualization

Your visualization has one job, clearly express the latest data visually. You don’t need to make this project interactive. Like with the poster, you should aim to have your page be a complete piece of communication. You may choose to support your visualization with additional graphics or text.


  • Your final product should be a web page accessible on the web.
  • Your visualization should retrieve and display the latest available version of your data. Your data source should change at least once per week, more often is better.
  • I will demonstrate D3 in class next week. You are not required to use D3, but it is recommended.


Your proposal is due next week. The effort you put in over the next week in planning your project will be critical to the success of your project. You will need to find a working source for your data, and plan out how you will represent your data. Your real assignment for this week is to develop an achievable goal and a project you are excited about; the proposal is only a summary of this effort.

By next week, post your proposal to the blog. Include:

  • The subject of your web page.

    Whether your page promotes, persuades, or informs, it will be about something. Start by telling me the purpose of your project.

  • The data you will use.

    Find a source that can provide the data you need in JSONP format. Include a link to the data source documentation. Also include a link directly to the data.

  • A design comp of your visualization.

    Using manual design tools (Illustrator, Photoshop) and a static set of data, create a design showing how your project will display the data. Include any additional headlines, copy, and other images that will be part of your final visualization.

For Next Week

Complete the following for next week:

  • Post your proposal to the blog.
  • Read and Complete Scott Murray’s D3 tutorials.
  • Download and review the examples on Github, in the d3_demo folder.