d3.js Introduction
d3.js is a powerful javascript library which can be used in various jobs like data visualisation, game development etc.
The most enjoyable part of this library of the speed when you running your script on millions of records. Detailed information, api documentation and examples can be found in https://d3js.org address. In this article i try to show some of features whose are fundamentals of the library.
First of all we will start with adding javascript library reference with following sentence
This is the minified version of the js file which can also be used non-minified version. Purpose of this to minimise page load waiting and data throughput
The following bar-chart was created by d3.js library. I will try to explain how can accomplish this simple bar-chart via d3.js
First of all we have to add d3.js file to our html file and add svg html element which is crucial for d3 shapes and other things. SVG element is a html element which came from HTML5 standard and stands for Scalable Vector Graphic. Detailed information can be found https://developer.mozilla.org/en-US/docs/Web/SVG/Element
It is a container element for other graphic elements. But in this example we do not use it for graphic rendering, instead of we are using div element to render bar charts.
In this page we have also empty DIV element at 22nd line which has chart class property which will be used for bar charts. In 26th line javascript block starts for creating charts. We have “data” array for chart lengths and it was filled up random numbers.
Lets look up close our d3 usage. d3 object comes with d3.js library reference and can be use it any javascript block. it is simply look like query syntax. In 29th line we are selecting our empty DIV element with class property and the following line selecting all div element for bar-char whose are not existing. Yes it sounds awkward. It can be thought future selection for element whose intend to be created.
In 31st line we are applying data to our chart but they are not exist yet. 32nd line is creation part of our bar charts. Now we have six div element according to number of item in “data” array variable. In last two lines we applying style to our div element with specifying width property. And this is also important part that are using function for style and div text. These functions will be called six times for each data item element wii be width and insert text of div elements.
We talked about simple d3 features. https://d3js.org site has a full of examples. End of this article i am sharing full code, you can play to learn basics of d3.
Have a good day.
PS: I have changed javascript reference part of the file. In the screenshot it is referencing local file.
<html>
<head>
<title>
D3 js Test Page
</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
</head>
<body>
<div class="chart">
</div>
<script type="text/javascript">
var data = [4,8,15,16,23,42];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
</script>
</body>
</html>
Comments