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.

D3 js

8,891 views

Published on

Introduction and basics concepts on visualisation with D3

Published in: Technology
  • Be the first to comment

D3 js

  1. 1. Data Visualization Concepts and Implementation using D3Saturday, March 9, 13
  2. 2. Agenda ✦ Hello Visualization ✦ Introducing D3 ✦ Show Me The Code ✦ Online ResourcesSaturday, March 9, 13
  3. 3. Hello VisualizationSaturday, March 9, 13
  4. 4. Hello VisualizationSaturday, March 9, 13
  5. 5. Hello VisualizationSaturday, March 9, 13
  6. 6. Why Visualize ✦ Visualization helps us understandSaturday, March 9, 13
  7. 7. Visualization Challenges ✦ Versatile visualizations ✦ Versatile data ✦ Scalable ✦ InteractiveSaturday, March 9, 13
  8. 8. D3 Is DifferentSaturday, March 9, 13
  9. 9. D3 Is Different ✦ YOU choose how to visualize ✦ D3 just builds the DOMSaturday, March 9, 13
  10. 10. What You Need ✦ Data items ✦ Know how to visualize an itemSaturday, March 9, 13
  11. 11. What You Need ✦ Data Item: #69ce85 ✦ Visualization: <div style=" background-color: rgb(108, 199, 224); height: 20px; width: 25px;" class="color"></div>Saturday, March 9, 13
  12. 12. Demo1: Visualizing Numbers http://jsbin.com/ogenow/2/editSaturday, March 9, 13
  13. 13. D3 Concepts ✦ Use selectAll(...).data(...) to bind data and DOM ✦ Append new elements on enter() ✦ Remove them on exit() ✦ Separate visualization from dataSaturday, March 9, 13
  14. 14. Demo2: Visualizing Numbers Using the DOM instead of SVG is just as easy http://jsbin.com/ogenow/3/editSaturday, March 9, 13
  15. 15. Using Scales ✦ So far our scale was “coded-in” the visualization ✦ D3 helps us decouple the scaleSaturday, March 9, 13
  16. 16. Using Scales ✦ The scale function creates a scale var xScale = d3.scale.linear() .domain([0,data.length]) .range([50,500]); ✦ Domain is the input .attr(cx, function(d, i) { ✦ Range is the output return xScale( i ); }) ✦ Basically, it translates FROM domain TO range ✦ https://github.com/ mbostock/d3/wiki/ScalesSaturday, March 9, 13
  17. 17. Scales Demo http://jsbin.com/iyavef/1/editSaturday, March 9, 13
  18. 18. Show Me The Code ✦ More D3 Demos: ✦ Bar Graph http://jsbin.com/abagiv/1/edit ✦ Color Picker http://jsbin.com/igited/1/editSaturday, March 9, 13
  19. 19. More D3 Features ✦ Built-in visualizations for common SVG shapesSaturday, March 9, 13
  20. 20. D3 Charts Original Data Layout SVG Shapes A function Array of Maps values that paints objects from to “shape” using SVG YOUR world values pathSaturday, March 9, 13
  21. 21. D3 Charts Example var pie_values = [   { y: 10, label: foo}, Your Data   { y: 20, label: bar},   { y: 40, label: buz},   { y: 30, label: hss} ];Saturday, March 9, 13
  22. 22. D3 Charts Example Layout [   {"data":{"y":10,"label":"foo"},"value":10,"startAngle": 5.654866776461628,"endAngle":6.283185307179586},   {"data":{"y":20,"label":"bar"},"value":20,"startAngle": 4.39822971502571,"endAngle":5.654866776461628},   {"data":{"y":40,"label":"buz"},"value":40,"startAngle": 0,"endAngle":2.5132741228718345},   {"data":{"y":30,"label":"hss"},"value":30,"startAngle": 2.5132741228718345,"endAngle":4.39822971502571} ]Saturday, March 9, 13
  23. 23. D3 Charts Example ✦ Create a shape with: var arc = d3.svg.arc().outerRadius(150).innerRadius(0); ✦ Now we get: arc(p_data[0]) == "M-88.16778784387098,-121.3525491562421A150,150 0 0,1 -2.7553642961003488e-14,-150L0,0Z"Saturday, March 9, 13
  24. 24. Pie Chart Full Demo ✦ http://jsbin.com/usujoq/1/editSaturday, March 9, 13
  25. 25. More Layouts ✦ Partition Layout ✦ Adjacency diagrams ✦ Use with d3.svg.arcSaturday, March 9, 13
  26. 26. More Layouts ✦ Cluster Layout ✦ Produces dendograms ✦ Use with d3.svg.diagonalSaturday, March 9, 13
  27. 27. More Layouts ✦ Pack Layout ✦ Enclosure diagrams ✦ Plain circlesSaturday, March 9, 13
  28. 28. More Layouts ✦ Histogram Layout ✦ Splits data to bins ✦ Use with plain rectsSaturday, March 9, 13
  29. 29. D3 Online ✦ Rich examples gallery: http://static.cybercommons.org/js/d3/ examples/ ✦ D3 wiki: https://github.com/mbostock/d3/wikiSaturday, March 9, 13
  30. 30. Thanks For Listening ✦ Ynon Perek ✦ ynon@ynonperek.com ✦ http://ynonperek.comSaturday, March 9, 13

×