D3 js

7,168 views

Published on

Introduction and basics concepts on visualisation with D3

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,168
On SlideShare
0
From Embeds
0
Number of Embeds
437
Actions
Shares
0
Downloads
133
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×