Cars produce data. LOTS of data. But... How do you capture it? How do you store it so it’s useful? How do you visualize it and make it beautiful?

1. Building Beautiful
High Performance
Connected Car Applications
Jason Wiener
CEO - Hyperdrive
@jasonwiener
Building Beautiful High Performance Connected Car Applications

2. Serial CTO since 1996
● Part of the founding team or a first-hire
● Assist or lead fundraising (VC/Angel/Revenue)
● Build the POC & technical team
● Launch
● Grow to steady state
● Handoff
● What’s next?
Open wheel racer
Grand Prize Winner of 2015 Toyota Onramp Smart
Mobility Challenge
CEO - Hyperdrive
About Me
Building Beautiful High Performance Connected Car Applications

3. Hyperdrive
Think: part activity tracker, part driving coach,
part social game.
Hyperdrive makes you a better driver by
making driving fun
Lowest time with the highest MPG owns the
section of road
Profitable & privately-held company
Building Beautiful High Performance Connected Car Applications

4. ● MPG race @ Sonoma Raceway - March 3, 2017
● 20 Teams of 3-5 members
● Build strategies using a web-based telemetry editor
● Test strategies using simulations
● Race w/ real-time in-car feedback
● Team with the best avg MPG over 9 laps wins
SIGN UP at
http://toyotaonramp.com
Toyota
Research
Institute

5. Toyota Onramp
Driver Strategy Editor
● Use “clips” of captured vehicle data
● Edit like iMovie or Adobe Premiere to
build your race strategy
● Playback on Race Day against
real-time performance using an
onboard iPad

6. What we’ll
cover
1. Getting car data
2. Storing & retrieving data
by use case
3. Visualizing data
Building Beautiful High Performance Connected Car Applications

7. Data Capture
Building Beautiful High Performance Connected Car Applications

8. Data
Capture
> Where do we start?
Adapters or APIs?
Workflow
Sample code
First thing’s first…
What do you want to get your
hands on?
● Telemetry
● Error/Trouble codes
● Location
● YES!
Building Beautiful High Performance Connected Car Applications

9. Data
Capture
> Where do we start?
Adapters or APIs?
Workflow
Sample code
Telemetry
● Get the current operating values for the car
● Core to data-driven connected car apps
● PIDs
A “go to” reference is the OBD-II PIDs page on Wikipedia
https://en.wikipedia.org/wiki/OBD-II_PIDs
Building Beautiful High Performance Connected Car Applications

10. Data
Capture
> Where do we start?
Adapters or APIs?
Workflow
Sample code
Error/Trouble Codes
● Get warning indicators
● Useful for notifications
● Drive commerce
Building Beautiful High Performance Connected Car Applications

11. Data
Capture
> Where do we start?
Adapters or APIs?
Workflow
Sample code
Location
● Get where the car is right now
● Logging activity
● Routing/Directions
● Traffic
● Needs some thinking ahead of time
Building Beautiful High Performance Connected Car Applications

12. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
Now the how
● Rely on hardware or software?
● Adapters
○ High-end vs low-end
○ Connectivity options
○ Documentation
● APIs
○ Platforms
○ Availability on vehicles
Building Beautiful High Performance Connected Car Applications

13. Adapters
● High-end/Best of Breed
○ Automatic
○ GoPoint
○ Vinli
Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
Building Beautiful High Performance Connected Car Applications

14. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
Adapters: High-end/Best of Breed
● Pros
○ MFi + Android
○ Location (kinda)
○ Security
○ Higher refresh rates
○ Awesome documentation
○ Example source
○ Great technical support
Building Beautiful High Performance Connected Car Applications

15. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
Adapters: High-end/Best of Breed
● Cons
○ Price
○ Pairing
○ Tied to an account elsewhere
○ Adapter-specific integrations
○ If you use it, will they come?
Building Beautiful High Performance Connected Car Applications

16. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
Adapters
● Low-end
○ Amazon
○ eBay
○ Alibaba
Building Beautiful High Performance Connected Car Applications

17. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
Adapters: Low-End
● Pros
○ Plug and play
○ Cheap (as little as $3)
○ Good adapter for $15
○ Low POC costs
○ Standard chipset (ELM327)
○ Open source community
Building Beautiful High Performance Connected Car Applications

18. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
Adapters: Low-End
● Cons
○ Less secure
○ Lower refresh rates
○ No device documentation
○ No technical support
○ Spotty Quality Control
○ BLE 5-10x 2.1 adpater costs
Building Beautiful High Performance Connected Car Applications

19. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
APIs
● Vehicle:
○ Smart Device Link
● Cloud:
○ Automatic
○ Vinli
○ Mojio
Building Beautiful High Performance Connected Car Applications

20. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
APIs: Vehicle (SmartDeviceLink)
● Pros
○ No adapter necessary
○ Excellent APIs
○ Location
○ Backed by Ford & Toyota
○ Supported by Mazda, Suzuki & more
○ Great documentation
○ Awesome support via Slack
Building Beautiful High Performance Connected Car Applications

21. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
APIs
● Cons
○ Only Ford & Toyota right now
○ Presentation limitations
○ App store review process
Building Beautiful High Performance Connected Car Applications

22. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
APIs: Cloud
● Pros
○ No hardware integration
○ REST APIs
○ Speed to market
○ Minimal costs
○ Great documentation
Building Beautiful High Performance Connected Car Applications

23. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
APIs: Cloud
● Cons
○ Only Vinli has a telemetry API
○ Refresh rate is low
○ Reliance on adapter users
Building Beautiful High Performance Connected Car Applications

24. Data
Capture
Where do we start?
> Adapters or APIs?
Workflow
Sample code
Location
● How do we get it?
○ Mobile device
○ Laptop
○ Some adapters
○ SDL
○ Why you have to consider your use case
Building Beautiful High Performance Connected Car Applications

25. Data
Capture
Where do we start?
Adapters or APIs?
> Workflow
Sample code
How to approach it
● Start small
● Get something easy working
● Then add complexity
● Mercedes-Benz Hackathon 2015
○ MacBook Pro + Garmin 510 + ieGeek WIFI
● Moved to iOS + WIFI (POC)
● Moved to BLE, Automatic, Vinli, GoPoint
Building Beautiful High Performance Connected Car Applications

26. Data
Capture
Where do we start?
Adapters or APIs?
Workflow
> Sample code
Sample code
● Python 2.7 + gevent
● Data:
○ Mass Airflow Sensor (MAF)
○ RPM
○ Vehicle Speed (VSS)
● ieGeek OBD II WIFI adapter
http://amzn.to/2jtHn5W
● code: /capture/
Building Beautiful High Performance Connected Car Applications

27. Data Storage
Building Beautiful High Performance Connected Car Applications

28. Data
Storage
> How will we use it?
Real-time
Trailing
Session
Snapshots
Now, we have data…
How will we be using it?
● Real-time
● Trailing
● Session
● Snapshots
Building Beautiful High Performance Connected Car Applications

29. Data
Storage
> How will we use it?
Real-time
Trailing
Session
Snapshots
Do we need to know what’s going
on?
● Will our app update based what’s
happening in the vehicle?
● Will our users consume the data as it
happens?
● What happens to the data after we’ve used
it or our users have seen it?
Building Beautiful High Performance Connected Car Applications

30. Data
Storage
> How will we use it?
Real-time
Trailing
Session
Snapshots
Do we need to know what’s
happened recently?
● Will we be providing summary data for
users?
○ Week, month, year
i.e. Last week you drove 45 miles at an average of 37 MPG
● Will real-time data interact with recent
data?
i.e. You’re currently driving at 37 MPG, +4 MPG over your last trailing
20-min average
Building Beautiful High Performance Connected Car Applications

31. Data
Storage
> How will we use it?
Real-time
Trailing
Session
Snapshots
We’re saving everything once the
user finishes driving, right?
● We don’t know what we don’t know, yet.
● Persist for future use
○ New features
○ Trends
○ Machine learning
○ #becausedata
Building Beautiful High Performance Connected Car Applications

32. Data
Storage
> How will we use it?
Real-time
Trailing
Session
Snapshots
Will user need to browse and
search their data?
● Trips
● Activities
● Cases when we don’t need to whole
session capture
Building Beautiful High Performance Connected Car Applications

33. Data
Storage
How will we use it?
> Real-time
Trailing
Session
Snapshots
Real-time
● Enter/exit geofences
● Major events
● Monitoring
● Diagnostics
Building Beautiful High Performance Connected Car Applications

34. Data
Storage
How will we use it?
> Real-time
Trailing
Session
Snapshots
Real-time: 2 approaches
● Polling
○ Make a request periodically
○ Old-School
● Long-polling (socket.io)
○ Open a connection, receive updates,
close on quit
○ Popularized by modern activity feeds
and chat clients
Building Beautiful High Performance Connected Car Applications

35. Data
Storage
How will we use it?
> Real-time
Trailing
Session
Snapshots
Real-time: Polling
● Pros
○ Existing tool kit
○ Easy to add
○ Just a timer firing a REST request
● Cons
○ Lots of overhead
○ Adds latency to your app
○ Can hammer your servers
Building Beautiful High Performance Connected Car Applications

36. Data
Storage
How will we use it?
> Real-time
Trailing
Session
Snapshots
Real-time: Socket.IO
● Pros
○ Better memory management
○ Can support more traffic
○ Built in lifecycle/presence
● Cons
○ Learning curve
○ Different usage pattern over traditional
network calls
Building Beautiful High Performance Connected Car Applications

