Q:

Plot network of nodes and edges on map using D3.js

I'm trying to plot a network of locations and connections between them using D3.js. I have two files, "nodes.csv" and "edges.csv" that contain my network information. I'm hoping to get an end result similar to using Gephi's geolayout Plugin.
The nodes.csv file is of the following format:
+-----+-----+-----------+-------------+
| Id  | ... |    Lat    |     Lon     |
+-----+-----+-----------+-------------+
| 123 | ... | 38.889931 | -77.009003  |
| 145 | ... | 40.730610 | -73.935242  |
| 198 | ... | 34.052235 | -118.243683 |
+-----+-----+-----------+-------------+

And edges.csv has the following format:
+--------+--------+
| source | target |
+--------+--------+
|    123 |    145 |
|    198 |    165 |
|    198 |    173 |
+--------+--------+

I've been able to successfully plot the nodes on a map, but am unsure how to use the source and target values of my edges.csv to reference lines in the nodes. How would I load all the nodes in memory to "look up" start and endpoints for D3 lines? Is it better to convert these CSVs into a JSON format? Any helpful criticism on my working nodes plot is also welcome. 
Here's a link to working code with only nodes plotted: http://bl.ocks.org/almsuarez/1173e4cabbcfd032642e 

A:

To draw the "linking" lines, here's how I would code it:
// grab the edges data
d3.csv("edges.csv", function(error, edges){

  // create a map of our nodes for faster lookups
  var nodesById = d3.map(nodes.data(), function(d){
    return d.key;
  });

  // loop the edges
  edges.forEach(function(d){

    // get pixel coordinates
    var p1 = projection([nodesById.get(d.source).lon, nodesById.get(d.source).lat]),
        p2 = projection([nodesById.get(d.target).lon, nodesById.get(d.target).lat]);

    // append the line
    svg.append("line")
      .attr("x1", p1[0])
      .attr("x2", p2[0])
      .attr("y1", p1[1])
      .attr("y2", p2[1])
      .style("stroke", "steelblue")
  });

});

Full working example.

