Data Visualization - Winter 2018

Exercise 1 - Etch a sketch

Develop a compelling story about the given data set and then design a visualization to accomplish it. Your design choices must have a rationale.

  • Data - README, olympics.csv, olympics.json
  • Describe your visualization with a story. Your story may emphasize one of the many aspects for the data, mention which data was left out due to design or story. In the description include design choices of visual elements and data transformation or sorting. How do these decisions facilitate effective communication?
  • Tools - Paper/pen. No coding or vis application should be used for this exercise
  • Due Date - In class

Exercise 2 - Create a visualization

Develop visualization for a given data.

  • Data - README, olympics.csv, olympics.json
  • Report (See report format) - Up to 3 pages (only first three pages will be graded). Describe your visualization. The description must include the motivation for your visualization, which tasks it intends to accomplish. Explain the choice of visual elements and interaction and discuss the expressiveness and effectiveness of your visualization. Note any omitted or supplemental data in the report.
  • Tools - D3JS is strongly recommended. However, you may use any programming toolkit/language for this exercise.
  • Polls - each student must complete this poll independently
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=32
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=33
  • Due Date - 1am PT, Jan 19, 2017 Refer to submission instructions

Quiz 1

  • See quiz 1 document here.
  • The quiz must be answered individually and independently by each student.

  • Due Date - Feb 2th, 1am PT Submission: Please submit your response to Gradescope.com (Course Code: MN84N8)

Exercise 3 - Apply color maps

Apply different color maps to your visualization solution for exercise #2

  • Note: If your exercise 2 solution does not use color in significant way, you must create a new visualization for exercise 2 data using any tool like d3js, Tableau, etc then perform the following tasks.
  • Task 1 - Apply different colormaps for your visualization from Exercise #2
  • Task 2 - Take screenshots of your original visualization from Exercise #2. Test them for three common color deficiencies using one of the websites provided here. Rectify any problems encountered by changing colormap.
    • Note: If your original visualization has a single color or simple line plots, create a visualization in Tableau with color and test it for color deficieny
  • Report - Up to 3 pages (only first three pages will be graded). Discuss how colormap changes affect the effectiveness of visualization. Use side by side (or up and down) images of before and after color deficiency correction in the report. Use multiple images as necessary. Refer to report format
  • Code not required for submission.
  • Polls - each student must complete this poll independently
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=46
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=47
  • Due Date - Feb 2th, 1am PT Refer to submission instructions

Exercise 4 - Create a visualization

Develop visualization for a given data.

  • Data - README, co2-population.csv, co2-population.json, co2-population.xlsx
  • Supplemental data (optional) - Geojson for US states, FIPS code for US states. You may also use any other data for augmentation.
  • Report - Up to 3 pages (anything beyond three pages will not be graded). Describe your visualization. The description must include the problem that your visualization is attempting to solve, the choice of visual elements and interaction. See report format
  • Tools - Tableau is recommended. However, you may use any programming language or software application for this exercise.
  • Polls - each student must complete this poll independently
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=48
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=49
  • Due Date - Feb 2th, 1am PT Refer to submission instructions

Exercise 5 - Visualize a Network

Create a visualization of the provided sheep data. You may create either an adjacency matrix visualization, or a node-link visualization.

  • Data - sheep_data.zip, sheep_ml.graphml
  • Tools - Python NetworkX reccomended, D3 force layout may also be used (for node-link visualization).
  • Report - Up to 3 pages (anything beyond three pages will not be graded). Discuss the expressiveness and effectiveness of your chosen visual idiom. Describe any findings that can be identified or learned from the visualization. See report format
  • Notes - The edge weights are non-symmetric, meaning that the network has directed edges. You are NOT required to visualize the weights on both directions of each edge as this can get very complicated (specifically with node-link visualizations). You are allowed to simply pick one value for each edge.
  • Grading - Since implementing interativity with NetworkX solutions is a significant challenge, for NetworkX solutions without interactivity, interactivity points will be awarded in one of two ways:
    • If the data is augmented (i.e. extra properties of the data are computed and used for visualization) the interactivity portion of the grade will be assigned to the expressiveness and effectiveness of the visualization of this augmentation (please also discuss the augmentation in your report).
    • Otherwise, the interactivity points will be evenly split between the effectiveness and report sections (making them 40% and 30% respectively). This means if you choose not to use interactivity or augmentation, please put extra attention into your report and the justification of the effectiveness of the choices you made in your visualization.
  • Polls - each student must complete this poll independently
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=101
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=102
  • Due Date - Feb 16th, 1am PT Refer to submission instructions

Exercise 6 - Case Study

Present a research paper (not a blog) or a book chapter (not from course textbooks) on visualization. (Recommended)

OR

Identify and analyze two existing visualizations. Present them to the class, discussing their design in terms or expressiveness and effectiveness, utility, key strenghts and weakness. Refer to chapter 15 in the textbook for how to deconstruct the visualization and present it as case study.

Note: Indicate your case study or visualization selection on Piazza. Do not choose anything that has been already taken by others.

Presentation

  • 10 mins (Presentation) + 5min (QA/discussion). Time limit will be enforced
  • Presentation will be graded
  • Presentation order is noted here

Submission

  • Slide format: Powerpoint (avoid animations) or PDF document. Submit to gradescope
  • Title slide: Include Visualization(s)/paper title with links and your name.
  • Make the slides self contained such that if the web link does not work you could still present.
  • Polls - each student must complete this poll independently
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=103
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=104
  • Due Date - Feb 16th, 1am PT

