D3 Examples - dc.js example

dc.js example

This is an example of a dc.js chart in a bl.ock - please fork this bl.ock when asking for help on Stack Overflow or the dc.js user group, or to demonstrate bugs when filing an issue on GitHub.

Notice that this bl.ock loads its data from an asset named morley.csv within the gist - that's one advantage of using bl.ocks instead of fiddles.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.0-alpha.6/crossfilter.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.js"></script>
  <style>
  </style>
</head>
​
<body>
  <div id="test"></div>
​
  <script>
    var data = [
        {"key":"KEY-1","state":"CA", "topics":["Technology", "Science", "Automotive"], "date":new Date("10/02/2012")},
        {"key":"KEY-2","state":"CA", "topics":["Health"], "date": new Date("10/05/2012")},
        {"key":"KEY-3","state":"OR", "topics":["Science"], "date":new Date("10/08/2012")},
        {"key":"KEY-4","state":"WA", "topics":["Automotive", "Science"], "date":new Date("10/09/2012")},
        {"key":"KEY-5","state":"WA", "topics":["Science"], "date":new Date("10/09/2012")},
        {"key":"KEY-5","state":"WA", "topics": ["Health"], "date":new Date("10/09/2012")}
        ];
​
        var cf = crossfilter(data);
​
        var topicsDim = cf.dimension(function(d){ return d.topics;}, true);
        var topicsGroup = topicsDim.group();
​
        var dates = cf.dimension(function(d){ return d.date;});
        var datesGroup = dates.group();
​
        var states = cf.dimension(function(d){ return d.state;});
        var stateGroup = states.group();
​
        var pieChart = dc.pieChart("#piechart")
        .height(75)
        .width(75)
        .dimension(states)
        .group(stateGroup);
​
        var barChart = dc.rowChart("#chart")
        .renderLabel(true)
        .height(200)
        .dimension(topicsDim)
        .group(topicsGroup)
        .cap(2)
        .ordering(function(d){return -d.value;})
        .xAxis().ticks(3);
​
        var chart2 = dc.barChart("#chart2")
        .width(500)
        .height(200)
        .transitionDuration(800)
        .margins({top: 10, right: 50, bottom: 30, left: 40})
        .dimension(dates)
        .group(datesGroup)  
        .x(d3.time.scale().domain([new Date(2012, 9, 1), new Date(2012, 9, 11)]))
        .xUnits(d3.time.days)
        .centerBar(true)
        .renderHorizontalGridLines(true)       
        .brushOn(true)
        .xAxis().tickFormat(d3.time.format('%b %d'));
    
        dc.renderAll();
  </script>
</body>
​
    