D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

1. Introduction to
d3.js
By,
Ashish Tomer
Software Consultant
Knoldus Software
LLP, Noida

2. Today’s Agenda
●
What’s d3.js
●
Why d3.js
●
Drawing with d3.js
●
Scales
●
Axes

3. What’s d3.js
A Javascript library which -

4. What’s d3.js
A Javascript library which -
●
Draws charts

5. What’s d3.js
A Javascript library which -
●
Draws charts
●
Visualizes data

6. What’s d3.js
A Javascript library which -
●
Draws charts
●
Visualizes data
●
Doesn’t provide pre-defined charts

7. What’s d3.js
A Javascript library which -
●
Draws charts
●
Visualizes data
●
Doesn’t provide pre-defined charts
●
Can be used to develop the real time
dashboards

8. What’s d3.js
A Javascript library which -
●
Draws charts
●
Visualizes data
●
Doesn’t provide pre-defined charts
●
Can be used to develop the real time dashboards
●
Can’t be used to draw the 3-D charts

9. Why d3.js

10. Why d3.js
There are lot of JS libraries for data
visualization.

11. Why d3.js
There are lot of JS libraries for data
visualization.
Then why another JS library?

12. Why d3.js
D3 can visualize the big data.

13. Why d3.js
D3 can visualize the big data.
It can visualize 10’s of thousands of
data nodes in the DOM.

14. Why d3.js
D3 can visualize the big data.
It can visualize 10’s of thousands of
data nodes in the DOM.
Hence an ideal choice for the
huge data visualization.

15. Drawing with d3.js
Drawing with D3 requires a basic knowledge
about
●
HTML / CSS
●
SVG
●
Javascript ( or any programming experience )
** To draw the advanced visualization, one needs to have a
knowledge of mathematics (algebra, statistics and geometry).

16. Scales
● Scales are used to map the domain of data to
a range.

17. Axes
● Axes map the points on a plain to values.

18. Demo
D3-learning-project

19. Thank you