As per the definition given on the D3 official website:

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 is a JavaScript library for creating various charts on your webpage using HTML, CSS and SVG(Scalable Vector Graphics).

D3 can be downloaded from their official Github page or using npm.

npm install d3 --save

After downloading just add the d3.js path using the script tag in the header. So your D3 base document should look something like this.

<!doctype html>
<html lang="en">
<head>
<title>D3 demo</title>

</head>

<body>

</body>
</html>

Before we start creating charts with D3, let us first look into some of the methods provided by the D3 library for easy access to data.


var data=[45,77,3,54,11,9,126,20,32,68,240];

console.log(d3.min(data)); // outputs the smallest number in the array

console.log(d3.max(data)); // outputs the largest number in the array

console.log(d3.extent(data)); // outputs both smallest and largest number as an array

The above code will work fine in case we pass an array as data, but what if we need to find the minimum or maximum value from an array of objects. Let use see an example:


var data=[
{name:"A", value:45},
{name:"B", value:77},
{name:"C", value:3},
{name:"D", value:54},
{name:"E", value:11},
{name:"F", value:9},
{name:"G", value:126},
{name:"H", value:20},
{name:"I", value:32},
{name:"J", value:68},
{name:"K", value:240}
];

console.log(d3.min(data, function(i){
return i.value;
}
));
// outputs the smallest number in the array object
/*
In the above min() function we pass the data array as the first argument and second parameter is a function (accessor function) which will return the value which needs to be used.

Same can be done for the max() and extent() function
*/

console.log(d3.max(data, function(i){
return i.value;
}); // outputs the largest number in the array object

console.log(d3.extent(data, function(i){
return i.value;
}); // outputs both smallest and largest number as an array object

D3 makes use of DOM (Document Object Model) by selecting the elements, adding or manipulating the elements and drawing charts using the data with SVG. Let us see how we can dynamically add an SVG element in our DOM via D3, because every chart will be created inside svg tag.


In the above code what we are doing is:

Step 1: Using d3 to select the body element, because there needs to be some parent element or container for the svg element we need to create. For this we use select() method of d3.

Step 2: Using the append() method to create an svg element and append it to the body element.

Step 3: Setting the id, width and height of the svg element using the attr() methods in a chain.

Step 4: Storing the reference of the svg element in the svgRef to later access it.

Related Posts