Data Driven Documents
on the road to DataViz
Maxime Lemaitre – 17/10/2013
Agenda
(from Presentation transcript)

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

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

4
DataViz
definition
Visualize
Data
Any kind of data : Open Data,
Big Data, BI, Activity Data, Logs,
Traces…

Form a mental ...
DataViz
In the past

Think about all the maps, graphs and
charts in existence, and the popularity
of this form of data ana...
Why ?
Analyze & communicate information clearly
and effectively through graphical means
A powerfull tool to
• Discover Pat...
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 = 1018byte...
DataViz
The Humain Brain

Humain brains are wired to speak
and understand spoken language

People have to be taught to rea...
Anscombe's quartet
importance of graphing data before analyzing it

four datasets that
have nearly identical
simple statis...
How many 3’s?

Stimulate cognition by adjusting these attributes : Shape, Color, Length, Height,
Position, Contrast, Opaci...
DataViz
Principles (from Tufte)

Above all else, show the data

Focus on substance rather than
graphics design or technolo...
D3.js
from Mike Bostock
•

Created in 2011 by Mike Bostock, successor from Protovis
– Top #6 in GitHub
– ~19 200 stars, 16...
D3.js
Basic Concepts
Selections
Atomic Operand ; a filtered set of elements queried from the current document.

Operators
...
D3.js
First example

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

16
D3.js
a few tutorials later …

https://github.com/mbostock/d3/wiki/Gallery

17
Conclusion

18
Questions ?

19
References
•
•
•
•
•
•
•
•
•
•
•
•

•
•

http://dataviz.tumblr.com/
http://www.datavisualization.fr
http://fr.slideshare.n...
Find out more
•

On https://techblog.betclicgroup.com/
About Betclic
•
•

•

Betclic Everest Group, one of the world leaders in online gaming, has a unique
portfolio comprising ...
Upcoming SlideShare
Loading in...5
×

Mini-Training: DataViz, data-driven documents and D3.js

1,549

Published on

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

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,549
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
50
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mini-Training: DataViz, data-driven documents and D3.js

  1. 1. Data Driven Documents on the road to DataViz Maxime Lemaitre – 17/10/2013
  2. 2. Agenda (from Presentation transcript) 2
  3. 3. A few samples http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html 3
  4. 4. ChronoZoom http://www.chronozoom.com/ 4
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. D3.js First example 15
  16. 16. D3.js dynamic update (http://bl.ocks.org/mbostock/raw/3808234/) 16
  17. 17. D3.js a few tutorials later … https://github.com/mbostock/d3/wiki/Gallery 17
  18. 18. Conclusion 18
  19. 19. Questions ? 19
  20. 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. 21. Find out more • On https://techblog.betclicgroup.com/
  22. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×