D3js

1. Data Visualization
Concepts and Implementation using D3

2. Agenda
✦
✦
✦
✦
Hello Visualization
Introducing D3
Show Me The Code
Online Resources

3. Hello Visualization

4. Hello Visualization

5. Hello Visualization

6. Why Visualize
✦ Visualization helps us understand

7. Visualization Challenges
✦
✦
✦
✦
Versatile visualizations
Versatile data
Scalable
Interactive

8. D3 Is Different

9. D3 Is Different
✦
✦
YOU choose how to
visualize D3 just
builds the DOM

10. What You Need
✦
✦
Data items
Know how to visualizean item
Saturday, March 9, 13

11. What You Need
✦ Data Item: #69ce85
✦ Visualization:
<div style="
rgb(108,background-color:
199, 224);
height: 20px;
width: 25px;"
class="color"></div>

12. Demo1: Visualizing
Numbers
http://jsbin.com/ogenow/2/edit

13. D3 Concepts
✦
✦
✦
✦
Use selectAll(...).data(...) to
bind data and DOM
Append new elements on enter()
Remove them on exit()
Separate visualization from data

14. Demo2: Visualizing
Numbers
http://jsbin.com/ogenow/3/edit
Using the DOM instead of SVG is just as easy

15. Using Scales
✦
✦
So far our scale was “coded-in” the
visualization
D3 helps us decouple the scale

16. Using Scales
✦ The scale function creates a
scale
✦ Domain is the input
✦ Range is the output
✦ Basically, it translates
FROM domain TO range
✦ https://github.com/
mbostock/d3/wiki/Scales
var xScale = d3.scale.linear()
.domain([0,data.length])
.range([50,500]);
.attr('cx', function(d, i) {
xScale( i );return
})

17. Scales Demo
http://jsbin.com/iyavef/1/edit

18. Show Me The Code
✦ More D3 Demos:
✦
✦
Bar Graph http://jsbin.com/abagiv/1/edit
Color Picker http://jsbin.com/igited/1/edit

19. More D3 Features
✦ Built-in visualizations for common SVG
shapes

20. D3 Charts
Layout SVG ShapesOriginal Data
Array of
objects from
YOUR world
Maps values
to “shape”
values
A function
that paints
using SVG
path

21. D3 Charts Example
var pie_values =[
{ y: 10, label: 'foo'},
{ y: 20, label: 'bar'},
{ y: 40, label: 'buz'},
{ y: 30, label: 'hss'}
];
Your Data

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}
]

23. D3 Charts Example
✦ Create a shape with:
var arc = d3.svg.arc().outerRadius(150).innerRadius(0);
✦
0 0,1
Now we get:
arc(p_data[0]) ==
"M-88.16778784387098,-121.3525491562421A150,150
-2.7553642961003488e-14,-150L0,0Z"

24. Pie Chart Full Demo
✦ http://jsbin.com/usujoq/1/edit

25. More Layouts
✦ Partition Layout
✦ Adjacency diagrams
✦ Use with d3.svg.arc

26. More Layouts
✦ Cluster Layout
✦ Produces dendograms
✦ Use with d3.svg.diagonal

27. More Layouts
✦ Pack Layout
✦ Enclosure diagrams
✦ Plain circles

28. More Layouts
✦ Histogram Layout
✦ Splits data to bins
✦ Use with plain rects

29. D3 Online
✦
✦
Rich examples gallery:
http://static.cybercommons.org/js/d3/
examples/
D3 wiki:
https://github.com/mbostock/d3/wiki

30. Thanks For Listening
✦
✦
✦
Ynon Perek
ynon@ynonperek.com
http://ynonperek.com