Tutorial #10 Dive into DC.JS a JavaScript Library - Box Plot

What Will I Learn?

Write here briefly the details of what the user is going to learn in a bullet list.

Develop Box Plot using
Load CSV data using d3.js

Requirements

Basics of HTML and CSS
Intermediate Level JavaScript
Knowledge about Statistical Data

Difficulty

Intermediate

Tutorial Contents

What is Box Plot?
Create Working Environment
Start developing Box Plot

What is Box Plot?

A box plot/boxplot is a type of chart that help us to graphically depicting groups of numerical data through their quartiles. Box Plot is the best way to compare distribution of data. It show the data in really beautiful manner, the line at the each end of the box plot indicate the min and max value. And the each end of the colored area indicates the extremes of the inter-quartile range. You can also see the line between the colored area, this line indicate the median value. Boxplot sometime also come up with little circles, these circles indicate the outlier in the distribution, they help us to to see the skew.

Today, we are going to develop a box plot for the Morley experimental data, You can download this data CSV format from the github.

Create Working Environment

Before we move to develop the box plot using dc.js library we've to create working environment for the library to work on our chart. Open you text editor create file with name ``` boxPlot.html save it in your working directory. Now write all the necessary code for the HTML file.

<!DOCTYPE html>
<html lang="EN">
    <head>
      <meta charset="utf-8">
      <title>Box Plot</title>
    </head>
    <body>

    <body>
<html>

Now link the dc.js library and the other two libraries DC depends on , d3.js and crossfilter.js . Write this code withing the <head> tag.

      <title>Box Plot</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />

Now, give heading to your page with heading tag and code a div tag in which you want to show your BoxPlot. Also assign it an ID. Write this code within the <body> tag


        <h1>Box Plot: Morely Experiment</h1>
        <div id="boxPlot"></div>

Here we've developed an environment to work with dc.js in order to develop a Box Plot.

Start developing Box Plot

Its time to move toward our Box Plot, we've downloaded our data, as you can see it in CSV format. We'll use here d3.js library to parse the CSV data. For this use this method csv([]), it will parse the csv data.

            d3.csv("morley.csv", function(error, exp){
                         // The rest of the code will be written here.
            });

You can see we pass two arguments to csv([]) first is the name of the file and second a method, the method also contains two arguments, the first is error and exp . error contains the errors if there exist and exp contains the parse csv data.

You can check the parsed data by showing it in console.

            d3.csv("morley.csv", function(error, exp){
                        
                   console.log(exp);
            });

In the console you can see the header of the csv file used as the property name for the data objects.

If you see the more close view of the output you can see all value in the associated with properties are all the string. But here we want to work with numbers, we've to convert it from string to number. There are couple of ways to do this, but We find this way nice and clean. Write this way within you function body mentioned above.

                exp.forEach(function(d){

                    //console.log(typeof(d.Expt[0])); // before conversion
                    d.Expt = +d.Expt;
                    d.Run = +d.Run;
                    d.Speed = +d.Speed;

                });

After doing type conversion, feed the data to crossfilter.js library.

var facts = crossfilter(exp);

Create the dimension for experiments in the data.

var dimensionByExperiment = facts.dimension(function(d){ return "Expt " + d.Expt});

Here is the real work in the tutorial is to grouping the data. it will be done through reduce() method in the crossfilter.

var GroupBySpeed = dimensionByExperiment.group().reduce(reduceAdd, reduceRemove, reduceIntialize);

You can see we pass three arguments to reduce method, these three parameters are the functions. First we talk about the reducIntialize. If provide the initial point to the reduceAdd and reduceRemove method. Usually reduceIntialize method returns the zero as starting point but for our code we return an empty array[].

function reduceIntialize(){ 
                    return []; 
                }

At second reduceAdd(), this method takes two arguments, the first is the initial value that is return by reduceintialize method and 2nd one is dimensional data. Our reduceAdd method will be .

function reduceAdd(p, v){ 
                    p.push(v.Speed); return p;  
                }

Now at third is reduceRemove, it will also take two arguments same as our 2nd method. This method will for our chart .


function reduceRemove(p, v){ 
                    p.splice(p.indexOf(v.Speed),1); return p; 
                }

Till now, we have created the dimension of the given data and also grouped the data. its time to move toward our chart. Create the new object of the boxPlot() class.

var boxPlot = dc.boxPlot("#boxPlot")

Set the width and height of the chart.

                var boxPlot = dc.boxPlot("#boxPlot")
                        .width(1024)
                        .height(250)

Then give margin to the chart, that it give us a nice look.

                var boxPlot = dc.boxPlot("#boxPlot")
                        .width(1024)
                        .height(250)
                        .margins({top:40,bottom:60,right:80,left:60})

Now pass the dimension and grouped data that created with corssfilter.

                var boxPlot = dc.boxPlot("#boxPlot")
                        .width(1024)
                        .height(250)
                        .margins({top:40,bottom:60,right:80,left:60})
                        .dimension(dimensionByExperiment, "Expt")
                        .group(GroupBySpeed)

At the end render the chart

                    dc.renderAll();

Output:

You can see our box plot are of different color, make then of same color add the method to your code.

.colors("#4286f4")

Output:

There are also some other method of boxPlot class for the styling of the Box Plots in the chart.

boxPadding( [padding]) : this method get/set the padding between boxes as a fraction of box size.
boxWidth( [boxWidth]): this method get/set the width of the boxes you can do this by passing numerical value and by passing a function.
tickFormat( [tickFormat]): this method set the numerical format for the box plot values.

                        .tickFormat(d3.format('.2f'))
                        .boxWidth(10);
                        .boxPadding(0.6); //bu defult it is 0.8

Source Code:

<!DOCTYPE html>
<html lang="EN">
    <head>
      <meta charset="utf-8">
      <title>Box Plot</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />
    </head>
    <body>
        <h1>Box Plot: Morely Experiment</h1>
        <div id="boxPlot"></div>

        <script type="text/javascript">

            d3.csv("morley.csv", function(error, exp){

                //console.log(exp);

                exp.forEach(function(d){

                    //console.log(typeof(d.Expt[0])); // before conversion
                    d.Expt = +d.Expt;
                    d.Run = +d.Run;
                    d.Speed = +d.Speed;

                });

                var facts = crossfilter(exp);

                var dimensionByExperiment = facts.dimension(function(d){ return "Expt " + d.Expt});
                var GroupBySpeed = dimensionByExperiment.group().reduce(reduceAdd, reduceRemove, reduceIntialize);

                function reduceAdd(p, v){
                    p.push(v.Speed); return p;
                }
                function reduceRemove(p, v){
                    p.splice(p.indexOf(v.Speed),1); return p;
                }
                function reduceIntialize(){
                    return [];
                }

                var boxPlot = dc.boxPlot("#boxPlot")
                        .width(1024)
                        .height(250)
                        .margins({top:40,bottom:60,right:80,left:60})
                        .colors("#4286f4")
                        .dimension(dimensionByExperiment, "Expt")
                        .group(GroupBySpeed)

                    dc.renderAll();


            });
        </script>

    </body>
</html>

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Tutorial #10 Dive into DC.JS a JavaScript Library - Box Plot | Ecency