1. Визуализируем
стильно с D3.js
Ксения Редунова

2. КСЕНИЯ РЕДУНОВА
@KATIDOTK

3. WHAT IS
DATAVISUALISATION?

6. DATA
DRIVEN
DOCUMENTS
D3 =

7. [{
"prenom": "Aaron",
"years": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 4, 4, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 10,
16, 24, 7, 9, 8, 15, 16, 13, 24, 19, 29, 36, 25, 40, 34, 71, 76, 91, 119, 134, 130, 135, 335, 438, 597,
912, 1383, 1354, 1604],
"sexe": "h",
"mixte": false,
"total": 7731
}, {
"prenom": "Ivan",
"years": [14, 8, 26, 17, 19, 25, 20, 25, 28, 29, 38, 42, 51, 48, 56, 63, 66, 64, 56, 58, 66, 57, 52,
68, 52, 64, 51, 47, 32, 37, 50, 48, 65, 43, 55, 49, 47, 44, 43, 52, 34, 36, 33, 44, 33, 35, 33, 82, 50,
72, 67, 70, 93, 102, 106, 138, 134, 134, 168, 165, 184],
"sexe": "h",
"mixte": false,
"total": 3588
}, {
"prenom": "Abdel",
"years": [16, 15, 17, 24, 76, 38, 46, 54, 58, 71, 82, 78, 85, 87, 69, 76, 73, 71, 80, 82, 74, 77,
84, 96, 93, 69, 57, 76, 104, 91, 81, 102, 109, 103, 112, 96, 84, 94, 92, 78, 78, 52, 52, 74, 61, 47, 55,
58, 36, 57, 66, 52, 59, 67, 57, 62, 60, 60, 55, 140, 57],
"sexe": "h",
"mixte": false,
"total": 4275
}, …..
]

8. VISUALISATION RESULT
http://dataaddict.fr/prenoms/

10. • jQuery-style syntax
• SVG by default
• Data is attached to DOM elements (__data__)
• Cool & complex math
D3 SPECIFICS

11. SELECTIONS
• CSS3 selector syntax
• d3.select(selector)
• d3.selectAll(selector)
selection methods:
attr(), style(), property(), classed(), text(), html(),
append(), insert(), remove() etc.

12. ENTER-UPDATE-EXIT
PATTERN

13. ENTER-UPDATE-EXIT
PATTERN

14. DATA
• inline data (Array)
• JSON
• CSV

15. PERFORMANCE
• Reuse your selections
• Remove non-essential elements (<g> if not needed)
• Canvas instead of SVG http://bl.ocks.org/mbostock/1276463
• Reduce the size of data
• Use d3.timer() instead of setInterval()
• Update selectively

16. HOWTO
!
DATA INFORMATION?

18. LAYOUTS

19. PIECHART EXAMPLE
code: http://jsfiddle.net/Katido/jb9a2/

22. DATA ARRAYTRANSFORMED
TO OBJECT

23. SCALE
• linear (identity)
• power, logarithmic
• ordinal
• …

24. COLORS
• default scales
color = d3.scale.category10()
• mapping
color = d3.scale.ordinal()
.range(['#dadada', '#b3b3b3', '#898989', '#5f5f5f',‘#212121'])
.domain([0, 1, 2, 3, 4, 5])
• color brewer
http://d3js.org/colorbrewer.v1.min.js
var z = d3.scale.ordinal()
.domain(["foo", "bar", "baz"])
.range(colorbrewer.RdBu[9]);
!

25. COLORBREWER
http://colorbrewer2.org

26. BUBBLE CHART EXAMPLE
https://github.com/NickQiZhu/d3-cookbook/blob/master/
src/chapter8/bubble-chart.html

28. INTERACTION
• mouse events
• multi-touch
• zoom & pan
• drag & drop

29. PHYSICS RULESTHE WORLD!
http://bl.ocks.org/mbostock/3231298

30. •
freeDataMap - Company data visualization tool
•
dimple.js - Flexible axis-based charting API
•
Cubism -Time series visualization
•
Rickshaw -Toolkit for creating interactive time series graphs
•
NVD3 - Re-usable charts for d3
•
Crossfilter - Fast Multidimensional Filtering for Coordinated
Views
•
dc.js - Dimensional Charting Javascript Library
TOOLS & LIBS

31. • Mike Bostock http://bost.ocks.org/mike/,
• Gallery http://bl.ocks.org/mbostock
• Wiki https://github.com/mbostock/d3/wiki
• Murray, Scott, Interactive Data Visualization for the Web, An
Introduction to Designing with D3
• Qi Zhu, Nick, Data Visualization with D3.js Cookbook
LINKS & LITERATURE

32. THANKS!
KSENIA REDUNOVA
@KATIDOTK