Gapminder Vizabi talk at autumn SIGCHI seminar. By Angie. Demos: http://www.gapminder.org/tools

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

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

23. 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

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

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

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

27. 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);

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

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

30. http://vizabi.org

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

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