D3.js is a JavaScript library for manipulating documents based on data and creating interactive data visualizations. It uses Scalable Vector Graphics (SVG) to render visualizations that scale to any size without losing clarity. While similar to jQuery in selecting and styling elements, D3.js is optimized for visualizing and interacting with data. Examples of visualizations include graphs, charts, maps, networks and ordered lists.

1. D3.JS
Data Driven Documents
SWAPNIL GAIDHANKAR
SHANKAR TIWARI

2. What is D3.js?
JavaScript library for manipulating documents based on data
A powerful data visualization tool
Designed for more than just graphs and charts.
Capable of presenting maps, networks, and ordered lists.

3. SVG (scalable vector graphics)
Insert SVG (scalable vector graphics) into DOM
What are SVG?
Scalable Vector Graphics is an XML- based vector image format for two-dimensional graphics that
has support for interactivity and animation.
Optimized for images – better for visualization
Scales to any size without losing clarity
Looks great on retina displays

4. <svg width="50" height="50"> <circle cx="25" cy="25" r="25"
fill="purple" ></circle> </svg>
<svg width="50" height="50"> <rect x="0" y="0" width="50"
height="50" fill="green" ></rect> </svg>
<svg width="50" height="50"> <line x1="5" y1="5" x2="40" y2="40"
stroke="gray" stroke-width="5"></line> </svg>

5. d3.js is a little like jQuery
jQuery is a fast, small, and feature-rich JavaScript library.
It makes things like HTML document traversal and manipulation, event handling, animation, and
Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Finding Elements in the DOM:
d3:
d3.select(“#vis”)
jQuery:
$(“#vis”)

6. d3.js & jQuery: Styles
Applying css styles to DOM elements:
d3:
d3.select(“#vis”).style(“font-size”, “12px”)
jQuery:
$(“#vis”).style(“font-size”, “12px”)

7. Example
http://bl.ocks.org/eesur/be2abfb3155a38be4de4

8. References
http://notacog.com/d3/slideshow/#2
http://bl.ocks.org/eesur/be2abfb3155a38be4de4
http://www.ireneros.com/conf/nicar/introduction-to-d3.html#5
http://janmilosh.github.io/d3js-presentation/
https://speakerdeck.com/toonketels/introducing-d3-dot-js
https://css-tricks.com/using-svg/

9. Thank You