title: Updating dc.js data and reapplying original filters
body: <p>I'm trying to build a reproducible example of this question about how to <a href="https://stackoverflow.com/questions/23500546/replace-crossfilter-data-restore-dimensions-and-groups">replace a crossfilter data restoring dimensions and groups</a> - i.e. reapplying any filters created by the user before data is updated.  Here's my stab at implementing <a href="https://stackoverflow.com/a/32201351/1156245">the accepted answer</a>.  Here's a <a href="http://jsfiddle.net/geotheory/xpguxxhr/" rel="nofollow noreferrer">working jsfiddle</a>.</p>
  
  <p>The script refreshes after 3 seconds to switch from <code>data1</code> to <code>data2</code>.  If you apply a filter before then (e.g. click <code>Mr A</code>), the filter is 'remembered' when the graphs update as the right element is highlighted (others greyed out).  But the filter isn't applied across to other graphs.  You need to remove the filter and reapply for it to work (e.g. remove <code>2013</code> pie segment).</p>
  
  <p>Is there something wrong with my implementation, or the solution itself?</p>
  
  <p><a href="https://i.stack.imgur.com/L2hRG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L2hRG.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;dc.js - Example&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/&gt;
      &lt;script type="text/javascript" src="http://dc-js.github.io/dc.js/js/d3.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://dc-js.github.io/dc.js/js/crossfilter.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://dc-js.github.io/dc.js/js/dc.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="chart-ring-year"&gt;&lt;/div&gt;
      &lt;div id="chart-row-spenders"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
  
  var yearRingChart   = dc.pieChart("#chart-ring-year"),
      spenderRowChart = dc.rowChart("#chart-row-spenders");
  
  var data1 = [
      {Name: 'Mr A', Spent: 40, Year: 2011},
      {Name: 'Mr B', Spent: 10, Year: 2011},
      {Name: 'Mr C', Spent: 40, Year: 2011},
      {Name: 'Mr A', Spent: 70, Year: 2012},
      {Name: 'Mr B', Spent: 20, Year: 2012},
      {Name: 'Mr B', Spent: 50, Year: 2013},
      {Name: 'Mr C', Spent: 30, Year: 2013}
  ];
  
  var data2 = [
      {Name: 'Mr A', Spent: 10, Year: 2011},
      {Name: 'Mr B', Spent: 20, Year: 2011},
      {Name: 'Mr C', Spent: 50, Year: 2011},
      {Name: 'Mr A', Spent: 20, Year: 2012},
      {Name: 'Mr B', Spent: 40, Year: 2012},
      {Name: 'Mr B', Spent: 50, Year: 2013},
      {Name: 'Mr C', Spent: 50, Year: 2013}
  ];
  
  // data reset function (adapted)
  function resetData(ndx, dimensions) {
      dimensions.forEach(function(dim){dim.filter(null);});
      ndx.remove();
  }
  
  // set crossfilter with first dataset
  var ndx = crossfilter(data1),
      yearDim  = ndx.dimension(function(d) {return +d.Year;}),
      spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
      nameDim  = ndx.dimension(function(d) {return d.Name;}),
      spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
      spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
      spendHist    = spendDim.group().reduceCount();
  
  function render_plots(){
      yearRingChart
          .width(200).height(200)
          .dimension(yearDim)
          .group(spendPerYear)
          .innerRadius(50);
  
      spenderRowChart
          .width(250).height(200)
          .dimension(nameDim)
          .group(spendPerName)
          .elasticX(true);
  
      dc.renderAll();
  }
  
  render_plots();
  
  // REFRESH DATA AFTER 3 SECONDS
  setTimeout(function() { 
      console.log("data reset");
      resetData(ndx, [yearDim, spendDim, nameDim]); 
  
      ndx = crossfilter(data2),
          yearDim  = ndx.dimension(function(d) {return +d.Year;}),
          spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
          nameDim  = ndx.dimension(function(d) {return d.Name;}),
          spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
          spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
          x = spendPerName,
          spendHist    = spendDim.group().reduceCount();
  
      render_plots();
  }, 3000);
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>