Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Stylish visualisations with D3.js (OdessaJS)

1,955 views

Published on

Published in: Internet, Technology, Art & Photos
  • Be the first to comment

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

×