Getting Started with dc.js

For reference full working example here: http://jsbin.com/anuted/1/edit

Reference:

d3.js introduction: http://vimeo.com/35005701

TODO: need a better example for crossfilter crossfilter example: http://square.github.com/crossfilter/

Creating Dimensions:

Grab the data, this takes the raw json string from a div and parses it into an array of objects

var json = JSON.parse($('#data').text());

Create the initial crossfilter object

var data = crossfilter(json);

Define a data dimension, here we are creating a dimension on the id attribute, the dimension method will iterate through every object in the json array and use the id attribute to sort the data.

var idDimension = data.dimension(function(d){
     return d.id
  });

Rendering the charts:

This is where the association between dimensions and svg happens. The critical sections are .dimension and .group

.group() call .all() on the object passed to it. In this case valueDimension.all() returns a 2 element array since we only have 2 ids.

TODO: what handles the callbacks for interaction with the chart?

var pieChartValue = dc.pieChart("#pie-chart-value")
        .width(250)
        .height(250)
        .radius(100)
        .innerRadius(40)
        .dimension(valueDimension)
        .group(valueGroup)
        .title(function(d) {
            return d.data.key + ": " + d.data.value;
        })
        .renderTitle(true);

The last method renders all registered charts.

dc.renderAll();

Changing the data we can see that crossfilter is aggregating the count of id:2 and adjusts the pie chart appropriately:

[{"color": "red", "id": 1, "value": 2}, {"color": "green", "id": 2, "value": 1},{"color": "red", "id": 3, "value": 2}, {"color": "green", "id": 2, "value": 1}]

Update here: http://jsbin.com/anuted/2/edit