Below are a list of sample ideas, although you are not constrained to select from this list. You may pick other visualizations that represent sufficiently complex data. Please avoid choosing trivial visualizations, email us well in advance of deadline if you have any questions on eligibility of your visualization choice for the case study.

Exercise 7 - Fix a graphic/visualization

Select two visualizations one from each category from the given list. Identify any problems, then recreate the visualization to fix them.

  • List of graphic / visualization
  • Report - One page per visualization (anything beyond one page per visualization will not be graded). Describe the problem in chosen graphic and how your solution fixes it. Discuss the expressiveness and effectiveness of your solution. Include side-by-side image of chosen vs your visualization. Interactivity is optional as no code/application file will be submitted. Refer to report format
  • Tool - Use any tool you like, even MS Excel.
  • Code not required for submission.
  • Polls - each student must complete this poll independently
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=105
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=106
  • Due Date - Mar 2th, 1am PT Refer to submission instructions

Exercise 8 - Geospatial and Temporal Visualization

Create a visualization to explore the incidents of West Nile Virus across geography (California counties) and time (2006-2015). Discuss the expressiveness and effectiveness of your visualization based on design choices. Identify and report any conclusions drawn about the spread of the virus from your visualization.

  • Data - West_Nile_Virus_by_County.csv, West_Nile_Virus_by_County.json
  • Tools - Programmatic tool of your choice may be used, but no applications.
    • Other libraries that may be useful - LeafletJS, GeoJS, Folium (Python - bundles leafletJS and Vincent/Vega markers)
  • Report - Up to 3 pages (anything beyond three pages will not be graded). Discuss the expressiveness and effectiveness of your chosen visual idiom. Describe any findings that can be identified or learned from the visualization. See report format
  • Polls - each student must complete this poll independently
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=107
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=108
  • Due Date - Mar 2th, 1am PT Refer to submission instructions

Exercise 9 - Conceptual visualization design

This exercise poses a challenge to systematically develop visualization designs in abstract form for given data attributes and analyze those designs.

  1. Download the exercise worksheet from here.

    A spreadsheet with 9 worksheets have been provided. Each worksheet corresponds to a different set of data attributes. You need to develop one design and its analysis for each sheet. A sample has been provided in sheet #1 and 2. The key aspects of the visualization needs to be broken down into What, Why and How. This is a purely descriptive design exercise and no implementation is required. You may use the textbook as a reference.

  2. Individual work
    • Each student has been assigned a sub set of worksheet to complete.
    • For each assigned worksheet develop a visualization design and analysis. Fill your solution in the corresponding column in the appropriate worksheet.
    • Copy the your column for each design back to the original sheet. Make sure to only copy your own column, not the entire sheet.
    • Duration ~ 60 mins
  3. Group discussion and compilation
    • Each student is assigned a group 1, 2, 3, 4, etc. gather in your group, then discuss and review the various designs.
    • Compile a refined set of designs and note them under the Group columsn. You may work on the online version directly for this portion.
    • Duration: 60 mins
  4. Polls - each student must complete this poll independently
    • https://piazza.com/class/ja1pe3hq1fm7dl?cid=109

Report Format

  • Must be written in third person narrative style
  • Letter size page 8 1⁄2 in × 11 in
  • One inch margin on all sides
  • Font: Times New Roman, size 11pt or 12 pt, you may use larger font size up to 14pt for headings.
  • Include your name in header section
  • Title in form: “Exercise NN Report: Brief title for the visualization”
  • PDF (recommended) or Microsoft Word ONLY
  • Sample report 1 and Sample report 2 Note: The sample reports are provided for reference only, they should not be used as template for your reports.

Exercise Grading Rubric

  • Expressiveness of design (30%)
    • Match between choices of visual encodings with properties of data.
    • Choice of encodings based on the importance of the data.
    • How well the design expresses facts?
  • Effectiveness of the solution (30%)
    • Does the solution communicate and support the intended idea?
    • Are the encodings used perceptually effective?
    • Is the data used comprehensively or augmented?
  • Interaction support in solution (20%)
    • Does the solution support comparison, selection, filtering, linking, etc? For non programmatic solutions this weight is added to expressiveness and effectiveness
  • Report (20%)
    • Does the report provide motivation for the visualization?
    • Is there a clear description of the problem/tasks your visualization is attempting to solve?
    • Is the choice of visual encodings explained and justified in terms of expressiveness of dataset attributes? Refer Chapter 5.4.1 in Munzner
    • Is the choice of visual encoding explained and justified in terms of effectiveness of channels? Refer Chapter 5.4.1 in Munzner
    • Finally, does the visualization accomplish solving the problem or tasks that were identified?
    • Sample report 1 and Sample report 2 Note: The sample reports are provided for reference only, they should not be used as template for your reports.
  • Bonus (up to 10%)
    • Outstanding submissions may receive up to 10% bonus. Late submissions are not eligible for bonus points.
  • Late submission Incurs 20% penalty after the deadline, there after additional 20% penalty per week. Final project must be submitted by deadline (no exceptions).

Submission Instructions

  • All submissions must be made to Gradescope.com. The course entry code is MN84N8
    • Contact TA ahead of time if you are not able to view the course on Gradescope.com
  • All exercises submissions are due on 1 am on the day of class.
  • Code submission shall be well organized structure as follows. Zip and upload this file to Gradescope for corresponding excercise 
    exercise-N-firstname-lastname
  index.html
  css/
    style.css
    ...
  data/
    data.json
    ...
  img/
    logo.png
    ...
  js/
    script.js
    ...
  other-folders-as-needed/
    ...
  • Report must be in PDF format and include items noted in the grading rubric above. Submissions without the report will not be graded.