CODEWITHSUNDEEP
d3.jsgraphdc.jschoroplethgraph-coloring
Mike Arledge
Mike Arledge

Reputation: 89

Coloring DC.JS Choropleth Charts

Trying to color a DC.JS choropleth chart. The Default colorAccessor isn't working and I am at a loss for making things work. Any help would be tremendous. I feel like some custom reduce function is necessary but I am not too sure how or where.

http://codepen.io/MichaelArledge/pen/vLKZzE?editors=001

      chart.width(c_w)
                .height(c_h)
                .dimension(zip_code_dim)
                .group(zip_totals)
                .projection(projection)
                .colorAccessor(function(d){ console.log(d);  return d.value;  })
                .overlayGeoJson(statesJson.features ,"zip_area");

Upvotes: 3

Views: 983

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You are not defining the overlayGeoJson function from where to get the value

You defined like this:

overlayGeoJson(statesJson.features ,"zip_area");

Should have been

 .overlayGeoJson(statesJson.features ,"zip_area", 
function(d){ return d.properties.zip})

Now b'coz the above function returns zip codes so d.value will be undefined

.colorAccessor(function(d){ return d.value;  })

It should be

 .colorAccessor(function (d) { return colors(d); });

I have defined a linear scale for colors its value should be returned from colorAccessor function.

  var colors = d3.scale.linear().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]);

Full working code here

Hope this helps!

Upvotes: 3

Related Questions