Data Visualization with D3
- 1. DATA VISUALIZATION WITH D3 BY USMAN SHABBIR
- 2. AGENDA • Data Visualization • Why is Data Visualization Important? • Visualization Libraries • What is D3.js? • Why do we need D3.js? • D3.js Features • Getting started with D3 • Data Visualization with D3 in Tasdeeq
- 3. DATA VISUALIZATION: A PICTURE IS WORTH A THOUSAND WORDS
- 4. IMPORTANCE OF DATA VISUALIZATION: "The better you can convey your points visually, the better you can leverage that information"
- 5. VISUALIZATION LIBRARIES: There exists lots of visualization libraries. See e.g. the following: • D3.js: https://d3js.org/ • Chart.js: http://www.chartjs.org/ • Google graphs, • Echarts & Highcharts • ...
- 6. WHAT IS D3.JS? • D3.js is a JavaScript library used to create interactive visualizations in the browser. • The D3.js library allows us to manipulate elements of a webpage in the context of a data set. These elements can be HTML, SVG, or Canvas elements and can be introduced, removed, or edited according to the contents of the data set. I • it is a library for manipulating the DOM objects. • D3.js can be a valuable aid in data exploration, it gives you control over your data's representation and lets you add interactivity.
- 7. WHY D3.JS? JavaScript library Large Dataset Supportive Open-source. Web standards Customization Lightweight
- 8. D3 FEATURES: WEB STANDARDS DATA-DRIVEN TYPES OF VISUALIZATION CUSTOM VISUALIZATIONS TRANSITIONS INTERACTION AND ANIMATION
- 11. SELECTION: • D3 selections allow DOM elements to be selected in order to do something with them, be it changing style, modifying their attributes, performing data-joins or inserting/removing elements. • D3 has two functions to make selections • d3.select • d3.selectAll
- 12. SVG: • Scalable Vector Graphics (SVG) is a way to render graphical elements and images in the DOM. • SVG is an XML-based vector graphics format. • it’s both lightweight and scalable. • D3 uses SVG to create all its visuals, and therefore it is a core building block of the library. • It provides options to draw different shapes such as Lines, Rectangles, Circles, Ellipses, etc.
- 13. DATA BINDING: • Given an array of data and a D3 selection we can attach or ‘join’ each array element to each element of the selection. • This creates a close relationship between your data and graphical elements which makes data-driven modification of the elements straightforward.
- 14. DATA VISUALIZATION WITH D3 IN TASDEEQ:
- 15. THANK YOU!