Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to D3 js
Similar to D3 js (20)
More from Ynon Perek
More from Ynon Perek (20)
Recently uploaded
Recently uploaded (20)
D3 js
- 1. Data Visualization Concepts and Implementation using D3 Saturday, March 9, 13
- 2. Agenda ✦ Hello Visualization ✦ Introducing D3 ✦ Show Me The Code ✦ Online Resources Saturday, March 9, 13
- 3. Hello Visualization Saturday, March 9, 13
- 4. Hello Visualization Saturday, March 9, 13
- 5. Hello Visualization Saturday, March 9, 13
- 6. Why Visualize ✦ Visualization helps us understand Saturday, March 9, 13
- 7. Visualization Challenges ✦ Versatile visualizations ✦ Versatile data ✦ Scalable ✦ Interactive Saturday, March 9, 13
- 8. D3 Is Different Saturday, March 9, 13
- 9. D3 Is Different ✦ YOU choose how to visualize ✦ D3 just builds the DOM Saturday, March 9, 13
- 10. What You Need ✦ Data items ✦ Know how to visualize an item Saturday, March 9, 13
- 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. Demo1: Visualizing Numbers http://jsbin.com/ogenow/2/edit Saturday, March 9, 13
- 13. D3 Concepts ✦ Use selectAll(...).data(...) to bind data and DOM ✦ Append new elements on enter() ✦ Remove them on exit() ✦ Separate visualization from data Saturday, March 9, 13
- 14. Demo2: Visualizing Numbers Using the DOM instead of SVG is just as easy http://jsbin.com/ogenow/3/edit Saturday, March 9, 13
- 15. Using Scales ✦ So far our scale was “coded-in” the visualization ✦ D3 helps us decouple the scale Saturday, March 9, 13
- 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/Scales Saturday, March 9, 13
- 17. Scales Demo http://jsbin.com/iyavef/1/edit Saturday, March 9, 13
- 18. Show Me The Code ✦ More D3 Demos: ✦ Bar Graph http://jsbin.com/abagiv/1/edit ✦ Color Picker http://jsbin.com/igited/1/edit Saturday, March 9, 13
- 19. More D3 Features ✦ Built-in visualizations for common SVG shapes Saturday, March 9, 13
- 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 path Saturday, March 9, 13
- 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. 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. 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. Pie Chart Full Demo ✦ http://jsbin.com/usujoq/1/edit Saturday, March 9, 13
- 25. More Layouts ✦ Partition Layout ✦ Adjacency diagrams ✦ Use with d3.svg.arc Saturday, March 9, 13
- 26. More Layouts ✦ Cluster Layout ✦ Produces dendograms ✦ Use with d3.svg.diagonal Saturday, March 9, 13
- 27. More Layouts ✦ Pack Layout ✦ Enclosure diagrams ✦ Plain circles Saturday, March 9, 13
- 28. More Layouts ✦ Histogram Layout ✦ Splits data to bins ✦ Use with plain rects Saturday, March 9, 13
- 29. D3 Online ✦ Rich examples gallery: http://static.cybercommons.org/js/d3/ examples/ ✦ D3 wiki: https://github.com/mbostock/d3/wiki Saturday, March 9, 13
- 30. Thanks For Listening ✦ Ynon Perek ✦ ynon@ynonperek.com ✦ http://ynonperek.com Saturday, March 9, 13