Introduction to Information and Data Visualization

Project 1

This first project will focus on understanding the essentials of the D3 framework and use it to build a basic chart.

Project Due Monday 4/11 at **9am**, and Peer critique due 4/12. Extra credit due the following Thursday 4/14

Requirements

This will be the only D3 specific project, for all the others (while it is suggested to use D3) you are free to use whichever technology you prefer

This project has two parts, both open ended. Because of this you will have the following specification and requirements but are left to your our devices to decided how to implement your graphic.

Part 1: Remix a Visualization

One of the great strengths of D3 is in its separation of aesthetic and data, and because of this it makes it very easy to adapt an existing visualization for your own data. For part one of the project:

  1. Find a dataset that the visual elements of this bar chart would properly encode:

    Civic Center Rent Open Gist on Github

  2. Fork the Gist for the Civic Center Median Rent chart from above and adapt it to use the dataset you found in step 1.

Part 2: Create your Own

For this second part you will be creating your own visualization from scratch. Again, you are free to tackle this challenge any way you like as long as you adhere to the requirements. You are expected to create a basic chart (line, bar, scatter, bubble, area, etc.) with vanilla D3 (no additional visualization libraries).

You will need to submit:

  1. A link to the data set you will be visualizing.
  2. A hand drawn prototype sketch of a visualization you will be creating.
    • Include the data type (categorical, ordinal, continuous, etc.) of the columns you are visualizing.
    • You will be graded on the appropriateness of the visual encodings chosen for this artifact.
  3. Create the chart you have sketched in D3. The D3 graphic will need to incorporate:
    • one categorical column (used as a facet in the legend), one continuous, and an additional third column that can be any data type.
    • Labeled Axes
    • A legend

If you would like to go above and beyond also try to incorporate:

  • 2 datasets into one graphic
  • Stacked bar, stacked area, etc. chart
  • Interactive tool tips
  • Responsive layout

Example Solution

Open on bl.ocks

Submission

For the project you can develop it using a local text editor + browser, an interactive browser based REPL (such as JSBin or Building Blocks), or any other development workflow. For submission you will create a secret gist (following the bl.ocks.org conventions for file naming) and submit through Canvas.

In the README.md of the secret gist include the link to the data you are visualizing and the description of the column data types. Also be sure to include an image of your hand drawn sketch as an additional file in the Gist.

In the index.html of the gist include the code required for the D3 graphic/chart.

Peer Critique

For this project you will also perform a peer critique after the initial submission deadline. More on the format of the critique on Tuesday after initial projects have been submitted.

After the critique you will publicly post you visualization to blocks and your Github pages portfolio site.

How to Critique

For this first peer critique please read these two articles to understand how to be as effective (and constructive) in your feedback.

Deliverables

In your critique on Canvas, please include:

  1. What does the data visualized represent?
  2. What is the one sentence thesis of the visualization?
  3. How many dimensions visualized and what are their data types?
  4. Visual encoding(s) used for each dimension.
  5. Any additional visual encodings used.
  6. 2 suggested alternative visual encodings and why you think they might be an improvement

Extra Credit

For a single extra credit point you can resubmit your visualization incorporating the suggestions from the peer critique by the following Tuesday.

Rubric

Component Weight
Remixed Bar Chart 1
Prototype Sketch 2
D3 Implementation 5
Critique 2
Total 10

Resources

Examples

D3 Examples

https://github.com/mbostock/d3/wiki/Gallery#basic-charts

D3 References

See the complete list on the syllabus

Base

Extra Credit