Stacked graphs using data with arrays
Trying to find a way how to expand array of keys into separate records, one per element of array. And then create stacked graphs.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.css">
<div id="rowchart"></div>
<div id="piechart1"></div>
<div id="piechart2"></div>
<div id="piechart3"></div>
<div id="barchart"></div>
<div id="barchart2"></div>
<div id="barchart3"></div>
JavaScript
var data = [
{"key":"KEY-1","state":"MA", "status":["A","R","C"], "items":["orange", "meat", "bread"], "date":"Y16"},
{"key":"KEY-2","state":"MA", "status":["A","O"], "items":["apple", "bread"], "date":"Y15"},
{"key":"KEY-3","state":"TX", "status":["O"], "items":["bread"], "date":"Y16"},
{"key":"KEY-4","state":"TN", "status":["A","R"], "items":["apple", "bread"], "date":"Y16"},
{"key":"KEY-5","state":"TN", "status":["A","O"], "items":["apple", "orange"], "date":"Y15"},
{"key":"KEY-6","state":"TN", "status":[], "items": [], "date":"Y14"}
];
var cf = crossfilter(data);
//dimensions and groups:
var dates = cf.dimension(function(d){ return d.date; });
var datesGroup = dates.group();//.reduceCount(function(d){ return d.key; });
var states = cf.dimension(function(d){ return d.state; });
var statesGroup = states.group();//.reduceCount(function(d){ return d.key; });
var itemsDim = cf.dimension(function(d){ return d.items; });
var itemsGroup = itemsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();
itemsGroup.all = myAllFunction;
var states_items_group_apple = states.group().reduce(reduceAdd_apple, reduceRemove_apple, reduceInitial_items);
var states_items_group_bread = states.group().reduce(reduceAdd_bread, reduceRemove_bread, reduceInitial_items);
var states_items_group_orange = states.group().reduce(reduceAdd_orange, reduceRemove_orange, reduceInitial_items);
var states_items_group_meat = states.group().reduce(reduceAdd_meat, reduceRemove_meat, reduceInitial_items);
var itemsGroup1 = itemsDim.groupAll().reduce(reduceAdd1, reduceRemove1, reduceInitial).value();
var itemsGroup2 = itemsDim.groupAll().reduce(reduceAdd2, reduceRemove2, reduceInitial).value();
var itemsGroup3 = itemsDim.groupAll().reduce(reduceAdd3, reduceRemove3, reduceInitial).value();
itemsGroup1.all = myAllFunction;
itemsGroup2.all = myAllFunction;
itemsGroup3.all = myAllFunction;
var status = cf.dimension(function(d){...