The document discusses Gapminder Vizabi, an open source data visualization tool. It includes instructions and examples for how to embed Vizabi visualizations on webpages, customize the visualizations, extend existing Gapminder tools, and create new tools and components. The goal is to help fight misinformation with fact-based data stories that everyone can understand using this visualization platform.

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