An introduction to data-driven documents, data visualization and the Javascript library D3.js as a tool to produce data-driven graphics.

1. Data Driven Documents
on the road to DataViz
Maxime Lemaitre – 17/10/2013

2. Agenda
(from Presentation transcript)
2

3. A few samples
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
3

4. ChronoZoom
http://www.chronozoom.com/
4

5. DataViz
definition
Visualize
Data
Any kind of data : Open Data,
Big Data, BI, Activity Data, Logs,
Traces…
Form a mental image of
something to make it
perceptible to the mind
Interactive
Not just static content.
Stimulate the viewer to
explore data.
Data visualization is the use of computer support interactive
visual representations of abstract data to amplify cognition Colin Ware
Representation
Data doesn’t have only one
representation. Choose the right
representation,
See also http://zoom.it/rcxP#full
Cognition
mental processes that includes attention,
memory, producing and understanding
language, learning, reasoning, problem solving,
and decision making
5

6. DataViz
In the past
Think about all the maps, graphs and
charts in existence, and the popularity
of this form of data analysis will quickly
become clear
6

7. Why ?
Analyze & communicate information clearly
and effectively through graphical means
A powerfull tool to
• Discover Patterns and Correlations
• Tell stories from the data
• Clarify obscurs concepts
• Communicate key messages
• Engage the public to your vision
• Summarize Large Data Sets
• Support decision-making
• Drive Transparency
• Make an impact
7

8. Data, data and more data
In 2012, each day, we created 2.5 ExaBytes of data
(1 EB = 1 000 000 000 000 000 000 B = 1018bytes = 1000
petabytes = 1 billion gigabytes)
This number is doubling every 40 months or so…
90% of the data in the world has been created in the
last two years alone
We are creating as much information every two days
as we did from the dawn of civilization up until 2003
8

9. DataViz
The Humain Brain
Humain brains are wired to speak
and understand spoken language
People have to be taught to read and write
Understanding the written word is not a natural humain ability ; but
human brains do innately process shapes
9

10. Anscombe's quartet
importance of graphing data before analyzing it
four datasets that
have nearly identical
simple statistical
properties ….
… but very
different when
graphed
10

11. How many 3’s?
Stimulate cognition by adjusting these attributes : Shape, Color, Length, Height,
Position, Contrast, Opacity, Saturation, Orientation, Direction, Size, Border,
Curves, …
11

12. DataViz
Principles (from Tufte)
Above all else, show the data
Focus on substance rather than
graphics design or technologies
Avoid distording the data
Encourage Eyes to compare data
12

13. D3.js
from Mike Bostock
•
Created in 2011 by Mike Bostock, successor from Protovis
– Top #6 in GitHub
– ~19 200 stars, 1600 followers, 3 700 forks
A JavaScript library for manipulating
documents based on data
•
It’s not a traditional visualization framework
– No drawing primitives (it is really a graphical library ?)
– No monolothic api
– Never less than 20 lines of code
•
Why you should consider D3js
– Data-Driven document : It's about generating something in a web browser based
on data (Table ? Chart ? Svg ?)
– Web Standards learning curve : JS, CSS, JQuery, SVG
– More than 1 000 examples of the official Web Site
– Great community
13

14. D3.js
Basic Concepts
Selections
Atomic Operand ; a filtered set of elements queried from the current document.
Operators
functions acting on selections, modifying content
Data Join
bind input data to elements, enabling functional operators that depend on data
Enter/Update/Exit
subselections for the creation and destruction of elements in correspondence with data
Transitions
interpolate attributes and styles smoothly over time
14

15. D3.js
First example
15

16. D3.js
dynamic update (http://bl.ocks.org/mbostock/raw/3808234/)
16

17. D3.js
a few tutorials later …
https://github.com/mbostock/d3/wiki/Gallery
17

18. Conclusion
18

19. Questions ?
19

20. References
•
•
•
•
•
•
•
•
•
•
•
•
•
•
http://dataviz.tumblr.com/
http://www.datavisualization.fr
http://fr.slideshare.net/janwillemtulp/data-visualization-5724069
http://fr.slideshare.net/sankazim/infovis-2010-lecture-1
http://www.chronozoom.com/
http://www.passiondataviz.fr/
http://www.informationisbeautifulawards.com/
http://bl.ocks.org/mbostock
https://github.com/mbostock/d3/wiki/Gallery
http://www.pinterest.com/search/pins/?q=dataviz
http://marscommons.marsdd.com/the-data-visualizers/market/
http://fr.slideshare.net/KIAnalytics/pdma-france-juin-2012-data-visualizationinnovation?
http://fr.slideshare.net/basbroekhuizen/show-me-the-data-how-elearning-researchcan-benefit-dataviz-design?
http://fr.slideshare.net/expoviz/dataviz-de-la-dataviz
20

21. Find out more
•
On https://techblog.betclicgroup.com/

22. About Betclic
•
•
•
Betclic Everest Group, one of the world leaders in online gaming, has a unique
portfolio comprising various complementary international brands: Betclic, Everest
Gaming, bet-at-home.com, Expekt…
Active in 100 countries with more than 12 million customers worldwide, the Group is
committed to promoting secure and responsible gaming and is a member of several
international professional associations including the EGBA (European Gaming and
Betting Association) and the ESSA (European Sports Security Association).
Through our brands, Betclic Everest Group places expertise, technological know-how
and security at the heart of our strategy to deliver an on-line gaming offer attuned to
the passion of our players.