integrating visualizations with innertube - quantified self 2011 amsterdam

Integrating Visualizations with Innertube

Ian Li http://innertube.me

1 Ian Li | Quantified Self 2011 Amsterdam

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.

2 Ian Li | Quantified Self 2011 Amsterdam

Make it easier for developers to build.

3 Ian Li | Quantified Self 2011 Amsterdam

Data Integration

4

Data SourcesDashboard

Ian Li | Quantified Self 2011 Amsterdam

Data SourcesDashboard

Data Integration

5 Ian Li | Quantified Self 2011 Amsterdam

Problems with Data Integration Dashboard has to:

Access Data

Parse Data

Visualize Data

6 Ian Li | Quantified Self 2011 Amsterdam

Problems with Data Integration Dashboard has to:

Access Data

Parse Data

Visualize Data

Managing many data sources w/ different APIs.

The data source loses control of the data.

7 Ian Li | Quantified Self 2011 Amsterdam

Problems with Data Integration Dashboard has to:

Access Data

Parse Data

Visualize Data

No standard format for the different types of data that users collect.

Dashboard has to create parsers for each format.

8 Ian Li | Quantified Self 2011 Amsterdam

Problems with Data Integration Dashboard has to:

Access Data

Parse Data

Visualize Data

Dashboard has to create visualizations for each type of data.

Duplicates creation of the visualizations.

9 Ian Li | Quantified Self 2011 Amsterdam

Visualization Integration

10 Ian Li | Quantified Self 2011 Amsterdam

Visualization Integration

11

Data SourcesDashboard

Ian Li | Quantified Self 2011 Amsterdam

Visualization Integration

12

Data SourcesDashboard

Widgets

Ian Li | Quantified Self 2011 Amsterdam

Visualization Integration

13

Data SourcesDashboard

Widgets

Ian Li | Quantified Self 2011 Amsterdam

Benefits of Viz Integration Dashboard has to:

Accessing Data

Parsing Data

Visualizing Data

Provide an API that data sources can use.

Manage the communication between widgets.

14 Ian Li | Quantified Self 2011 Amsterdam

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.

15 Ian Li | Quantified Self 2011 Amsterdam

http://innertube.me

16

I N N E R T U B E

Ian Li | Quantified Self 2011 Amsterdam

Implementation Programmed in Javascript.

1.  Innertube API

2.  Innertube Widgets

3.  Innertube Dashboard

17 Ian Li | Quantified Self 2011 Amsterdam

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.

18 Ian Li | Quantified Self 2011 Amsterdam

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.

19 Ian Li | Quantified Self 2011 Amsterdam

Demo of the Innertube Dashboard http://innertube.me

20 Ian Li | Quantified Self 2011 Amsterdam

ianli@ianli.com http://innertube.me

21 Ian Li | Quantified Self 2011 Amsterdam