D3js fundamentals Part 1

#javascript #webdev #d3js #tutorial

If you know jQuery, it makes manipulating and working with DOM elements very easy. Think of D3js as jQuery made for data which makes manipulating the DOM according to data super easy. D3js also comes with vitalization specific features which will we go through another series of articles. This article is to get a knowledge on D3js fundamentals.

Pre-requisites :

HTML
CSS
Javascript

SetUp

<script src="https://d3js.org/d3.v5.min.js"></script> CDN way
NPM way npm install d3

We will stick to CND way for the sake of keeping it simple to make beginners understand easily. Just include the script tag inside the head of your html file and you are good to go.

1.Selection

d3.select("selection query")
d3.selectAll("selection query")

Open console by pressing f12, there will be logs of the selections at the end.

click on HTML, CSS or JS tabs to look at the code

Most of the functions in d3js returns the context, that means you can chain your functions one after the other, You will see such chaining in next examples.

2.DOM Manipulation

Styling
- d3.select("*selection query*").style("color","red")
Attributes
- d3.select("*selection query*").attr("width","20%")
Switching Classes
- d3.select("*selection query*").classed("active","true")
Inner Text
- d3.select("*selection query*").text("Some Text")
Inserting HTML
- d3.select("*selection query*").html("<div class="block"></div><div>0 - 10</div>")
Changing Properties
- d3.selectAll('.checkbox').property('checked', false)
Appending Elements
- d3.select("*selection query*").append("*tag*")