This content originally appeared on DEV Community and was authored by Mayank Kumar
As a developers I really love data, and that too in a arranged manner.
Sometimes Data can be such a mess, that it becomes more of a headache that a resource, with data we can solve so many problem in our day to day life.
D3.js can help us here
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.
D3 stands for Data-Driven Documents
The full form explains itself, its is a library, which helps us in making graphs, charts, projections form just a set of data.
Installation
<script src="https://d3js.org/d3.v7.min.js"></script>
Now lets get into some coding examples:
d3.selectAll(); //this is used to select all the elements given inside the parenthesis
d3.select(); // this is used to select just a particular element
//inside the parenthesis
d3.select('h1')
.style('color', 'red') // this takes the h1 tag from the html and converts it into red color;
.text('hi there'); // this changes the text in the html to the given string
d3.select('body').append('p').text('YOLO'); // this appends the text to the p tag in the body
d3.select('body').append('p').text('YOLO');
d3.select('body').append('p').text('YOLO');
d3.select('body').append('p').text('YOLO');
d3.selectAll('p').style('color', 'blue'); // this snippet is used to select all the p tags and change their color to blue
These are the basics way we can manipulate the Data inside the JS using the D3.js library
To get more depth knowledge on this topic go and check this video form FreeCodeCamp.org on their YouTube channel
Meme Section:
Happy Coding ???
This content originally appeared on DEV Community and was authored by Mayank Kumar
Mayank Kumar | Sciencx (2021-08-02T06:41:26+00:00) What is D3.js ?. Retrieved from https://www.scien.cx/2021/08/02/what-is-d3-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.