Techware: July 2014

In this post I'm going to write an introduction about one of the JavaScript library called D3js.

The D3js JavaScript library helps us to make beautiful, interactive, browser-based data visualizations. And this D3js allows us to manipulate elements of a web page in the context of a data set. These elements can be HTML, SVG (Scalable Vector Graphics) , or Canvas elements, and can be introduced, removed, or edited according to the contents of the data set.

Before moving to an example on this, we should know some fundamentals things when we developing a web page. such as HTML, CSS, JavaScript, SVG ans Canvas elements. I assume that you know about those fundamentals.

Let's look at a basic code structures

<!DOCTYPE html>
<html>
<head>    
 <meta charset="utf-8">

 <style>.........</style>   
<script src="d3.js"></script>   (1)
 <script>
    function draw(data) {        (2)

   // D3 visualization code goes here
}
 </script>
</head>
<body>
......
 <script>
   d3.json("data/some_data.json", draw);   (3)
 </script>
</body>
</html>

Have a look at the following description of the about blocks

(1) The D3js library is included to give our visualizations access to the D3js methods.

(2) Here, we always call draw function. Once it is called the data has been downloaded to the client. It will contain the bulk of the code necessary to create the visualization.

(3) The d3.json() function makes an HTTP GET request to a JSON file at the URL described by its first argument and once the data has been downloaded, will then call the function passed as the second argument. This second argument is a callback function (which we will always call draw), which is passed, as its only parameter, the contents of the JSON having been turned into an object or an array, whichever is appropriate.

Look at the following codes

Let me explain by showing an example. Here we will make a simple horizontal bar chat with use of D3js. I'm going to use the following code block which is a common standard structure for HTML page with JavaScript and CSS.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bar Chart</title>
    <style>
        .chart div {
            background-color: steelblue;
            text-align: right;
            padding: 3px;
            margin: 1px;
            color: white;
        }
    </style>
    <script src="d3.js"></script>
</head>
<body>

<div class="chart"></div>

<script>
    var data = [4, 8, 15, 16, 23, 42];

    var x = d3.scale.linear()
            .domain([0, d3.max(data)])
            .range([0, 420]);

    d3.select(".chart")
            .selectAll("div")
            .data(data)
            .enter().append("div")
            .style("width", function (d) {
                return x(d) + "px";
            })
            .text(function (d) {
                return d;
            });
</script>
</body>
</html>

Copy and paste above code into a html page. and open it in the browser.

Enjoy with the Graph.

Techware

Saturday, July 26, 2014

Intro about D3js