It is a visualization framework and a front-end library of your web application. Data manipulation comes from the backend. This library creates a visualization for binding data and graphical elements to the Document object modal.
Required skills to start learning
D3 pros or advantages
D3js Cons and disadvantages
- Learning curve - It takes a lot of time for developers to have a good understanding of concepts.
- Old browsers are not supported
- Difficult for creative visual design graphs.
D3js Setup and Install
We will see how we can use this library in an application. This library can be used in HTML or as an npm library. Now we will see how we can use the library on HTML pages. Installation is simple. you can include the CDN library in the script tag of your HTML. It will have access to all objects of the d3.js library.
D3js Hello World Example
<html> <head> </head> <body> <script src="https://d3js.org/d3.v5.min.js"></script> <script> d3.select("body").append("span") .text("Test programm"); </script> </body> <html>
D3 has a concept of selector API like jquery selectors to select HTML dom elements In this example, used the select method to select boy element, Appending span element and add text to display it There are various selectors same like selectors in jquery
d3.select(’tag’)- select the dom element like div/span/body
d3.select(’#id’) - select the elements based on id
d3.select(’.cssclass’)- select the elements based on CSS class This is a basic understanding of d3js library. I will post various examples with explanations in my future posts