D3 Data Loading For A Choropleth Graph or Heat Map

Question

I am trying to use this as an example of US Choropleth graph (AKA Heat Map) for my own csv data. I copied the original code, and only changed the data source, then it is not working. So I figure that my data loading is wrong. But I can not figure out how to fix it. Could you help? Any help is appreciated.

Please see my code below or use this JSFiddle link. Well, I don't know how to load my csv data in JSFiddle, so it is not supposed to work there anyway. I will share my csv file below.

Edit: One leeway I can think of is to add the data in JavaScript, which is not efficient, but works. I look into the original data format, and mimic it. I attach this "solution" at the bottom shown as Code 2.

Code:

CSV file:

State,Net,In,Out
"""AK""",12215,53952,41737
"""AL""",16443,35063,18620
"""AR""",62902,75160,12258
"""AZ""",13931,77911,63980
"""CA""",94043,98042,3999
"""CO""",59769,93780,34011
"""CT""",-14958,24957,39915
"""DC""",29903,86390,56487
"""DE""",-65779,16257,82036
"""FL""",-51446,34313,85759
"""GA""",29685,37768,8083
"""IA""",-42416,56750,99166
"""ID""",-32028,41536,73564
"""IL""",-86579,8818,95397
"""IN""",-38841,9576,48417
"""KS""",-20601,36955,57556
"""KY""",-1593,37728,39321
"""LS""",-2574,34066,36640
"""MA""",-47842,34838,82680
"""MD""",-46721,9290,56011
"""ME""",-65431,21563,86994
"""MI""",-6542,53094,59636
"""MN""",-6034,76869,82903
"""MO""",-73558,20641,94199
"""MS""",24958,87012,62054
"""MT""",28657,75139,46482
"""NC""",56536,79399,22863
"""ND""",27423,61184,33761
"""NE""",-32070,22564,54634
"""NH""",-60000,21133,81133
"""NJ""",-45478,45954,91432
"""NM""",54333,78167,23834
"""NV""",26792,55773,28981
"""NY""",-18735,35722,54457
"""OH""",-76722,10843,87565
"""OK""",23052,65474,42422
"""OR""",-31368,67948,99316
"""PA""",8303,70657,62354
"""RI""",4516,26086,21570
"""SC""",-57549,36354,93903
"""SD""",11788,46551,34763
"""TN""",38178,88302,50124
"""TX""",-8142,47607,55749
"""UT""",-59301,20661,79962
"""VA""",-44967,27957,72924
"""VT""",95214,98784,3570
"""WA""",32652,33543,891
"""WI""",10484,23835,13351
"""WV""",12462,31829,19367
"""WY""",-20751,49812,70563
"""HI""",-54981,7388,62369

Code 2:

Andrew Reid · Accepted Answer

I'm not sure that you can use d3.json in the manner you are. I haven't seen it before at least. Also, your forEach code won't give you the result you are looking for. Your code as is should produce an error like this:

SyntaxError: missing ; before statement[Learn More]  map.html:71:28

When you are coloring the paths you need to have a property that has the state abbreviation (which holds an object of properties such as color). You need to make a dictionary. You could use:

var sampleData ={};     
d3.csv("Test.csv", function(data){
  data.forEach(function(d) {
    sampleData[d.State] = { 
      Net : +d.Net, 
      In : +d.In, 
      Out : +d.Out, 
      color : d3.interpolate("#ffffcc", "#800026")(d.Net/100) 
    };
  });
});

Loggin sampleData will give you something like:

Object { AK: Object, AL: Object, AR: Object, AZ: Object, CA: Object, CO: Object, CT: Object, DC: Object, DE: Object, FL: Object, 41 more… }

But, sampleData will only be defined in the callback function of d3.json - as d3.json is asynchronous. Therefore you'll need to call the drawing function within it.

So your code should look like:

var sampleData ={};     
d3.csv("Test.csv", function(data){
  data.forEach(function(d) {
    sampleData[d.State] = { 
      Net : +d.Net, 
      In : +d.In, 
      Out : +d.Out, 
      color : d3.interpolate("#ffffcc", "#800026")(d.Net/100) 
    };
  });
  uStates.draw("#statesvg", sampleData, tooltipHtml);
});

This gives me this:

The data is pairing properly (you can see the values in the mouseover). However, while not in your question, your colors are not done properly, they are all #ffffff or #000000. Try using a scale:

var sampleData ={};     
d3.csv("Test.csv", function(data){
  var color = d3.scale.linear()
    .range(["steelblue","orange"])
    .domain([d3.min(data, function(d) { return d.Net/100; }), d3.max(data, function(d) { return d.Net/100; }) ])
  data.forEach(function(d) {
    sampleData[d.State] = { 
      Net : +d.Net, 
      In : +d.In, 
      Out : +d.Out, 
      color : color(d.Net/100);
    };
  });
});

Which gives me:

Here is a demonstration of your code in action with the above tweaks. Oh, and I also removed the quotations from the csv file, no need to include them.

D3 Data Loading For A Choropleth Graph or Heat Map

Answers (1)

Related Questions