A brief introduction to D3js Data Visualization

D3.js is a JavaScript library which helps you to create amazing data visualization using HTML, SVG and CSS by leveraging existing web standards and it supports and gives full access to all modern browsers as well as that of Android and iOS. D3 refers to Data-Driven Documents. Today it is a most popular web based data visualization technology in the world.

Since last couple of weeks I am learning D3, so you can say I am a beginner to the D3. Here I am going to show you a very basic Data Visualization example.

To start with D3js data visualization download the latest version of JavaScript file or link to the latest release in the <head> element section as below.

[sourcecode language=”html”]
<script src=”http://d3js.org/d3.v3.min.js”></script>

Below are the codes that will simply render the bar chart from the given array data.

[code language=”javascript”]

var dataArray = [150, 240, 450]

var svg = d3.select(“body”)
.attr(“width”, 500)
.attr(“height”, 500);

var bars = svg.selectAll(“rect”)
.attr(“width”, function (d) { return d; })
.attr(“height”, 50)
.attr(“y”, function (d, i) { return i * 60; })
.style(“fill”, “steelblue”);

When you will browse the file, it will look like the following visual output.

bar chart data visualization

In this example data is stored in a simple JavaScript array dataArray. In the next step svg element is added to the body element with select function. Finally visual set is created by using selectAll function. data function is used to bind the array as a data set. Once these sets are defined, the enter() function is defined to select all data element that are not yet visualized. Then rectangle element is added to the svg element with attributes width which is retuning the array values for each bar, bar height with value 50, y index is returning the value with 60 from the top for each bar and fill color is steel blue.

Similarly there are many more things in D3 to create data visualization such as Bar Chart, Pie Chart, Maps, Graphs etc.

If you want to learn more on Data Visualization, below are some helpful resources.

  1. D3js Video tutorial: https://youtu.be/n5NcCoa9dDU?list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p
  2. Tutorials on Introductions and Core Concept: https://github.com/mbostock/d3/wiki/Tutorials
  3. API Reference: https://github.com/mbostock/d3/wiki/API-Reference
  4. D3 Plugins: https://github.com/d3/d3-plugins

Leave a Reply

Close Menu