Skip to content

Getting Started with dc.js

jschoch edited this page Aug 10, 2012 · 7 revisions

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

Reference:

d3.js tutorial: crossfilter example:

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

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

Rendering the charts:

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);

dc.renderAll();

Clone this wiki locally