Introduction and basics concepts on visualisation with D3

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