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

22
Data Driven Documents on the road to DataViz Maxime Lemaitre 17/10/2013

description

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

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

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

Data Driven Documents on the road to DataViz

Maxime Lemaitre – 17/10/2013

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

2

Agenda (from Presentation transcript)

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

4

ChronoZoom http://www.chronozoom.com/

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

Data visualization is the use of computer support interactive visual representations of abstract data to amplify cognition Colin Ware

5

DataViz definition

Visualize Form a mental image of

something to make it

perceptible to the mind

Cognition mental processes that includes attention,

memory, producing and understanding

language, learning, reasoning, problem solving,

and decision making

Data Any kind of data : Open Data,

Big Data, BI, Activity Data, Logs,

Traces…

Interactive Not just static content.

Stimulate the viewer to

explore data.

Representation Data doesn’t have only one

representation. Choose the right

representation,

See also http://zoom.it/rcxP#full

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

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

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

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

Why ?

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

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

Data, data and more data

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

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

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

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

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

11

How many 3’s?

Stimulate cognition by adjusting these attributes : Shape, Color, Length, Height,

Position, Contrast, Opacity, Saturation, Orientation, Direction, Size, Border,

Curves, …

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

Above all else, show the data

12

DataViz Principles (from Tufte)

Encourage Eyes to compare data Avoid distording the data

Focus on substance rather than

graphics design or technologies

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

• 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

D3.js from Mike Bostock

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

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

D3.js Basic Concepts

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

15

D3.js First example

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

16

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

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

17

D3.js a few tutorials later …

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

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

Conclusion

18

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

Questions ?

19

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

• 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-visualization-innovation?

• http://fr.slideshare.net/basbroekhuizen/show-me-the-data-how-elearning-research-can-benefit-dataviz-design?

• http://fr.slideshare.net/expoviz/dataviz-de-la-dataviz

20

References

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

Find out more

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

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

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.