Stylish visualisations with D3.js (OdessaJS)

1,058

Published on

Published in: Internet, Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,058
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Stylish visualisations with D3.js (OdessaJS)

  1. 1. Визуализируем стильно с D3.js Ксения Редунова
  2. 2. КСЕНИЯ РЕДУНОВА @KATIDOTK
  3. 3. WHAT IS DATAVISUALISATION?
  4. 4. DATA DRIVEN DOCUMENTS D3 =
  5. 5. [{ "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 }, ….. ]
  6. 6. VISUALISATION RESULT http://dataaddict.fr/prenoms/
  7. 7. • jQuery-style syntax • SVG by default • Data is attached to DOM elements (__data__) • Cool & complex math D3 SPECIFICS
  8. 8. SELECTIONS • CSS3 selector syntax • d3.select(selector) • d3.selectAll(selector) selection methods: attr(), style(), property(), classed(), text(), html(), append(), insert(), remove() etc.
  9. 9. ENTER-UPDATE-EXIT PATTERN
  10. 10. ENTER-UPDATE-EXIT PATTERN
  11. 11. DATA • inline data (Array) • JSON • CSV
  12. 12. 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
  13. 13. HOWTO ! DATA INFORMATION?
  14. 14. LAYOUTS
  15. 15. PIECHART EXAMPLE code: http://jsfiddle.net/Katido/jb9a2/
  16. 16. DATA ARRAYTRANSFORMED TO OBJECT
  17. 17. SCALE • linear (identity) • power, logarithmic • ordinal • …
  18. 18. 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]); !
  19. 19. COLORBREWER http://colorbrewer2.org
  20. 20. BUBBLE CHART EXAMPLE https://github.com/NickQiZhu/d3-cookbook/blob/master/ src/chapter8/bubble-chart.html
  21. 21. INTERACTION • mouse events • multi-touch • zoom & pan • drag & drop
  22. 22. PHYSICS RULESTHE WORLD! http://bl.ocks.org/mbostock/3231298
  23. 23. • 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
  24. 24. • 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
  25. 25. THANKS! KSENIA REDUNOVA @KATIDOTK
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×