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.