Can't get d3 tooltips to display name, only number - json

Question

I'm trying to set up d3 tooltips for my choropleth map. I have the tooltips working and am able to pull in the data from lotteryMapNum.json that I am using to assign the map colors, but I can't get any text to show up. I'm either getting "undefined" or NaN no matter what I do. I'm thinking that I need to call the data some other way, but I'm not sure how.
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: ''}); });
});
lotteryMapNum.json
[
{"COUNTY":"APPLING",
"hopeDollars":12921240,
"id":"0"}
]
simpleGA.json
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "id": 0, "properties": { "NAMELSAD10": "Appling County"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.04292, 30.947296 ], [ -83.05332, 30.94753 ],] ] } }
]
}

Answer 1

pretty simple fix i think. try getting rid of the + in front of d.COUNTY and then just making the value of each id key an array:
d3.json("data/myData/lotteryMapNum.json", function(data) {
data.forEach(function(d) { newDict[d.id] = [+d.hopeDollars, d.COUNTY];});
then just access the desires tooltip text in the same way:
.text(function(d){ return 'value: '+ newDict[d.id][0] + newDict[d.id][1]; })

Answer 2

after a quick look, I see two potential problems...
1) It doesn't look like there is any property 'd.COUNTY' in json.features... 'd' in the text() function is referencing the data on the dom element, which comes directly from simpleGA.json ('id' is present, but 'COUNTY' is not.)
Instead, you're probably wanting to reference:
d.properties['NAMELSAD10']
2) The two requests are being loaded in parallel, but one response depends on the other. It is possible that the completion code for simpleGA.json is executing before the lotteryMapNum.json request is complete... in which case the elements of 'newDict' may still be undefined.
A possible solution for this would be to chain the two requests based on the dependency:
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: ''}); });
});
});
If you need more help, post a link to the two .json files and I can better troubleshoot with a jsfiddle.
EDIT: jsfiddle is giving me a lot of woes with large filesizes... but here's basically what I meant with a database-like join... also was working with a list instead of a geojson map:
// load json1
d3.json("lotterMapNum.json", function(lotterMapNum) {
// load json2
d3.json("simpleGA.json", function(simpleGA) {
for (var i = 0; i < simpleGA.features.length; i++) {
newDict[simpleGA.features[i].id] = simpleGA.features[i];
}
for (var j = 0; j < lotteryMapNum.length; j++) {
if (typeof newDict[lotteryMapNum[j].id] === 'undefined') {
newDict[lotteryMapNum[j].id] = {};
}
newDict[lotteryMapNum[j].id].hopeDollars = lotteryMapNum[j].hopeDollars;
newDict[lotteryMapNum[j].id].COUNTY = lotteryMapNum[j].COUNTY;
}
var counties = d3.select('#counties')
.data(newDict)
.enter()
.append('li')
.text(function(d){return d.id + ': ' + d.COUNTY + ', $' + d.hopeDollars;});
});
});