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.2.2/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.min.js"></script>
<div id="rowchart"></div>
<div id="piechart1"></div>
<div id="piechart2"></div>
<div id="barchart"></div>
<div id="barchart2"></div>

CSS

.dc-chart {
  float: left;
}

.dc-chart rect.bar {
  stroke: none;
  fill: steelblue;
}

.dc-chart rect.bar:hover {
  fill-opacity: .5;
}

.dc-chart rect.stack1 {
  stroke: none;
  fill: red;
}

.dc-chart rect.stack2 {
  stroke: none;
  fill: green;
}

.dc-chart rect.deselected {
  stroke: none;
  fill: #ccc;
}

.dc-chart .sub .bar {
  stroke: none;
  fill: #ccc;
}

.dc-chart .pie-slice {
  /*fill: white;*/
  font-size: 12px;
  cursor: pointer;
}

.dc-chart .pie-slice:hover {
  fill-opacity: .8;
}

.dc-chart .selected path {
  stroke-width: 3;
  stroke: #ccc;
  fill-opacity: 1;
}

.dc-chart .deselected path {
  stroke: none;
  fill-opacity: .5;
  fill: #ccc;
}

.dc-chart .axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dc-chart .axis text {
  font: 10px sans-serif;
}

.dc-chart .grid-line line {
  fill: none;
  stroke: #ccc;
  opacity: .5;
  shape-rendering: crispEdges;
}

.dc-chart .brush rect.background {
  z-index: -999;
}

.dc-chart .brush rect.extent {
  fill: steelblue;
  fill-opacity: .125;
}

.dc-chart .brush .resize path {
  fill: #eee;
  stroke: #666;
}

.dc-chart path.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dc-chart circle.dot {
  fill: steelblue;
}

.dc-chart g.stack1 path.line {
  stroke: green;
}

.dc-chart g.stack1 circle.dot {
  fill: green;
}

.dc-chart g.stack2 path.line {
  stroke: red;
}

.dc-chart g.stack2 circle.dot {
  fill: red;
}

.dc-chart g.dc-tooltip path {
  fill: none;
  stroke: grey;
  stroke-opacity: .8;
}

.dc-chart path.area {
  fill: steelblue;
  fill-opacity: .3;
  stroke: none;
}

.dc-chart g.stack1 path.area {
  fill: green;
}

.dc-chart g.stack2 path.area {
  fill: red;
}

.dc-chart .node {
  font-size: 0.7em;
  cursor: pointer;
}

.dc-chart .node:hover {
  fill-opacity: .8;
}

.dc-chart .selected circle {
  stroke-width: 3;
  stroke: #ccc;
  fill-opacity: 1;
}

.dc-chart .deselected circle {
  stroke: none;
  fill-opacity: .5;
  fill: #ccc;
}

.dc-chart...

JavaScript

var data = [
    {"key":"KEY-1","state":"MA", "items":["orange", "meat", "bread"], "date":"Y16"},
    {"key":"KEY-2","state":"MA", "items":["apple", "bread"], "date":"Y15"},
    {"key":"KEY-3","state":"TX", "items":["bread"], "date":"Y16"},
    {"key":"KEY-4","state":"TN", "items":["apple", "bread"], "date":"Y16"},
    {"key":"KEY-5","state":"TN", "items":["apple", "orange"], "date":"Y15"},
    {"key":"KEY-6","state":"TN", "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 statesDim   = cf.dimension(function(d){ return d.state; });
var states_items_group_apple  = statesDim.group().reduce(reduceAdd_apple,  reduceRemove_apple,  reduceInitial_items);
var states_items_group_bread  = statesDim.group().reduce(reduceAdd_bread,  reduceRemove_bread,  reduceInitial_items);
var states_items_group_orange = statesDim.group().reduce(reduceAdd_orange, reduceRemove_orange, reduceInitial_items);
var states_items_group_meat   = statesDim.group().reduce(reduceAdd_meat,   reduceRemove_meat,   reduceInitial_items);
var items        = cf.dimension(function(d){ return d.items; })
var itemsGroup1  = items.groupAll().reduce(reduceAdd1, reduceRemove1, reduceInitial).value();
var itemsGroup2  = items.groupAll().reduce(reduceAdd2, reduceRemove2, reduceInitial).value();
var itemsGroup3  = items.groupAll().reduce(reduceAdd3, reduceRemove3, reduceInitial).value();
itemsGroup1.all  = myAllFunction;
itemsGroup2.all  = myAllFunction;
itemsGroup3.all  = myAllFunction;

//graphs:
var row =...