DEV Community

loading...
Cover image for What is D3.js ?

What is D3.js ?

Mayank Kumar
I am Front End dev ! 🎤 Console.log("Podcast")
・2 min read

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.

graphs

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>
Enter fullscreen mode Exit fullscreen mode

Now lets get into some coding examples:

meme

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
Enter fullscreen mode Exit fullscreen mode

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:

image

Happy Coding 🚀👨‍💻

Discussion (0)