Tutorial #8 Dive into DC.JS a JavaScript Library

What Will I Learn?

Develop a Bubble Chart using dc.js
Working with bubbleChart Class methods

Requirements

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

Difficulty

Intermediate

Tutorial Contents

What is a Bubble Chart
Create Working Environment for Bubble Chart
Start Developing Bubble Chart

What is Bubble Chart

A Bubble Chart is something like Scatter Plot but in Bubble Chart we use bubbles instead of data points as in Scatter Plot. And and an additional dimension of the data is visualize in the size of the bubbles. Bubble Chart can be used in every field for the understanding the relationships of data.

So, here today we are going to develop the bubble chart from our given data using dc.js.

Create Working Environment for Bubble Chart

If we talked form scratch, first write the basic HTML code, and then the code for div in which we are showing our bubble chart.

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

After writing the basics HTML code, write heading for our chart and the div tag and assign it the ID. Write this code in the body tag.

        <h1>Bubble Chart: Tip againt Payment</h1>
        <div id="bubbleChart"></div>

Then connect the dc.js library and the other two libraries crossfilter.js and d3.js. To do this write this code above in the head tag


 <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" />

Then take the json data upon which we want to develop a bubble Chart. Place this code in the body tag and below the div tag.


        <script type="text/javascript">


          var paymentsRecord = [
          {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
          {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
          {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
          {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
          {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
          {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
        ];


        </script>

Then pass this data to crossfile.js that we'll able to create dimension and group.

          var facts = crossfilter(paymentsRecord);

Then create the dimension, this depends on what data you want to visualize in the chart. Here we are going to create a chart Tip against Total payment. Then our dimension will be

          var bubbleDimension = facts.dimension(function(d){ return [d.total, d.tip]; });

Then group this data on the basis of category.

var bubbleGroup = bubbleDimension.group();

Up to here we have done with our data related task we created dimension and group this data, next we are going to use it in our bubbleChart class to develop our chart.

First create object of bubbleChart class from dc.js library. Also set the width and height of the chart by calling width([]) and height ([]) methods.

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

Then call the dimension and group method and pass the dimension and group respectively that we created from corssfilter.js.

          var bubbleChart = dc.bubbleChart("#bubbleChart")
                        .width(1024)
                        .height(250)
                        .dimension(bubbleDimension)
                        .group(bubbleGroup)

Set label for x-axis and y-axis, append this code o your above code.

                        .yAxisLabel("Y axis")
                        .xAxisLabel("X axis")

Now, set the x-axis and y-axis range.

                        .y(d3.scale.linear().domain([0,200]))
                        .x(d3.scale.linear().domain([0,300]))

Till now we have set the ordinates for our graph. If we seethe output for our code, render the graph

          dc.renderAll(); render the chart , use it at the end of the code.

Now we'll move to develop bubble in our chart, to do this bubbleChart class give us three methods

.radiusValueAccessor([])

The method used to set/get the radius value accessor, if we use this method it take the value accessor method as an argument and returns the value for each bubble in the chart. Here If we use this method for our chart.

.radiusValueAccessor(function(d){ return d.value; })

Output:

Here you can see our all bubble are on the zero scale on the graph, bubble are small in size difficult to see, to set the radius of the bubble use this method

.r(d3.scale.linear().domain([1,6])) // set the radius from 1-6 min and max respectively.

Now again render our graph to see the output

Now we have to position the bubble in our graph for this we'll use our remaining two method out of three.

.keyAccessor([])

The method used get/set key aceessor method, if we use this method in our graph, it take the value accessor method and retrieve the key value form the crossfilter. It will help us to point the bubbles on x-axis. As you know we create dimension for tip and total payment for our data, the crossfilter stored that data in an array, the f 0 index for total payment and 1 index for tips. So we use the 0 index for positioning the bubble at x-axis.

.keyAccessor(function(d){ return d.key[0]; })

.valueAccessor([])

Once we set the x-axis position, now we'll set the y axis positioning with .keyAccessor([]) method. Same working as the above method but for bubble positioning at y-axis.

.valueAccessor(function(d){ return d.key[1]; })

Output:

Here, we've positioned bubbles in our chart, but you can the size of the bubble are really big, so we'll use this method .maxBubbleRelativeSize([]) - the method get/set the maximum relative size of a bubble to the length of x axis.

.maxBubbleRelativeSize(0.05)

Output:

Now our bubble are well positioned and good in size logically. But the bubble are half cut, use this method .clipPadding([]) - Get or set the padding in pixels for the clip path.

.clipPadding(60)

We set here 60 pixels you can set at whatever value that fit for bubbles at your graph.

output:

Now you can clearly see the bubbles.

Here you can also change the color for bubble use the d3.js category, Here We use the category10 you can use whatever that suits your graph. Add this code to your above code

                        .colorAccessor(function(d){ return d.value; })
                        .colors(d3.scale.category10())

Demo

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Tutorial #8 Dive into DC.JS a JavaScript Library - Bubble Chart

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

What is Bubble Chart

Create Working Environment for Bubble Chart

.radiusValueAccessor([])

.keyAccessor([])

.valueAccessor([])

Curriculum