<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();

    });

});