This is to show how d3.js can manipulate the DOM

In this section we can see how the html tags can be manputed with the help of d3.js.
In the project folder there are 3 files

• 1.index.html : - Main html file
• 2.styles.css : - Styles file
• 3.bundle.js : - d3 effects file

In the head section of htmt file, link for the styles.css file is given. Similarly script tag is given which refers to the d3.min.js location where the d3 library is downloaded.

All the styling of the html tags for color, postion, attributes etc are coded in the styles.css file. The d3 related script actions and effects are coded in the bundle.js file. This file is given reference with the script tag inside the body of the html. Note : The reference script line shoud be the last statement of the body section.

We will play with the tags properties like colour font size etc with the help of functions using the d3. Let us have 2 buttons below

• 1. Change
• 2. Reset

By clicking the Change button, we can change some features of some elements and by clicking the Reset button we will reset all the changes.

Important Aspects:

1. html file
2. css file
3. javascript file
4. link to css file inside the html head section
5. link to d3.min.js file (local or web)inside the html head section
6. link to javascript file that contains d3 actions/code as the last line of body section