Data Visualization Design
MTA Open Source Challenge
MTA Open
Source Challenge
Designing and coding a data visualization web app from the ground up
Designing and coding a data visualization web app from the ground up
Timeline
5 Weeks
Role
Designer, Developer
Tools
Figma, D3.js, CSS, HTML, AfterEffects
Timeline
5 Weeks
Role
Designer, Researcher
Collaborators
Yanna Nguyen, Walid Al-Tinawi
Tools
Figma, Adobe Illustrator, AfterEffects
Background
The MTA publishes open source data on their website on a variety of topics. I wanted to challenge myself to create a data visualization of their user ridership data. I decided to combine this data set with publicly-available weather data.
Process
Low-Fidelity Sketches
Initial sketches included linear bar graphs and scatter plots but evolved into a radial format for a compact solution. User testing with early wireframes revealed that radial designs were more intuitive for visualizing cyclic patterns.
Low-Fidelity Sketches
Initial sketches included linear bar graphs and scatter plots but evolved into a radial format for a compact solution. User testing with early wireframes revealed that radial designs were more intuitive for visualizing cyclic patterns.
Low-Fidelity Sketches
Initial sketches included linear bar graphs and scatter plots but evolved into a radial format for a compact solution. User testing with early wireframes revealed that radial designs were more intuitive for visualizing cyclic patterns.
Figma Prototype
I developed a high-fidelity prototype in Figma of the sidebar to visualize how users might interact with the data.
Figma Prototype
I developed a high-fidelity prototype in Figma of the sidebar to visualize how users might interact with the data.
Figma Prototype
I developed a high-fidelity prototype in Figma of the sidebar to visualize how users might interact with the data.
Code Development
Data Cleaning: Python for preprocessing.
Visualization: D3.js for creating interactive radial graphs.
User Interface: HTML, CSS for web development.
Code Development
Data Cleaning: Python for preprocessing.
Visualization: D3.js for creating interactive radial graphs.
User Interface: HTML, CSS for web development.
Data Cleaning: Python for preprocessing.
Visualization: D3.js for creating interactive radial graphs.
User Interface: HTML, CSS for web development.
Code Development
Data Cleaning: Python for preprocessing.
Visualization: D3.js for creating interactive radial graphs.
User Interface: HTML, CSS for web development.
Data Cleaning: Python for preprocessing.
Visualization: D3.js for creating interactive radial graphs.
User Interface: HTML, CSS for web development.
Animated Weather Patterns
I animated four different weather patterns in Adobe AfterEffects to add a responsive visual element in the center of the circle chart.
Interested in learning more about my process?
See my full research deck here.
Transit Mode Selection
Users can toggle between buses, trains, or both using the lefthand side bar.
Transit Mode Selection
Users can toggle between buses, trains, or both using the lefthand side bar.
Temperature
Users can specify a specific temperature range by manually inputting the highest and lowest temperatures, or by simply using the slider bar.
Temperature
Users can specify a specific temperature range by manually inputting the highest and lowest temperatures, or by simply using the slider bar.
Weather Patterns
I simplified the range of weather patterns into four categories; sunny, cloudy, snowy, and rainy. Users can select each or multiple to see where the weather patterns overlap. For example, selecting both rainy and cloudy, or both sunny and snowy.
Weather Patterns
I simplified the range of weather patterns into four categories; sunny, cloudy, snowy, and rainy. Users can select each or multiple to see where the weather patterns overlap. For example, selecting both rainy and cloudy, or both sunny and snowy.
Hover States
By hovering over the transport mode/population graphs users can see the weather information and daily average of riders. By hovering over the temperature range circle, an animation of each weather pattern is displayed in the center of the visualization.
Hover States
By hovering over the transport mode/population graphs users can see the weather information and daily average of riders. By hovering over the temperature range circle, an animation of each weather pattern is displayed in the center of the visualization.
Final Thoughts
What I Learned
By doing the research on what was feasible with D3.js, I was better prepared to create an interactive infographic. There are so many publicly available data sets published by governments, nonprofits, and companies. I am interested in the challenge of making the data more interesting or useful to the average person.
Future Considerations
• Fixing coding bugs and publishing the dashboard to Github!
• Experimenting more with UI motion design.
What we Learned
Through this project, I became more familiar with app design and game design.
Future Considerations
In the future, I would like to explore more branding projects and creative coding to design unique and playful interactions and websites.
• Building out the rest of the characters and clues
• Creating alternate plots for different characters as the murderer.
• Potentially expanding to new rooms/settings
What we Learned
Through this project, I became more familiar with branding and web design. I also learned more about heuristic evaluations and what goes into creating a cohesive, unique brand.
Future Considerations
In the future, I would like to explore more branding projects and creative coding to design unique and playful interactions and websites.
• Building out the rest of the characters and clues
• Creating alternate plots for different characters as the murderer.
• Potentially expanding to new rooms/settings
SAY HI
Wandafelsen
@gmail.com
SAY HI
Wandafelsen
@gmail.com
SAY HI
Wandafelsen
@gmail.com
SAY HI
Wandafelsen
@gmail.com
SAY HI