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

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

WHAT IS DATA VISUALISATION?

DATA DRIVEN

DOCUMENTSD3 =

[{ "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 }, ….. ]

VISUALISATION RESULT

http://dataaddict.fr/prenoms/

• jQuery-style syntax

• SVG by default

• Data is attached to DOM elements (__data__)

• Cool & complex math

D3 SPECIFICS

SELECTIONS• CSS3 selector syntax

• d3.select(selector)

• d3.selectAll(selector)

selection methods: attr(), style(), property(), classed(), text(), html(), append(), insert(), remove() etc.

ENTER-UPDATE-EXIT PATTERN

ENTER-UPDATE-EXIT PATTERN

DATA

• inline data (Array)

• JSON

• CSV

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

HOW TO !

DATA INFORMATION?

LAYOUTS

PIECHART EXAMPLEcode: http://jsfiddle.net/Katido/jb9a2/

DATA ARRAY TRANSFORMED TO OBJECT

SCALE

• linear (identity)

• power, logarithmic

• ordinal

• …

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]); !

COLORBREWERhttp://colorbrewer2.org

BUBBLE CHART EXAMPLEhttps://github.com/NickQiZhu/d3-cookbook/blob/master/

src/chapter8/bubble-chart.html

INTERACTION

• mouse events

• multi-touch

• zoom & pan

• drag & drop

PHYSICS RULES THE WORLD!http://bl.ocks.org/mbostock/3231298

• 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

• 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

THANKS!KSENIA REDUNOVA

@KATIDOTK