Dimensional charting – dc.js

Visualizing Crossfilter dimensions and groups is precisely the reason why dc.js was created. This handy JavaScript library was created by your humble author and is designed to allow you to visualize Crossfilter dimensional dataset easily and quickly.

Getting ready

Open your local copy of the following file as reference:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/appendix-a/dc.html

How to do it...

In this example we will create three charts:

• A line chart for visualizing total amount of transaction on time series
• A pie chart to visualize number of transactions by payment type
• A bar chart showing number of sales by purchase quantity

Here is what the code looks like:

<div id="area-chart"></div>
<div id="donut-chart"></div>
<div id="bar-chart"></div>
…
dc.lineChart("#area-chart")
                .width(500)
                .height(250)
                .dimension(hours...