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.

This was created with blockbuilder.org - you can use blockbuilder to fork and edit this bl.ock interactively. Or you can edit your fork using gist.github.com, or even clone the gist as a git repository.

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.

forked from gordonwoodhull's block: dc.js example

<!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>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.0-alpha.6/crossfilter.js

https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.js