Skip to content

MIT 4.032: Design Studio (Information and Visualization) - A web visualization utilizing Hubway ride data, and the D3.js JavaScript library for creating dynamic, interactive data visualizations for the web.

Notifications You must be signed in to change notification settings

afikanyati/hubwaydataviz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MIT 4.032 Design Stuio: Information and Visualization - Hubway

** A web visualization utilizing Hubway ride data, and the D3.js JavaScript library for creating dynamic, interactive data visualizations for the web.**

Instructions

Choose your own topic and data, and define your audience and medium. Aim to put in practice all the concepts learned during the semester as well as your visualization skills.

Goals

  • Learn to identify potential narratives in data sets
  • Learn to develop a visual framework that function as stories
  • Learn to use color, composition and typographic hierarchy
  • Become more familiar with JavaScript, HTML and CSS

Process

  • Students work in groups of three.
  • Complete readings to become familiar with multiple ways of building a visual story.
  • Analyze the data to identify those stories. Locate viable narratives within the data, assess the potential of the data, and develop articulate appropriate 2D visualizations.
  • Sketch and create finalized mock ups in Illustrator to identify possible design problems before building the web application.
  • Produce interactive visualizations around one big key topic and small points in it.
  • Test the design with users that are not familiar with the project. Do they understand the information? Do they interact with the website how it was designed?

Requirements

  • To be viewed on a computer, optimized for the web.
  • Use D3.js or P5.js to build the visualizations.
  • Choose the best graphical form to explain your information.
  • There should be at least 1 statistical graphic chart. Use the examples shown in class to build them.
  • If you choose to create only one big visual part, there should be an important coding work behind it. Check with your instructors about this point.
  • Add interactivity to the application in order to allow viewers a deeper understanding of the information.
  • The design should be completely subordinated to the information and its explanation.
  • The different parts of the project should be related in topic, design and structure. To do so, you need to work together deciding how to structure the story and why; choosing the color palettes, typography and the overall feeling of the application.

Important dates

April 20: choose a dataset for your final project and develop an initial analysis. Produce a working plan (who is going to do what? Everyone should participate in both the design and coding tasks). Start designing the first sketches. If possible, start designing mock ups with Illustrator. Think about how the different elements should work / interact with each other. Synthesize everything in a Elevator Pitch presentation (1 minute).

April 27: Group critiques - present mock ups done in Illustrator and the current work in progress.

May 10, 13:00: Upload the current state of the project to GitHub. You can keep working on the project.

May 11, 14:00: Final Review. Present refined project.

May 17, 23:59: Apply the last feedback to your project. Refine and finish the visualization. Assignment due at midnight.

About

MIT 4.032: Design Studio (Information and Visualization) - A web visualization utilizing Hubway ride data, and the D3.js JavaScript library for creating dynamic, interactive data visualizations for the web.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published