1.
Keep your world updated
with Gapminder Vizabi
by Angie
Autumn seminar: Gathering, visualizing and leading with (user) data
Tampere 28.10.2015, http://www.sigchi.fi/node/258

2.
my colleague
Hans Rosling

3.
Quiz time
Go to
www.sli.do
Event code
#tampere
1 2 3
Click “Vote”

4.
Quiz time
Deaths per year from natural disasters …
● More than doubled
● Remained about the same
● Decreased to less than half
1.0 Million/year
0.5
0.1
1900 1950 2000

5.
Quiz time
How many babies in the world die before age 5?
● 200 out of 1000
● 100
● 50

6.
Quiz time
In the last 20 years the proportion of the world
population living in extreme poverty has…
● Almost doubled
● Remained about the same
● Almost halved

7.
1.0 Million/year
0.5
0.1
1900 1950 2000
Quiz time
Source: CRED
50%
38%
12%
SIGCHI
33%
37%
30%
33%
33%
33%
Deaths per year from natural disasters …
25%
38%
38%
48 participants

8.
Data
Tools
Stories
Community
Surveys
fight devastating ignorance
with a fact-based worldview
that everyone can understand
our mission

9.
1997

10.
1998

11.
1998

12.
1999

13.
2003

14.
2007

15.
2009

16.
2013

17.
2014

18.
http://gapminder.org/world

19.
2015
http://gapminder.org/tools

20.
answers
How many babies in the world die before age 5?
● 200 out of 1000
● 100
● 50
SIGCHI Tampere
22%
34%
44%
50 participants

21.
answers
In the last 20 years the proportion of the world
population living in extreme poverty has…
● Almost doubled
● Remained about the same
● Almost halved
SIGCHI Tmp
38%
14%
48%
50 participants

22.
Unified data-schema for
multidimensional stats
Embeddable tools
with customization
Responsive
layout
Support for native UI
Controls & Interaction
Translation &
Localization
IconmadebyIconmoonfromwww.flaticon.com

23.
http://github.com/Gapminder/vizabi
open source, of course

24.
What you can do
embed to your webpage
Vizabi("BubbleChart", document.getElementById("my-div"));
like, here

25.
What you can do
tune and communicate with page
var placeholder = document.getElementById("my-div");
var bbchart = Vizabi("BubbleChart", placeholder, {
state: { … },
ui: { … }, ...
});
//later
var options = bbchart.getOptions();
options.state.time.playing = true;
bbchart.setOptions(options);

26.
What you can do
extend gapminder tools
var bbchart = Vizabi.Tool.get("BubbleChart");
bbchart.extend("MyBubbleChart", {
ready: { … }
});
//embedding
Vizabi("MyBubbleChart", document.getElementById("my-div"));

27.
What you can do
create your own tools and components
Vizabi.Tool.extend("MyBubbleChart", {
ready: { … }
});
Vizabi.Component.extend("MyTimeslider", {
ready: { … },
resize: { … }
});
like, here

28.
http://vizabi.org

29.
✿ build many other charts for vizabi
✿ have other developers helping us
we want to:

30.
thank you
Arthur Camara
@arthur_camara
Angie Skazka
@angieskazka
Amir Rahnama
@_ambodi
www.gapminder.org
Ola Rosling
@OlaRosling