1. Overview of D3.js
Uday Mittal

2. Data Driven Documents
HTML Documents
Dynamic, Interactive Content
dependent on Data
Manipulate documents based on data

3. A Soup of Technologies
● HTML: Document structure
● Javascript: Dynamic content
● SVG: For scalable code-based graphics
● CSS: For styling documents
This is where
D3 comes in

4. The Wiki to your help!
https://github.com/mbostock/d3/wiki/Tutorials

5. Things that you can do with D3
● http://www.nytimes.com/interactive/2014/11/04/upshot/senate-maps.html
● http://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html
● http://www.nytimes.com/newsgraphics/2013/10/13/russia/
● http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-
connections.html
● https://github.com/mbostock/d3/wiki/Gallery
● http://www.mittaluday.com

6. Let’s brush up!

7. A basic HTML document
A reference to D3 has
to be added here!

8. Adding D3 to your project

9. SVG and an Example

10. Let’s Dive In
If you are drowning, shout out!

11. D3 allows you to
1. Generate HTML elements based on Data
2. Create smooth interactions and animations with HTML elements

12. Concepts to explored
● D3 CSV: https://github.com/mbostock/d3/wiki/CSV
● D3 selections: What? How? Ways to select? Operations on selections
● D3 data joins: How to associate data to HTML elements
○ Enter Selection
○ Exit Selection
● D3 Scales
● D3 transitions: Animations
More here-https://github.com/mbostock/d3/wiki/API-Reference

13. D3 Selections

14. Operations on Selections
● selection.attr(name, [value])
● selection.style(name, [value])
● selection.text([value])
● selection.html([value])
● selection.append(name)
● selection.data([values,[key]])
More here: https://github.com/mbostock/d3/wiki/Selections

15. D3 Data Joins

16. The basics of a Join
Image from: https://bost.ocks.org/mike/join/

17. The mysterious data join code
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 2.5);
Refer - https://bost.ocks.org/mike/join/

18. D3 Transitions
Head to- https://github.com/mbostock/d3/wiki/Transitions