Integrating Visualizations with Innertube - Quantified Self 2011 Amsterdam

Integrating Visualizations with Innertube Ian Li http://innertube.meIan Li | Quantiﬁed Self 2011 Amsterdam 1

What?Support exploring of multiple types of data ina single interface.Make it easy to ﬁnd many visualizations.Allow mix-and-match of differentvisualizations.Ian Li | Quantiﬁed Self 2011 Amsterdam 2

Make it easier for developers to build.Ian Li | Quantiﬁed Self 2011 Amsterdam 3

Data IntegrationData Sources DashboardIan Li | Quantiﬁed Self 2011 Amsterdam 4

Data IntegrationData Sources DashboardIan Li | Quantiﬁed Self 2011 Amsterdam 5

Problems with Data IntegrationDashboard has to:Access DataParse DataVisualize DataIan Li | Quantiﬁed Self 2011 Amsterdam 6

Problems with Data IntegrationDashboard has to:Access Data Managing many data sources w/ different APIs.Parse Data The data source losesVisualize Data control of the data.Ian Li | Quantiﬁed Self 2011 Amsterdam 7

Problems with Data IntegrationDashboard has to:Access Data No standard format for the different types of dataParse Data that users collect.Visualize Data Dashboard has to create parsers for each format.Ian Li | Quantiﬁed Self 2011 Amsterdam 8

Problems with Data IntegrationDashboard has to:Access Data Dashboard has to create visualizations for eachParse Data type of data.Visualize Data Duplicates creation of the visualizations.Ian Li | Quantiﬁed Self 2011 Amsterdam 9

Visualization IntegrationIan Li | Quantiﬁed Self 2011 Amsterdam 10

Visualization Integration Data Sources DashboardIan Li | Quantiﬁed Self 2011 Amsterdam 11

Visualization Integration Data Sources Widgets DashboardIan Li | Quantiﬁed Self 2011 Amsterdam 12

Visualization Integration Data Sources Widgets DashboardIan Li | Quantiﬁed Self 2011 Amsterdam 13

Beneﬁts of Viz IntegrationDashboard has to:Accessing Data Provide an API that data sources can use.Parsing Data Manage theVisualizing Data communication between widgets.Ian Li | Quantiﬁed Self 2011 Amsterdam 14

Beneﬁts of Viz IntegrationFrom 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 withwidgets that others have made.Ian Li | Quantiﬁed Self 2011 Amsterdam 15

INNERTUBE http://innertube.meIan Li | Quantiﬁed Self 2011 Amsterdam 16

ImplementationProgrammed in Javascript.1.  Innertube API2.  Innertube Widgets3.  Innertube DashboardIan Li | Quantiﬁed Self 2011 Amsterdam 17

Innertube APIData sources create visualization widgetsusing static images, Javascript, and/or Flash.Data sources use the API to communicatewith the dashboard and vice versa.Ian Li | Quantiﬁed Self 2011 Amsterdam 18

Innertube APIGet the date and range of visualizations todisplay.Get the currently highlighted data point.Change the appearance of the widget.•  Set height of the widget.•  Reload the widget.Ian Li | Quantiﬁed Self 2011 Amsterdam 19

Demo of the Innertube Dashboard http://innertube.meIan Li | Quantiﬁed Self 2011 Amsterdam 20

ianli@ianli.com http://innertube.meIan Li | Quantiﬁed Self 2011 Amsterdam 21

Integrating Visualizations with Innertube - Quantified Self 2011 Amsterdam

by Ian Li on Nov 28, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Integrating Visualizations with Innertube - Quantified Self 2011 Amsterdam — Presentation Transcript