1

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.

Gordon
  • 19,811
  • 4
  • 36
  • 74
Steve Doson
  • 703
  • 4
  • 16
  • 34
  • 1
    It's hard to tell without a working example (e.g. a jsfiddle or block) but it looks like states are indicated with numbers in your data, but abbreviations in the map? – Gordon Aug 26 '17 at 14:34
  • @Gordon In the fiddle I cannot include the data sheets it seems. – Steve Doson Aug 26 '17 at 15:05
  • @Gordon what you said helped. Changing the numbers to abbreviations. Thanks! – Steve Doson Aug 26 '17 at 15:21
  • Great! For next time, here's the trick for putting data in your fiddle: https://stackoverflow.com/q/22890836/676195 – Gordon Aug 27 '17 at 17:32
  • @Gordon Could you please have a look at https://stackoverflow.com/questions/45912279/how-to-put-data-ranges-in-piecharts-using-dc-js ? – Steve Doson Aug 28 '17 at 05:36

0 Answers0