Geo choropleth map and pie chart crossfiltering using dc.js

问题

With the code I want to be able to click on any state and the pie chart should depict the number of males and females in that state.

gender.csv is of the following pattern

gender,age,state
Male,9,1
Male,10,1
Male,18,2
Male,20,0
Male,22,1
Male,30,1
Male,40,1
Male,45,2
Male,50,2
Male,55,2
Male,70,0
Male,80,0
Male,90,0
Male,100,0
Male,101,0
Female,11,0
Female,15,0
Female,20,0

us-states.json is of the following pattern

{"type":"FeatureCollection","features":[ {"type":"Feature","id":"01","properties":{"name":"AL"},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-85.004212,32.322956],[-84.889196,32.262709],[-85.058981,32.13674],[-85.053504,32.01077],[-85.141136,31.840985],[-85.042551,31.539753],[-85.113751,31.27686],[-85.004212,31.003013],[-85.497137,30.997536],[-87.600282,30.997536],[-87.633143,30.86609],[-87.408589,30.674397],[-87.446927,30.510088],[-87.37025,30.427934],[-87.518128,30.280057],[-87.655051,30.247195],[-87.90699,30.411504],[-87.934375,30.657966],[-88.011052,30.685351],[-88.10416,30.499135],[-88.137022,30.318396],[-88.394438,30.367688],[-88.471115,31.895754],[-88.241084,33.796253],[-88.098683,34.891641],[-88.202745,34.995703],[-87.359296,35.00118]]]}},

code

d3.csv("data/gender.csv", function (data) {
            d3.json("data/us-states.json", function (json){


                var ndx = crossfilter(data);

                var stateDim = ndx.dimension(function (d) { return d.state; });
                var genderDim = ndx.dimension(function(d) { return d.gender; });
                var ageDim = ndx.dimension(function(d) { return d.age; });

                var state = stateDim.group();
                var gender = genderDim.group(); 
                var age = ageDim.group();

                var pie = dc.pieChart('#pie');
                var usmap = dc.geoChoroplethChart("#map");

                //create pie to show gender
                pie
                    .width(180)
                    .height(180)
                    .radius(80)
                    .dimension(genderDim)
                    .group(gender)
                    .renderLabel(true)
                    .innerRadius(10)
                    .transitionDuration(500)
                    .colorAccessor(function (d, i) { return d.value; });

                //display US map                    
                usmap
                    .width(900)
                    .height(500)
                    .dimension(stateDim)
                    .group(state)
                    .colors(["rgb(20,202,255)","rgb(144,211,035)"])
                    .overlayGeoJson(json.features, "name", function (d) { return d.properties.name; })      


                // at the end this needs to be called to actually go through and generate all the graphs on the page.
                dc.renderAll();
            }); 
        });

When I am clicking on any state, the pie chart is showing empty. Also the tooltips on the map are showing the state initials and undefined, for example: AL: undefined

Where am I going wrong?

Any help would be greatly appreciated. Thanks.

来源：https://stackoverflow.com/questions/45896119/geo-choropleth-map-and-pie-chart-crossfiltering-using-dc-js

标签

dc.js

crossfilter