In this breakout session at the Quantified Self 2011 Amsterdam, I described Innertube, a platform to create visualizations widgets that can be integrated in a dashboard. I presented how Innertube solves some of the problems in integrating visualizations. I also showed a demonstration of how Innertube worked (http://innertube.me)

1. Integrating
Visualizations
with Innertube
Ian Li
http://innertube.me
Ian Li | Quantified Self 2011 Amsterdam 1

2. What?
Support exploring of multiple types of data in
a single interface.
Make it easy to find many visualizations.
Allow mix-and-match of different
visualizations.
Ian Li | Quantified Self 2011 Amsterdam 2

3. Make it easier
for developers to build.
Ian Li | Quantified Self 2011 Amsterdam 3

4. Data Integration
Data Sources
Dashboard
Ian Li | Quantified Self 2011 Amsterdam 4

5. Data Integration
Data Sources
Dashboard
Ian Li | Quantified Self 2011 Amsterdam 5

6. Problems with Data Integration
Dashboard has to:
Access Data
Parse Data
Visualize Data
Ian Li | Quantified Self 2011 Amsterdam 6

7. Problems with Data Integration
Dashboard has to:
Access Data Managing many data
sources w/ different APIs.
Parse Data
The data source loses
Visualize Data control of the data.
Ian Li | Quantified Self 2011 Amsterdam 7

8. Problems with Data Integration
Dashboard has to:
Access Data No standard format for
the different types of data
Parse Data that users collect.
Visualize Data Dashboard has to create
parsers for each format.
Ian Li | Quantified Self 2011 Amsterdam 8

9. Problems with Data Integration
Dashboard has to:
Access Data Dashboard has to create
visualizations for each
Parse Data type of data.
Visualize Data Duplicates creation of the
visualizations.
Ian Li | Quantified Self 2011 Amsterdam 9

10. Visualization Integration
Ian Li | Quantified Self 2011 Amsterdam 10

11. Visualization Integration
Data Sources
Dashboard
Ian Li | Quantified Self 2011 Amsterdam 11

12. Visualization Integration
Data Sources Widgets
Dashboard
Ian Li | Quantified Self 2011 Amsterdam 12

13. Visualization Integration
Data Sources Widgets
Dashboard
Ian Li | Quantified Self 2011 Amsterdam 13

14. Benefits of Viz Integration
Dashboard has to:
Accessing Data Provide an API that
data sources can use.
Parsing Data
Manage the
Visualizing Data communication
between widgets.
Ian Li | Quantified Self 2011 Amsterdam 14

15. Benefits of Viz Integration
From the perspective of data sources:
Maintain control of the data.
They can choose how the data is visualized.
Create a widget and it can be used with
widgets that others have made.
Ian Li | Quantified Self 2011 Amsterdam 15

16. INNERTUBE
http://innertube.me
Ian Li | Quantified Self 2011 Amsterdam 16

17. Implementation
Programmed in Javascript.
1. Innertube API
2. Innertube Widgets
3. Innertube Dashboard
Ian Li | Quantified Self 2011 Amsterdam 17

18. Innertube API
Data sources create visualization widgets
using static images, Javascript, and/or Flash.
Data sources use the API to communicate
with the dashboard and vice versa.
Ian Li | Quantified Self 2011 Amsterdam 18

19. Innertube API
Get the date and range of visualizations to
display.
Get the currently highlighted data point.
Change the appearance of the widget.
• Set height of the widget.
• Reload the widget.
Ian Li | Quantified Self 2011 Amsterdam 19

20. Demo of the
Innertube Dashboard
http://innertube.me
Ian Li | Quantified Self 2011 Amsterdam 20

21. ianli@ianli.com
http://innertube.me
Ian Li | Quantified Self 2011 Amsterdam 21