DEV Community

Sai Kiran
Sai Kiran

Posted on • Updated on

D3js fundamentals Part 1

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

  1. <script src="https://d3js.org/d3.v5.min.js"></script> CDN way
  2. 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

  1. d3.select("selection query")
  2. 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

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

Next article we will go through SVG fundamentals

Top comments (3)

Collapse
 
maheshnathwani profile image
maheshnathwani

Nice approach, starting from the very basics is quite important to get a proper grip over this library.

Collapse
 
shahlan profile image
s.shahlan

Like your article very much. Could advice how can i get to use console from smartphone

Collapse
 
saikiran profile image
Sai Kiran

You need a different browser, Try this ?