This document outlines an agenda and introduction to data visualization concepts and implementation using D3. It discusses why visualization is useful, challenges with versatile data and visualization, and how D3 is different by allowing the user to choose the visualization rather than prescribing a particular visualization. It then demonstrates basic D3 concepts like binding data to DOM elements and using scales to map data values to visual properties before discussing built-in visualization types, layouts, and providing resources for additional examples.

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