Upload
kseniya-redunova
View
651
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Визуализируем стильно с 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