Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to D3.js

1,094 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Introduction to D3.js

  1. 1. Introduction to d3.js By, Ashish Tomer Software Consultant Knoldus Software LLP, Noida
  2. 2. Today’s Agenda ● What’s d3.js ● Why d3.js ● Drawing with d3.js ● Scales ● Axes
  3. 3. What’s d3.js A Javascript library which -
  4. 4. What’s d3.js A Javascript library which - ● Draws charts
  5. 5. What’s d3.js A Javascript library which - ● Draws charts ● Visualizes data
  6. 6. What’s d3.js A Javascript library which - ● Draws charts ● Visualizes data ● Doesn’t provide pre-defined charts
  7. 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. 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. 9. Why d3.js
  10. 10. Why d3.js There are lot of JS libraries for data visualization.
  11. 11. Why d3.js There are lot of JS libraries for data visualization. Then why another JS library?
  12. 12. Why d3.js D3 can visualize the big data.
  13. 13. Why d3.js D3 can visualize the big data. It can visualize 10’s of thousands of data nodes in the DOM.
  14. 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. 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. 16. Scales ● Scales are used to map the domain of data to a range.
  17. 17. Axes ● Axes map the points on a plain to values.
  18. 18. Demo D3-learning-project
  19. 19. Thank you

×