Using dimensions with arrays in dc.js/crossfilter

Answer to my own question in:

http://stackoverflow.com/questions/41720431/using-dimensions-with-arrays-in-dc-js-crossfilter

Based on previous approaches, described in answers here:

http://stackoverflow.com/questions/17524627/is-there-a-way-to-tell-crossfilter-to-treat-elements-of-array-as-separate-record

This works well with row charts and pie charts in dc.js.

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

var cf = crossfilter(data);

// tell crossfilter that this dimension isArray=true
		var topicsDim = cf.dimension(function(d){ return d.topics;}, true);
		var topicsGroup = topicsDim.group();

var topicsArrayRowChart = dc.rowChart("#topics-array-rows")
    	    .renderLabel(true)
    	    .height(200)
            .width(250)
    	    .dimension(topicsDim)
    	    .group(topicsGroup)
    	    .cap(3)
    	    .ordering(function(d){return -d.value;})
    	    .xAxis().ticks(3);

// tell crossfilter that this dimension isArray=true
 		var mediumDim = cf.dimension(function(d){ return d.medium;}, true);
		var mediumGroup = mediumDim.group();

var mediumArrayPieChart = dc.pieChart("#medium-array-pie")
    	    .height(100)
    	    .width(100)
    	    .dimension(mediumDim)
    	    .group(mediumGroup);

// leave crossfilter isArray default (false)
		var statesDim = cf.dimension(function(d){ return d.state;});
		var stateGroup = statesDim.group();

var statesPieChart = dc.pieChart("#states-pie")
    	    .height(100)
    	    .width(100)
    	    .dimension(statesDim)
    	    .group(stateGroup);

// leave crossfilter isArray default (false)
		var datesDim = cf.dimension(function(d){ return d.date;});
		var datesGroup = datesDim.group();

var datesBarChart = dc.barChart("#dates-bars")
    	    .width(400)
    	    .height(200)
    	    .transitionDuration(800)
    	    .margins({top: 10, right: 50, bottom: 30, left: 40})
    	    .dimension(datesDim)
    	    .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