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="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<script src="https://rawgit.com/crossfilter/crossfilter/1.4.0-alpha.06/crossfilter.min.js"></script>
<script src="https://rawgit.com/crossfilter/reductio/0.6.3/reductio.min.js"></script>
<script src="https://rawgit.com/dc-js/dc.js/2.0.0-beta.26/dc.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/dc-js/dc.js/2.0.0-beta.26/dc.min.css">
<div id="rowchart"></div>
<div id="piechart1"></div>
<div id="piechart2"></div>
<div id="barchart"></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();
var states      = cf.dimension(function(d){ return d.state; });
var statesGroup = states.group()
var itemsDim    = cf.dimension(function(d){ return d.items; }, true);
var itemsGroup  = itemsDim.group();

var addValueGroup = function(reducer, key) {
	reducer
  	.value(key)
    .filter(function(d) { return d.items.indexOf(key) !== -1; })
    .count(true)
}

// Reductio nest to break down states by item
var reducer = reductio().count(true)
addValueGroup(reducer, "orange")
addValueGroup(reducer, "meat")
addValueGroup(reducer, "bread")
addValueGroup(reducer, "apple")

reducer(statesGroup);

//graphs:
var row = dc.rowChart("#rowchart");
row
    .renderLabel(true)
    .height(200)
    .dimension(itemsDim)
    .group(itemsGroup)
    .ordering(function(d){return -d.value;})
    .xAxis().ticks(3);

var pie1 = dc.pieChart("#piechart1");
pie1
  .height(75)
  .width(75)
  .dimension(dates)
  .group(datesGroup);

var pie2 = dc.pieChart("#piechart2");
pie2
  .height(75)
  .width(75)
  .dimension(states)
  .group(statesGroup)
  .valueAccessor(function(d) { return d.value.count; });

var bar = dc.barChart("#barchart");
bar.width(500).height(200)
   .dimension(states)
   .group(statesGroup, 'orange', sel_stack('orange'))
   .stack(statesGroup, 'meat', sel_stack('meat'))
   .stack(statesGroup, 'bread', sel_stack('bread'))
   .stack(statesGroup, 'apple', sel_stack('apple'))
  ...