dc.js is quite a nice library which allows you to filter of multiple graphs intuitively.
Surprisingly it is not too difficult to develop on. If you have an understanding of .dimensions and .group(), you’re basically ready to go and start creating beautiful interactive dashboards. Below I have a simple example which I will quickly describe, particularly the parts of the library which I really like.
Exploring the Code
.dimension allows you to easily define how you would like the “cut” the data. For the bar graph for example, I decided to cut it by age, split into groups of 5 years. This was easily achieved using: var age_dim = ndx.dimension(function(d) { return Math.round(d.age/5)*5 })
.group allows you to specify how the groupings might be done. You may sum up the values or simply count the observations. Here we have just counted the observations by using age_dim.group().
Plotting both age and gender graphs simply meant specifying the type of graph (barChart or pieChart) and adding the properties. This was all then rendered using dc.renderAll(). Although not shown here you can attach events allowing dynamic tables with the data to be displayed (or any other useful information) which can be helpful for people seeking to have a visual way to filter their data.