37. Data
Storage
How will we use it?
> Real-time
Trailing
Session
Snapshots
Real-time: Sample code
use with the Capture code
● Polling
○ Python 2.7 + gevent
● Socket.IO
○ Python 2.7
○ HTML+JS (Client)
○ PubNub
https://www.pubnub.com/socket.io/
● code: /storage/real-time/
Building Beautiful High Performance Connected Car Applications

38. Data
Storage
How will we use it?
Real-time
> Trailing
Session
Snapshots
Trailing
● Time spans rollups
● Time series
● Can also power real-time stats
● Common uses:
○ Drives this week
○ MPH between 10am - 11am
○ Times you went through the Taco Bell
drive in this month
Building Beautiful High Performance Connected Car Applications

39. Trailing: Graphite
● Best in class
● Created at Orbitz in 2006
● Hardened/Bombproof
● Solid documentation
http://graphite.readthedocs.org/
● #awesome
Data
Storage
How will we use it?
Real-time
> Trailing
Session
Snapshots
Building Beautiful High Performance Connected Car Applications

40. Data
Storage
How will we use it?
Real-time
> Trailing
Session
Snapshots
Trailing: Graphite
● Pros
○ Easy to PUT/GET data
○ Flexible ad hoc metrics
● Cons
○ Django
○ PITA to setup
■ Solution: Hosted Graphite #ftw
https://www.hostedgraphite.com
Building Beautiful High Performance Connected Car Applications

41. Data
Storage
How will we use it?
Real-time
> Trailing
Session
Snapshots
Trailing: Sample code
● Python 2.7
● code: /storage/trailing/
Building Beautiful High Performance Connected Car Applications

42. Data
Storage
How will we use it?
Real-time
Trailing
> Session
Snapshots
Session Logs
● Text or BLOBs
● Dumping everything you’ve captured from
the user and vehicle during the session
● @ Hyperdrive:
○ Compartmentalized by time
○ Vehicle OFF & no updates for > 5 mins
○ Compressed JSON object
Building Beautiful High Performance Connected Car Applications

43. Session Logs
● Amazon S3 or Microsoft Azure Storage
● Quickest & easiest
● Write once/read forever
● Use it to create snapshots
● Don’t need SQL or even NoSQL
● Just need a performant key/value store
Data
Storage
How will we use it?
Real-time
Trailing
> Session
Snapshots
Building Beautiful High Performance Connected Car Applications

44. Data
Storage
How will we use it?
Real-time
Trailing
> Session
Snapshots
Session Logs: Sample code
● Python 2.7
● boto
● code: /storage/session/
Building Beautiful High Performance Connected Car Applications

45. Data
Storage
How will we use it?
Real-time
Trailing
Session
> Snapshots
Snapshots
● Indexed data for common use-cases
● You don’t always need the whole log
● You only need the META
○ Small, cacheable, easy-to-consume
● @ Hyperdrive:
○ Drive summary
■ Distance, MPG, time, etc.
■ Avg 20x smaller than the log
Building Beautiful High Performance Connected Car Applications

46. Snapshots: How to store them
● MySQL, PostgreSQL, MongoDB
● This way you can also query values
● The model is still write once/read forever,
but who cares
Data
Storage
How will we use it?
Real-time
Trailing
Session
> Snapshots
Building Beautiful High Performance Connected Car Applications

47. Data
Storage
How will we use it?
Real-time
Trailing
Session
> Snapshots
Snapshots: Sample code
● Python 2.7
● MySQL
● code: /storage/snapshots/
Building Beautiful High Performance Connected Car Applications

48. Data Visualization
Building Beautiful High Performance Connected Car Applications

49. Data Viz
> Making data beautiful
Maps
Real-time
History
Now, we’ve captured and stored
the data…
Let’s make it beautiful!
● Maps
● Real-time
● History
Building Beautiful High Performance Connected Car Applications

50. Data Viz
> Making data beautiful
Maps
Real-time
History
Applying the decisions that lead
up to this point.
● Depending on
○ The data you’ve captured
○ What you want your users to see
○ How they’ll interact with it
● Defines
○ The metaphors you’ll leverage for data
visualization
Building Beautiful High Performance Connected Car Applications

51. Data Viz
> Making data beautiful
Maps
Real-time
History
Maps
● They’re everywhere now
● All are simple to integrate for the most part
● Top picks:
○ Mapbox
○ Google Maps
○ Apple Maps
○ OpenStreetMap
○ Here
Building Beautiful High Performance Connected Car Applications

