A small presentation with some quick explanation of what D3.js is and a few examples of what it can do for you. It can be used for a quick presentation (20-30 mins) after which you should have an idea of whether you can use D3.js for your project.

1. Data Visualization
with D3.js
20-30 minutes
Updated in May 2014 falmeida1988@gmail.com
Professional-looking, dynamic charts with Javascript

2. Why data visualization?
Useful for obtaining high-level understanding of all kinds of
data much more easily than through reading all data.
Enables one to see patterns simply not accessible otherwise
(proportionally more relevant as data magnitude increases)
More data can be consumed by end-users in a shorter span of time.

3. D3.js - I
D³ = Data-Driven Documents
Directives for manipulating <svg> (vector graphics tags)
Static and dynamic charts and displays.
Most widely used vector graphics library in javascript.

4. D3.js - II
No predefined charts, graphics - you talk straight to <svg> elements like
<rect> and <circle>. Not much reusability out of the box either.
You need to work out distances, heights, widths, normalization, scaling, axes,
etc, all by yourself.

5. License
Pretty permissive:
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.

6. Simple example - I
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 100);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (500 / dataset.length);
})
.attr("y", function(d) { return 100 - (d * 4); })
.attr("width", w / dataset.length - 1)
.attr("height", function(d) { return d * 4; })

7. Simple example - I
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 100);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (500 / dataset.length);
})
.attr("y", function(d) { return 100 - (d * 4); })
.attr("width", w / dataset.length - 1)
.attr("height", function(d) { return d * 4; })
create <svg>
object create a <rect> to
draw a bar for each
data point
set (x,y)
coordinates for
each bar set a constant
width for each
bar
set heights
according to each
data point

8. Colours and labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) { return d; })
.attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")"; });
labels
bar colours
depend on their
values

9. Axes
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1];
})])
.range([h - padding, padding]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",
0)")
.call(yAxis);
first, define a
scale
then attach it
to an axis
then add it to
the <svg>

10. Transitions
dataset = [];
for (var i = 0; i < numValues; i++) {
var newNumber1 = Math.random();
var newNumber2 = Math.random();
dataset.push([newNumber1,
newNumber2]);
}
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000)
.attr("cx", function(d) { return xScale(d[0]);
})
.attr("cy", function(d) { return yScale(d[1]);
});
d3.select("p")
.on("click", function() {...
wrap all code with this to indicate you want it
to run upon a click event on <p> elements
generate new,
random data
points to replace
old ones
create a transition for all <circle>s,
during which data points will smoothly
move to their new spots

11. Other layouts - I
pie charts radial trees chord diagram
source: https://github.com/mbostock/d3/wiki/Gallery

12. Other layouts - II
voronoi diagram streamgraph
source: https://github.com/mbostock/d3/wiki/Gallery

13. Complex Stuff
https://github.com/mbostock/d3/wiki/Gallery
http://bl.ocks.org/mbostock
http://christopheviau.com/d3list/gallery.html

14. Refs
Simple Example
Colours and Labels
Axes
Transitions