Javascript D3.js Manipulating arrays of objects

Question

I'm not very experienced with javascript or D3.js and need some guidance.

I have two data sets (arrays of objects) that I'd like to join. I'm trying to line up the National Average Scores with the State Average Scores by 'join on' the Answer. To browse the data, you can cut and paste this into Tributary.

// National Averages Dataset
var nationaldataset = [];
var nAvg = "http://data.medicare.gov/resource/89u8-shx4.csv"; 
var nscore = "HCAHPS Answer Percent";
var nquestion = "HCAHPS Question";
var nanswer = "HCAHPS Answer Description";

d3.csv( nAvg, function(data)  {
    nationaldataset = data.map(function(d) { return [ d[nquestion], d[nanswer], d[nscore] ]; });
    d3.select("body").selectAll("p")
        .data(nationaldataset)
        .enter()
        .append("p")
        .text( function(d) {return d ;} );  

});
// State Averages Dataset
var statedataset = [];
var sAvg = "http://data.medicare.gov/resource/fhk8-g4vc.csv"; //State Average
var sq1 = "Percent of patients who reported that their nurses \"Sometimes\" or \"Never\" communicated well."
var sq2 = "Percent of patients who reported that their nurses \"Usually\" communicated well."
var sq3 = "Percent of patients who reported that their nurses \"Always\" communicated well."
// .. this list goes on for 30 columns
d3.csv( sAvg, function(data) {
    sstatedataset = data.map(function(d) { return [ d["State"], d[sq1], d[sq2], d[sq3] ]; });
    d3.select("body").selectAll("p")
        .data(statedataset)
        .enter()
        .append("p")
        .text(function(d) {return d ;} );

});

I've looked at several javascript array handling Methods (Join(), Concatenate() etc.) but have drawn a blank. How would I go about doing something like this -

Select nationaldataset.nquestion
, nationaldataset.nanswer
, nationaldataset.nscore
, statedataset.Score
From nationaldataset, statedataset 
WHERE nationaldatset.nanswer = statedataset.columnname 
AND statedataset.State in ['SD', 'MN', 'IA'] 

Answer 1

There's unfortunately no join operator or equivalent in Javascript -- you have to explicitly search for the matches. In your case, you can do this with a nested loop. The code would look something like this.

var results = [];
for(var i = 0; i < statedataset.length; i++) {
  if(statedataset[i].State == "SD" ||
     statedataset[i].State == "MN" ||
     statedataset[i].State == "IA") {
    var j = 0;
    for(j = 0; j < nationaldataset.length; j++) {
      if(nationaldataset[j].nanswer == statedataset[i].columnname) {
        break;
      }
    }
    if(j < nationaldataset.length) {
      results.push({
        "nquestion": nationaldataset[j].nquestion,
        "nanswer": nationaldataset[j].nanswer,
        "nscore": nationaldataset[j].nscore,
        "Score": statedataset[i].Score
      });
    }
  }
}

This should give you a data structure that you can use with D3. And yes, there's almost certainly a nicer way of doing this.