Data Visualization

  • Timeframe: 02/13 – 02/27
  • Points: 250

Description

In this graphic design project, you will learn how to make sound design decisions, how to represent data visually, and how to draw with Scalable Vector Graphics (SVGs). We will learn about basic types of charts, the fundamentals of marks and attributes for charts, and then how to draw SVGs in Inkscape.

Below are 2 examples created by students in prior courses:

Student example of a data visualization about their engagement with Fitbit.
Student example of a data visualization about their emotional responses to Instagram feed.
Caption: Two example projects from prior students.

General process

  1. Learn about the basic data visualization conventions: types of charts, marks, and attributes.
  2. Explore and analyze your data by first plotting it out temporally by drawing it by hand.
  3. Decide what datapoints are most interesting and worth amplifying with another chart type, or a revision to the temporal chart.
  4. Learn basic Inkscape skills.
  5. Sketch your data visualization on paper.
  6. Draw your data visualization in Inkscape.
  7. Clean your SVG for the web, making it semantically rich.
  8. Export the SVG to submit as an Inkscape .svg and a .png bitmap image.

Rubric

Rubric Criteria Points
Chart Type:
  • Emphasizes a refined set of relationships from your data set.
  • Layout helps amplify your desired findings and help your audience quickly understand such findings
 100
Marks and Attributes:
  • Marks are not overly complex and help your audience quickly see the data represented and compared.
  • Use of a good color scheme to differentiate and compare marks. If applicable, color should coordinate with the meaning of the mark.
 100
Ethically represents your findings. For example, if proportion is important, carefully create sizes and do not use circular marks, etc. 20
Legend:
  • Thoughtful organization of labels into corresponding categories.
  • Labels arranged in orderly fashion for increased readability.
  • Includes a title for your data visualization at the top.
 20
Semantically-rich SVG markup: Uses labels and IDs to name meaningful groups of the chart: data types, parts of the chart, etc. 10
Total 250