keep your world updated with gapminder vizabi
TRANSCRIPT
Keep your world updatedwith Gapminder Vizabi
by AngieAutumn seminar: Gathering, visualizing and leading with (user) data
Tampere 28.10.2015, http://www.sigchi.fi/node/258
my colleague
Hans Rosling
Quiz time
Go to
www.sli.do
Event code
#tampere
1 2 3Click “Vote”
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
Quiz time
How many babies in the world die before age 5?
● 200 out of 1000
● 100
● 50
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
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
Data
Tools
Stories
Community
Surveys
fight devastating ignorance
with a fact-based worldview
that everyone can understand
our mission
1997
1998
1998
1999
2003
2007
2009
2013
2014
answers
How many babies in the world die before age 5?
● 200 out of 1000
● 100
● 50
SIGCHI Tampere
22%
34%
44%
50 participants
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
Unified data-schema for multidimensional stats
Embeddable tools with customization
Responsive layout
Support for native UI Controls & Interaction
Translation & Localization
Ico
n m
ad
e b
y I
con
mo
on
fro
m w
ww
.fla
tico
n.c
om
http://github.com/Gapminder/vizabi
open source, of course
What you can do
embed to your webpage
Vizabi("BubbleChart", document.getElementById("my-div"));
like, here
What you can do
tune and communicate with page
var placeholder = document.getElementById("my-div");var bbchart = Vizabi("BubbleChart", placeholder, {
state: { … },ui: { … }, ...
});
//latervar options = bbchart.getOptions();options.state.time.playing = true;bbchart.setOptions(options);
What you can do
extend gapminder tools
var bbchart = Vizabi.Tool.get("BubbleChart");bbchart.extend("MyBubbleChart", {
ready: { … }});
//embeddingVizabi("MyBubbleChart", document.getElementById("my-div"));
What you can do
create your own tools and components
Vizabi.Tool.extend("MyBubbleChart", {ready: { … }
});
Vizabi.Component.extend("MyTimeslider", {ready: { … },resize: { … }
});
like, here
✿ build many other charts for vizabi
✿ have other developers helping us
we want to:
thank you
Arthur Camara@arthur_camara
Angie Skazka@angieskazka
Amir Rahnama@_ambodi
www.gapminder.org
Ola Rosling@OlaRosling