Missing a step for d3 connecting data in choropleth map

Question

I'm trying to connect my two json files to display information on my choropleth map. I have the map rendering, but I'm stuck when it comes to connecting my second json file to the map file. Both files include an id for all items, but the id isn't located in before the object, it's inside, so I'm not sure how to grab it.

Here's what I currently have:

var data; // loaded asynchronously
var width = 600;
var height = 600;

var projection = d3.geo.albers()
                 //.center([-84.36322, 32.397649]);
               .translate([-1000,-200])
               .scale([6000]);

var path = d3.geo.path()
         .projection(projection);

var svg = d3.select("#chart")
.append("svg:svg");

var counties = svg.append("svg:g")
.attr("id", "counties")
.attr("class", "Blues");


d3.json("data/myData/simpleGA.json", function(json) {
 counties.selectAll("path")
  .data(json.features)
.enter().append("svg:path")
  .attr("class", data ? quantize : null)
  .attr("d", path);
});

d3.json("data/myData/lotteryMapNum.json", function(json) {

data = json;

counties.selectAll("path")
  .attr("class", quantize);
 });

 function quantize(d) {
  return "q" + Math.min(8, ~~(data[d.id].hopeDollars * 9 / 12)) + "-9";
}

simpleGA.json

 {
  "type": "FeatureCollection",

  "features": [
    { "type": "Feature", "id": 0, "properties": { "NAMELSAD10": "Lanier County"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.04292, 30.947296 ], [ -83.05332, 30.94753 ],] ] } }
 ]
 }

lotteryMapNum.json

[
 {"COUNTY":"Lanier",
  "hopeDollars":12921240,
  "id":"0"}
]

New Code for tooltips:

var newDict = {};


d3.json("data/myData/lotteryMapNum.json", function(data) {
data.forEach(function(d) { newDict[d.id] = +d.hopeDollars;})
data.forEach(function(d) { newDict[d.COUNTY] = +d.COUNTY;});

d3.json("data/myData/simpleGA.json", function(json) {
    counties.selectAll("path")
    .data(json.features)
    .enter().append("svg:path")
    .attr("class", function(d) { return quantize(newDict[d.id]);})
    .attr("d", path)
    .call(d3.helper.tooltip()
        //.attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
        .text(function(d){ return 'value: '+newDict[d.id]+newDict[d.COUNTY]; })
    )
    .on('mouseover', function(d){ d3.select(this).style({fill: 'green', stroke: 'red'});     })
    .on('mouseout', function(d){ d3.select(this).style({fill: '', stroke: ''}); });

 });

});
var quantize = d3.scale.quantize()
 //.domain([611850, 627698760])
 .domain([0, 700000000])
 .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));


 };

score 4 · Accepted Answer · answered Jul 29 '13 at 18:57

make an empty dictionary with the id as key and the unquantized as value:

var newDict = {};

d3.json("data/myData/lotteryMapNum.json", function(data) {
    data.forEach(function(d) { newDict[d.id] = +d.hopeDollars; }); 
});

then, use the quantize function when setting the path class:

d3.json("data/myData/simpleGA.json", function(json) {
   counties.selectAll("path")
  .data(json.features)
  .enter().append("svg:path")
  .attr("class", function(d) { return quantize(newDict[d.id]); })

feel free to add your null condition back in to check if the id exists.

basically, this will just use check the dictionary value for each path id (d.id), return the quantized value, and set the class accordingly.

also there is a tidier implementation of quantize:

var quantize = d3.scale.quantize()
  .domain([0, 1])
  .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

Would you mind taking a look at the updated code that I posted? Your solution worked great, and I've included tooltips now, but I can't get them to pull in the county data. I'm obviously not calling them correctly. Could you tell me what it is that I'm doing wrong? — user1855009, Jul 30 '13 at 13:34

Missing a step for d3 connecting data in choropleth map

1 Answers1

Linked