52. Data Viz
> Making data beautiful
Maps
Real-time
History
Maps: deck.gl
● Gorgeous library
● Like d3.js for map data
● Designed for large data sets
● Maintained by Uber
http://uber.github.io/deck.gl/#/
Building Beautiful High Performance Connected Car Applications

53. Data Viz
Making data beautiful
> Maps
Real-time
History
Maps
● @ Hyperdrive we use Mapbox
○ Vector maps
○ Killer theme editor
○ Turf.js
https://github.com/turfjs
○ Ability to keep themes on static and
dynamic maps
Building Beautiful High Performance Connected Car Applications

54. Building Beautiful High Performance Connected Car Applications
Mapbox

55. Data Viz
Making data beautiful
> Maps
Real-time
History
Mapbox Example:
Sonoma Raceway Map
Building Beautiful High Performance Connected Car Applications

56. Data Viz
Making data beautiful
> Maps
Real-time
History
Maps: Sample code
● HTML + JS
● Mapbox library
● code: /dataviz/maps/
Building Beautiful High Performance Connected Car Applications

57. Data Viz
Making data beautiful
Maps
> Real-time
History
Real-time
● Gauges
● Line graphs
Building Beautiful High Performance Connected Car Applications

58. Data Viz
Making data beautiful
Maps
> Real-time
History
Real-time: Gauges
● Awesome for expressing a single channel
of data
○ Speed, RPM, MPG, etc
● @ Hyperdrive we use:
○ Raphael.js (web)
http://dmitrybaranovskiy.github.io/raphael/
○ RYO (native mobile)*
Tons of OS libraries on GitHub
Building Beautiful High Performance Connected Car Applications

59. Data Viz
Making data beautiful
Maps
> Real-time
History
Real-time: Gauges
● How we wire them to work:
○ Shared method for polling, function or
sockets updates
○ Trigger an animated update of the
value
○ ease-in-out @ 0.25 sec = sweet spot for
update durations
Building Beautiful High Performance Connected Car Applications

60. Data Viz
Making data beautiful
Maps
> Real-time
History
Gauges Example
Building Beautiful High Performance Connected Car Applications

61. Data Viz
Making data beautiful
Maps
> Real-time
History
Real-time: Line Graphs
● Gives a sense of trends and history
● Updates as it happens
● @ Hyperdrive we use d3.js
Building Beautiful High Performance Connected Car Applications

62. Data Viz
Making data beautiful
Maps
> Real-time
History
Real-time: Sample code
● HTML + JS
● d3.js
● RaphaelJS
● code: /dataviz/real-time/
Building Beautiful High Performance Connected Car Applications

63. Data Viz
Making data beautiful
Maps
Real-time
> History
History Data
● Trailing
● Telemetry
Building Beautiful High Performance Connected Car Applications

64. Data Viz
Making data beautiful
Maps
Real-time
> History
History: Trailing
● Line charts
● Multiplex data together
● @ Hyperdrive we use:
○ d3.js (web)
https://d3js.org/
○ RYO (native mobile)*
Tons of OS libraries on GitHub
Building Beautiful High Performance Connected Car Applications

65. Data Viz
Making data beautiful
Maps
Real-time
> History
History: Trailing - Approach
● Rolled-up queries from SQL, NoSQL
and/or Graphite
● A single JSON response
● Cacheable
Building Beautiful High Performance Connected Car Applications

66. Data Viz
Making data beautiful
Maps
Real-time
> History
History: Telemetry
● Line charts
● Stack channels to add context
● Ability to sync cursor interactions
● @ Hyperdrive we use:
○ d3.js (web)
https://d3js.org/
○ RYO (native mobile)*
Tons of OS libraries on GitHub
Building Beautiful High Performance Connected Car Applications

67. Data Viz
Making data beautiful
Maps
Real-time
> History
History: Telemetry - Approach
● Index data into arrays on time or distance
depending on the use case
● On user interaction (ala mouseover):
○ Handle the cursor position (very simple
math) to get the array position
○ Lookup the data in each channel
○ Display & update readouts
Building Beautiful High Performance Connected Car Applications

68. Toyota Onramp
Driver Strategy Editor
● Use “clips” of captured vehicle data
● Edit like iMovie or Adobe Premiere to
build your race strategy
● Playback on Race Day against
real-time performance using an
onboard iPad

69. Data Viz
Making data beautiful
Maps
Real-time
> History
History: Sample code
● HTML + JS
● d3.js
● RaphaelJS
● code: /dataviz/history/
Building Beautiful High Performance Connected Car Applications

70. What we’ve
covered
1. Getting car data
2. Storing & retrieving data
by use case
3. Visualizing data
Building Beautiful High Performance Connected Car Applications

71. https://github.com/hyperdriveme
repo: building-beautiful-connected-car-apps
Code
Building Beautiful High Performance Connected Car Applications

72. http://hyperdrive.me
Thank you!