This post is from a low-reputation account and contains an unverified outbound link. Be cautious before clicking external links.

The gist about D3.js

Words
218
Reading
1 min
Listen
Play
3y

This is my first time hearing about D3.js while searching for chart.js resources.

Basically, D3.js is a library that changes the DOM directly based on some changes in the data.

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.

This is taken from the D3.js official website at https://d3js.org/.

I watched this [YouTube video](] and got the gist of what D3.js can do. Screenshots from the same video would explain this well.

Screenshot 2023-04-02 at 9.25.11 AM.png

The top is the data, called DUMMY_DATA. It has several bits including region.

The magic is in the d3.select in the lower half. It works on the div element in the associated HTML, uses the data, and changes the text in accordance to what is shown in region.

The outcome is the following:

Screenshot 2023-04-02 at 9.23.57 AM.png

This allows the HTML to be re-rendered automatically. See USA, India, China, Germany.

The D3.js library could be useful for dynamically generating charts and as svg files etc. Especially useful for generating charts from external data sources.

Something to keep in mind for the future. Acadmind's video is great!

The gist about D3.js | Ecency