DC.js - barChart not filtered on click of geoChoroplethChart

Question

I have a choropleth map of counties, and a bar chart showing population of each county on the map. When I click on the bar chart the map is filtered and redrawn to show the selected bar, but when I click on the a county in the choropleth map the bar chart is not filtered to show the population data. I don't understand why it would be filtering one way but not the other. Any help is appreciated!

<div id="iowa-map">
    <strong>Population by counties (color: total population)</strong>
    <a class="reset" href="javascript:iowaMap.filterAll();dc.redrawAll();" style="display: none; ">reset</a>
    <span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
    <div class="clearfix"></div>
</div>

<div id="population-chart">
    <strong>Population by county</strong>
    <a class="reset" href="javascript:populationChart.filterAll();dc.redrawAll();" style="display: none; ">reset</a>
    <span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
    <div class="clearfix"></div>
</div>

<div class="clearfix"></div>

<div>
    <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
</div>

var iowaMap = dc.geoChoroplethChart("#iowa-map");
var populationChart = dc.barChart("#population-chart");

d3.csv("iowaCountiesPop.csv", function (data) {

      data.forEach(function (d) {
        d.county = d.county;
        d.popByCounty = +d.e2015; 
      });

      var data = crossfilter(data);

      var counties = data.dimension(function (d) {
        return d.county;
      });

      var counties2 = data.dimension(function (d) {
        return d.county;
      });

      var popByCounty = counties.group().reduceSum(function (d) {
        return d.popByCounty;
      });


    d3.json("IowaCounties.json", function (countiesJson) {
        iowaMap.width(990)
                .height(500)
                .dimension(counties)
                .group(popByCounty)
                .projection(d3.geo.mercator()
                    .translate([495, 250])
                    .rotate([93 + 20 / 60, -41 - 60 / 60])
                    .scale(7900))
                .colors(d3.scale.quantile().range(colorScheme[quantiles]))
                .colorDomain([0, 430640])
                .overlayGeoJson(countiesJson.features, "NAME", function (d) {
                    return d.properties.NAME;
                })
                .title(function (d) {
                    return d.key + " County \nTotal Population: " + numberFormat(d.value);
                })
                .on('renderlet', function(map) {
                    map.selectAll("path").on("click", function(d) {
                    //console.log("click!", d)
                     map.filter(d.properties.NAME)
                        .redrawGroup();
                    })
                });


         populationChart.width(width)
            .height(height)
            .dimension(counties2)
            .group(popByCounty)
            .x(d3.scale.ordinal().domain(counties))
            .xUnits(dc.units.ordinal)
            .margins({top: 0, right: 0, bottom: 70, left: 70})
            .yAxisLabel(["Population Values"])//,[12]) 
            .xAxisLabel("County Names")
            .barPadding(0.1)
            .outerPadding(0.05)
            .elasticY(false)
            //.turnOnControls(true)
            .on('renderlet', function(chart) {
                chart.selectAll('rect').on("click", function(d) {
                    //console.log("click!", d)
                    chart.filter(d.data.key)
                        .redrawGroup();
                })
                chart.selectAll("g.x text")
                    .style("text-anchor", "end")    
                    .attr("dx","-8")
                    .attr("dy", "5")        
                    .attr("transform", "rotate(-50)");
            });

        dc.renderAll();

    }); 

});

I realize this is is almost a complete example, but if you could provide a fiddle of it ([including the data](http://stackoverflow.com/a/22896088/676195)), or another running example, it will be much easier for us to diagnose. — Gordon, Jul 20 '16 at 20:02
Well here is my attempt at putting it in jsfiddle - https://jsfiddle.net/bahanson/xo5dw3m6/ but it's not actually working, so I doubt it will actually be helpful. — bailey, Jul 21 '16 at 14:09
ftfy: https://jsfiddle.net/gordonwoodhull/28qsa0jr/4/ - just the usual version mismatches, and your data was actually tab-separated not comma separated. Of course, I could probably have stared very hard at your code and figured this out, since it's probably The Most Frequently Asked question, but it did help to use the fiddle, thanks! — Gordon, Jul 21 '16 at 21:40

score 1 · Accepted Answer · answered Jul 21 '16 at 21:47

So what is the the Most Frequently Asked Question Ever for dc.js?

Why is my chart not filtering?

And what is the most frequent answer?

Your charts are on the same dimension, or more specifically, your second chart's group is observing the same dimension that the first chart is filtering. Which means that it will not see the changes, because groups do not observe their own dimensions.

It looks like you started to go in this direction, but only duplicated the dimension. Both charts are observing the same group, and since that group is produced from the dimension for the map, it will not observe filtering on the map.

iowaMap
   .dimension(counties)
   .group(popByCounty)

populationChart
   .dimension(counties2)
   .group(popByCounty)

Instead:

function pop_by_county(dim) {
  return dim.group().reduceSum(function(d) {
    return d.popByCounty;
  });
}

var popByCounty = pop_by_county(counties),
  popByCounty2 = pop_by_county(counties2);

populationChart
  .dimension(counties2)
  .group(popByCounty2)

https://jsfiddle.net/gordonwoodhull/28qsa0jr/7/

DC.js - barChart not filtered on click of geoChoroplethChart

1 Answers1