title: Why does crossfilter.js not filter other view after brushing?
body: <p>I am brushing a histogram using <code>d3.js</code>, and am using <code>crossfilter.js</code> for filtering the views:</p>
  
  <pre><code>var chart = scatterPlot()
      .width(350)
      .height(350)
      .x(function (d) { return d.key[0] })
      .y(function (d) { return d.key[1] });
  
  d3.csv("data.csv", function (data) {// data in form of x,y,z,x1,y1
  
          var csData = crossfilter(data);
  
          // scatterplot data
          csData.dimScatter = csData.dimension(function (d) {
              return [parseFloat(d.x1), parseFloat(d.y1)];
          });
  
          csData.byScatter = csData.dimScatter.group();
  
          csData.dimHistogram = csData.dimension(function (d) {
              return Math.floor(parseFloat(d.z) * 10) / 10;
          });
  
          csData.byHistogram = csData.dimHistogram.group();
  
          histogram1.onBrushed(function (selected) {
              csData.dimHistogram.filter(selected);
              update();
          });
  
          function update() {       
              d3.select("#scatterplot")
                  .datum(csData.byScatter.all())
                  .call(chart);
  
              d3.select("#histogram")
                  .datum(csData.byHistogram.all())
                  .call(histogram1);
          }    
          update();
      });
  </code></pre>
  
  <p>Even though the histogram gets brushed(<code>selected</code> shows the data that I brush), the data does not get filtered. Why is that occurring ?
  <a href="https://i.stack.imgur.com/3i1sp.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3i1sp.gif" alt="Brush"></a></p>
  
  <p>Edit 1 - added <a href="https://jsfiddle.net/kenkaneki/yquuhs3z/3/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Edit 2 - code for <code>chart</code>:</p>
  
  <pre><code>function scatterPlot() {
  
          var margin = {top: 20, right: 20, bottom: 30, left: 40},
              width = 350,
              height = 350,
              innerWidth = width - margin.left - margin.right,
              innerHeight = height - margin.top - margin.bottom,
              xValue = function(d) { return d[0]; },
              yValue = function(d) { return d[1]; },
              xScale = d3.scaleLinear(),
              yScale = d3.scaleLinear();
  
          function chart(selection) {
              selection.each(function (data) {
  
                  // Select the svg element, if it exists.
                  var svg = d3.select(this).selectAll("svg").data([data]);
  
                  // Otherwise, create the skeletal chart.
                  var svgEnter = svg.enter().append("svg");
                  var gEnter = svgEnter.append("g");
                  gEnter.append("g").attr("class", "x axis");
                  gEnter.append("g").attr("class", "y axis");
  
                  // Update the outer dimensions.
                  svg.merge(svgEnter).attr("width", width)
                      .attr("height", height);
  
                  // Update the inner dimensions.
                  var g = svg.merge(svgEnter).select("g")
                      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
                  xScale.rangeRound([0, innerWidth])
                  //d3.max(data, function(d) { return d.x1; })
                      .domain([-1.5, 1.5]);
                  yScale.rangeRound([innerHeight, 0])
                      .domain([-1.5, 1.5]);
  
                  g.select(".x.axis")
                      .attr("transform", "translate(0," + innerHeight + ")")
                      .call(d3.axisBottom(xScale));
  
                  g.select(".y.axis")
                      .call(d3.axisLeft(yScale).ticks(10))
                      .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 6)
                      .attr("dy", "0.71em")
                      .attr("text-anchor", "end")
                      .text("Frequency");
  
                  var points = g.selectAll(".point")
                      .data(function (d) { return d; });
  
                  points.enter().append("circle")
                      .attr("class", "point")
                      .merge(points)
                      .attr("cx", X)
                      .attr("cy", Y)
                      .attr("r", 2.5);
  
                  points.exit().remove();
              });
  
          }
  
          // The x-accessor for the path generator; xScale ∘ xValue.
          function X(d) {
              return xScale(xValue(d));
          }
  
          // The y-accessor for the path generator; yScale ∘ yValue.
          function Y(d) {
              return yScale(yValue(d));
          }
  
          chart.margin = function(_) {
              if (!arguments.length) return margin;
              margin = _;
              return chart;
          };
  
          chart.width = function(_) {
              if (!arguments.length) return width;
              width = _;
              return chart;
          };
  
          chart.height = function(_) {
              if (!arguments.length) return height;
              height = _;
              return chart;
          };
  
          chart.x = function(_) {
              if (!arguments.length) return xValue;
              xValue = _;
              return chart;
          };
  
          chart.y = function(_) {
              if (!arguments.length) return yValue;
              yValue = _;
              return chart;
          };
  
          return chart;
      }
  </code></pre>
  
  <p>Edit 3: <a href="https://jsfiddle.net/kenkaneki/yquuhs3z/9/" rel="nofollow noreferrer">Running Fiddle</a></p>