How to Build a Large Scale Data Visualization Mike Barry - Twitter - - PowerPoint PPT Presentation

▶
how to build a large scale data visualization
SMART_READER_LITE
LIVE PREVIEW

How to Build a Large Scale Data Visualization Mike Barry - Twitter - - PowerPoint PPT Presentation

Jun 13, 2023 353 likes •1.16k views

How to Build a Large Scale Data Visualization Mike Barry - Twitter Brian Card - ViaSat Project History In Brief Project History In Brief February 2014 - Collected Data March - June - Built Project June - Published January 2015 - NEASIST

slide-1
SLIDE 1

How to Build a Large Scale Data Visualization

Mike Barry - Twitter Brian Card - ViaSat

slide-2
SLIDE 2

Project History In Brief

slide-3
SLIDE 3

Project History In Brief

February 2014 - Collected Data March - June - Built Project June - Published January 2015 - NEASIST

slide-4
SLIDE 4

Press

─“Beautiful Work!” –Mike Bostock ─“Insanely Awesome” – Roberto Scalese of Boston.com ─“Beautifully crafted exploration… one of those projects you simply dream of having in your portfolio” – Andy Kirk

  • f Visualizing Data

─Mentions by Edward Tufte, The Guardian, CNN Money, Flowing Data, FiveThirtyEight, The Atlantic and others

slide-5
SLIDE 5

Total Cost: $0

slide-6
SLIDE 6

Total Cost: $0

Project Management

data Visualization Tools

Website Publishing Code Hosting

Presentation Tools

slide-7
SLIDE 7

How Did We Do It?

slide-8
SLIDE 8

Research

slide-9
SLIDE 9

Visualization Tasks Existing Works Mockups

slide-10
SLIDE 10

Visualization Tasks Existing Works Mockups

slide-11
SLIDE 11

What’s Your Goal?

slide-12
SLIDE 12

To Visualize The Train System!

slide-13
SLIDE 13

To Visualize The Train System!

slide-14
SLIDE 14

What’s Important To People

slide-15
SLIDE 15
  • Congestion and

Delay

  • Snowstorms
  • My Commute
slide-16
SLIDE 16

Have Ideas To Throw Away

slide-17
SLIDE 17

Organize Everything!

slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20

Existing Works

slide-21
SLIDE 21

Other Train Visualizations Books Best Practices

slide-22
SLIDE 22

Mockups

slide-23
SLIDE 23

Pen + Phone + Computer

slide-24
SLIDE 24
slide-25
SLIDE 25

Data Collection And Prototypes

slide-26
SLIDE 26

MBTA Web API

slide-27
SLIDE 27

MBTA Mike Brian

slide-28
SLIDE 28

MBTA Mike Brian

slide-29
SLIDE 29

MBTA Mike Brian

slide-30
SLIDE 30

MBTA Mike Brian

slide-31
SLIDE 31

MBTA Mike Brian

slide-32
SLIDE 32

MBTA Mike Brian

slide-33
SLIDE 33

MBTA Mike Brian

Merged

slide-34
SLIDE 34

?

slide-35
SLIDE 35
slide-36
SLIDE 36

Want Delay

slide-37
SLIDE 37

Want Delay Need Transit Time

slide-38
SLIDE 38

JSON Documents

slide-39
SLIDE 39

{"TripList": { "CurrentTime": 1342032950, "Line": "Red", "Trips": [{ "TripID": "R982ECC1E", "Destination": "Alewife", "Predictions": [{ "StopID": "70094", "Stop": "Harvard", "Seconds": 210 }] }] }}

slide-40
SLIDE 40

"Predictions": [{ "StopID": "70094", "Stop": "Harvard", "Seconds": 210 }]

slide-41
SLIDE 41

"Predictions": [{ "StopID": "70094", "Stop": "Harvard", "Seconds": 210 }]

slide-42
SLIDE 42

Time 0 Time 240

210 Seconds to Harvard 0 Seconds to Harvard

240 seconds to get from Central to Harvard

slide-43
SLIDE 43

"Trips": [{ "TripID": "R982ECC1E", "Destination": "Alewife", "Predictions": [{ "StopID": "70094", "Stop": "Harvard",

slide-44
SLIDE 44

"Trips": [{ "TripID": "R982ECC1E", "Destination": "Alewife", "Predictions": [{ "StopID": "70094", "Stop": "Harvard",

slide-45
SLIDE 45

Trip Time R982ECC1E 240 sec R98338169 220 sec R98338126 300 sec

slide-46
SLIDE 46
slide-47
SLIDE 47
slide-48
SLIDE 48

Use A Computer

slide-49
SLIDE 49
slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52

Iterate!

slide-53
SLIDE 53
slide-54
SLIDE 54

Putting It All Together

slide-55
SLIDE 55 Victor, Bret. “Up and Down the Ladder of Abstraction.” October
  • 2011. worrydream.com/LadderOfAbstraction
Bostock, Mike et al. “Is It Better to Rent or Buy.” May 2014. www.nytimes.com/interactive/2014/upshot/buy-rent-calculator. html Bostock, Mike et al. “Tracing the History of N.C.A.A. Conferences.” November 2013. www.nytimes.com/ newsgraphics/2013/11/30/football-conferences/ Bostock, Mike. “Visualizing Algorithms.” June 2014. bost.ocks.
  • rg/mike/algorithms
slide-56
SLIDE 56
slide-57
SLIDE 57

10 Days Left

slide-58
SLIDE 58
slide-59
SLIDE 59
slide-60
SLIDE 60
slide-61
SLIDE 61

If You Find Something That Works, Run with It

slide-62
SLIDE 62
slide-63
SLIDE 63
slide-64
SLIDE 64

Get Feedback

slide-65
SLIDE 65

Done?

slide-66
SLIDE 66

A Few More Things...

─ Respond to feedback ─ Cross-browser and mobile testing ─ Your commute ─ Web hosting ─ Marketing

slide-67
SLIDE 67
slide-68
SLIDE 68
slide-69
SLIDE 69

+ My Dad

slide-70
SLIDE 70

But How Long Is My Commute?

slide-71
SLIDE 71
slide-72
SLIDE 72
slide-73
SLIDE 73

git push origin master http://mbtaviz.github.io

slide-74
SLIDE 74
slide-75
SLIDE 75

June 10 2014

slide-76
SLIDE 76
slide-77
SLIDE 77
slide-78
SLIDE 78

Other Reddit Facebook Twitter

slide-79
SLIDE 79

Visualize All the Things

─ All the free tools you need are at your fingertips ─ Focus on answering questions ─ Learn from the best ─ Find your tools and stick with them

slide-80
SLIDE 80

Questions? Thank you!

Mike Barry @msb5014 Brian Card @bmcard

Backround images adapted from these sources STS-135 Atlantis rollout 1 By NASA/Kim Shiflett [Public domain], via Wikimedia Commons. Montinari Milano By André Karwath aka Aka (Own work) [CC BY-SA 2.5 (http://creativecommons.org/licenses/by-sa/2.5)], via Wikimedia Commons. Open Book Policy (5914169915). By Alex Proimos from Sydney, Australia (Open Book Policy Uploaded by russavia) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons MBTA Red Line train departing Quincy Adams station. By Ben Schumin (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons Repro Smoking Spaceman Robot – Ha Ha Toy – Silver - In Action!! By D J Shin (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons. Stipula fountain pen By Power_of_Words_by_Antonio_Litterio.jpg: Antonio Litterio derivative work: InverseHypercube (Power_of_Words_by_Antonio_Litterio.jpg) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons.