DC.js Tutorial on DC.js Data Count
Back to Course

data count is used to display the total number of records in the data set. it performs the following two types of count −

  • total-count − total number of records.

  • filter-count − number of records matched by the current filters.

data count methods

before moving on to use a data count, we should understand the dc.datacount class and its methods. the dc.datacount class uses a mixin to get the basic functionality of displaying a data count, which is −

  • dc.basemixin

the dc.datacount gets all the methods of this mixin and has its own method to show the data count as explained below −

formatnumber( [formatter])

this method is used to get or set a format for the filter count and the total count.

html( [options])

it is used get or set the html templates to show the number of selected items.

for example −

counter.html ({
   all: 'html template to use if all items are selected'
})

here, ‘all’ is used to select all the items using the %total-count. if we want to only use some of the items, then we can use some records using %filter-count option.

data count example

let us perform the data count in dc. to do this, we need to follow the steps given below −

step 1: add styles

let us add styles in the css using the coding given below −

.dc-chart { font-size: 12px; }

here, we have assigned styles for the chart.

step 2: create a variable

let us create a variable in dc as shown below −

var barchart = dc.barchart('#line'); 
var countchart = dc.datacount("#mystats");

here, we have assigned a barchart variable id in line, whereas the countchart id is mystats.

step 3: read the data

read the data from the people.csv file as shown below −

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

if the data is not present, then it returns an error. now, assign the data to a crossfilter.

here, we are using the people.csv file, which was used in our previous charting examples. it looks as shown below −

id,name,gender,dob,maritalstatus,creditcardtype
1,damaris,female,1973-02-18,false,visa-electron
2,barbe,female,1969-04-10,true,americanexpress
3,belia,female,1960-04-16,false,maestro
4,leoline,female,1995-01-19,true,bankcard
5,valentine,female,1992-04-16,false,
6,rosanne,female,1985-01-05,true,bankcard
7,shalna,female,1956-11-01,false,jcb
8,mordy,male,1990-03-27,true,china-unionpay

.........................................
........................................

step 4: set the dimension

you can set the dimension using the coding given below −

// age dimension
var agedimension = mycrossfilter.dimension(function(data) { 
   return ~~((date.now() - new date(data.dob)) / (31557600000)) 
});

after the dimension has been assigned, group the age using the coding given below −

var agegroup = agedimension.group().reducecount();

step 5: generate a chart

now, generate a bar chart using the coding given below −

barchart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yaxislabel("count")
   .xaxislabel("age")
   .elasticy(true)
   .elasticx(true)
   .dimension(agedimension)
   .group(agegroup);

here,

  • we have assigned the chart width as 400 and height as 200.
  • next, we have specified the domain range as [15,70].
  • we have set the x-axis label as age and y-axis label as count.
  • we have specified the elasticy and x function as true.

step 6: create and render the count chart

now, create and render the count chart using the coding below −

countchart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupall());

barchart.render();
countchart.render();

here, we have assigned the dimension to a crossfilter variable. finally, group all the records based on the age.

step 7: working example

the complete code is as follows. create a web page datacount.html and add the following changes to it.

<html>
   <head>
      <title>dc datacount sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css" />
   
      <style>
         .dc-chart { font-size: 12px; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterall();
                  dc.renderall();">reset all</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>
      </div>

      <script language = "javascript">
         var barchart = dc.barchart('#line'); // , 'mychartgroup');
         var countchart = dc.datacount("#mystats");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            // age dimension
            var agedimension = mycrossfilter.dimension(function(data) { 
               return ~~((date.now() - new date(data.dob)) / (31557600000)) 
            });
            var agegroup = agedimension.group().reducecount();

            barchart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yaxislabel("count")
               .xaxislabel("age")
               .elasticy(true)
               .elasticx(true)
               .dimension(agedimension)
               .group(agegroup);

            countchart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupall());

            barchart.render();
            countchart.render();
         });
      </script>
   </body>
</html>

now, request the browser and we will see the following response.

data count initial page is shown below.

after selecting a particular age, it shows the counts as shown in the screenshot below.

data count
Previous Lesson