A presentation by Tyler Machado at CASCADE BOS on June 28, 2016.
Here are the slides! I don't know if they will make sense without me rambling next to them but that's okay!
-
How Corporate Boards Connect, in Charts, Harvard Business Review
- went with a circle-based chart type to fit in squares, which work well on both landscape and portrait orientations
- that single chart type meant only very minor styling changes were necessary for different screen sizes
- custom chart type idea sketched out during meeting with editor, developer and designer
-
The Decline of Yahoo in Its Own Words, Harvard Business Review
- traditional line chart on large screens, vertical heatmap on small screens
- two different chart types meant more coding work, though in this case we felt it was worth it because each chart is very successful in its context
- charts are generated from the same Javascript file, and use the same data
- Javascript function decides which chart to render based on window inner width, and that function is called every time the window loads or is resized
-
Where AirAsia Flight 8501 Was Lost and Debris Found, The New York Times
- map crops and copy changes at smaller sizes
-
How earbuds can wreck your hearing (especially for young people), Chicago Tribune
- radically different chart type at different screen sizes
- some copy omitted at smaller sizes
-
2015 Women's World Cup Predictions, FiveThirtyEight
- different entry point on mobile; considers what information looks best when you first arrive on different devices
-
The Urban Neighborhood Wal-Mart: A Blessing Or A Curse?, NPR
- small multiples on large screens, animated GIFs on small screens
- MobileVis - examples of great data visualizations on mobile devices
- Dataviz for All - resources and best practices from a 2015 SRCCON session
- Dataviz for Everyone - slide decks from a 2014 NICAR session
- At the Malofiej Infographics World Summit, “the best form of storytelling is often static” - Nieman Lab post on best practices for mobile chart and interactive design