composite chart is a special type of chart provided by dc.js. it provides an option to render multiple charts in the same coordinate grid. composite chart enables advanced chart visualization options with a minimum line of code.

composite chart methods

before moving on to draw a composite chart, we need to understand the dc.compositechart class and its methods. the dc.compositechart uses mixins to get the basic functionality of drawing a chart. the mixins used by the dc.compositechart are as follows −

dc.basemixin
dc.marginmixin
dc.colormixin
dc.coordinategridmixin

the complete class diagram of the dc.barchart is as follows −

the dc.compositechart gets all the methods of the above-specified mixins. it has its own method to draw the composite chart, which is explained below −

compose( [subchartarray])

set the collection of charts to be rendered in the same coordinate grid chart.

chart.compose([
   dc.linechart(chart)
   dc.barchart(chart)
]);

children()

gets all the charts composed in the same coordinate grid.

childoptions( [childoptions])

gets or sets the chart options for all the child charts composed in the same coordinate grid.

sharetitle( [sharetitle])

gets or sets the shared title of the chart. if set, it will be shared with all the children charts composed in the same coordinate grid.

sharecolors( [sharecolors])

similar to the sharetitle() function, except it shares the colors instead of the title.

righty( [yscale])

gets or sets the y-scale for the right axis of the composite chart.

rightyaxis( [rightyaxis])

gets or sets the right y-axis of the composite chart.

rightyaxislabel( rightyaxislabel[??])

gets or sets the right y-axis label.

alignyaxes( [alignyaxes])

gets or sets the alignment between the left and right y-axis.

userightaxisgridlines( [userightaxisgridlines])

gets or sets whether to draw gridlines from the right y-axis of the composite chart. the default behavior is to draw from the left y-axis.

draw a composite chart

let us draw a composite chart using dc.js. to do this, we should follow the steps given below −

step 1: define a variable

let us define a chart variable as shown below −

var chart = dc.compositechart('#compoiste');

here, the dc.compositechart function is mapped with a container having composite as its id.

step 2: read the data

read data from the people.csv file −

d3.csv("data/people.csv", function(errors, people) {
    
}

if data is not present, then it returns an error. we will use the same people.csv file. the sample data file is as follows −

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 3: map the data

now, map the data as shown below −

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((date.now() - new date(data.dob)) / (31557600000)),
      male: data.gender == 'male' ? 1 : 0,
      female: data.gender == 'male' ? 0 : 1
   };
}));

here, we assigned the age from the crossfilter data. the ~~ is a double not bitwise operator. it is used as a faster substitute.

now, apply the dimension age and group the gender data using the coding given below −

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reducesum(dc.pluck('male')),
grp2 = dim.group().reducesum(dc.pluck('female'));

step 4: generate a chart

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

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yaxislabel("count")
   .xaxislabel("age")
   .legend(dc.legend().x(80).y(20).itemheight(13).gap(5))
   .renderhorizontalgridlines(true)
   .compose ([
      dc.linechart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "male")
         .dashstyle([2,2]),
      dc.linechart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "female")
         .dashstyle([5,5])
   ])
   
.brushon(false)
.render();

here,

chart width is 768 and height is 480.
the d3.scale.linear function is used to construct a new linear scale with the specified domain range [15, 70].
we assign a x-axis label as age and y-axis label as count.
next, render horizontal grid lines as true.
compose the line chart colors value – red for male gender and blue for female.
finally, we set the brushon value to false and render the chart.

step 5: working example

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

<html>
   <head>
      <title>dc composite chart sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
    
   <body>
      <div>
         <div id = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositechart("#composite");

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

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((date.now() - new date(data.dob)) / (31557600000)),
                  male: data.gender == 'male' ? 1 : 0,
                  female: data.gender == 'male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reducesum(dc.pluck('male')),
            grp2 = dim.group().reducesum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yaxislabel("count")
               .xaxislabel("age")
               .legend(dc.legend().x(80).y(20).itemheight(13).gap(5))
               .renderhorizontalgridlines(true)
               .compose ([
                  dc.linechart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "male")
                  .dashstyle([2,2]),
                  dc.linechart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "female")
                     .dashstyle([5,5])
               ])
               .brushon(false)
               .render();
         });
      </script>
   </body>
</html>

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

Previous Lesson

Next Lesson