I have a bunch of data that is coded with the Census FIPS code for states and counties (i.e. New York is FIPS 36, Kings County is FIPS 36047). I'm mapping that data using the d3.geo.albersUSA projection from the TopoJSON file here, which uses FIPS codes as the IDs for the state and county features. This is great for choropleths, where I just need to join on ID.
However, I want to draw lines from the centroid of one feature to another using the path.centroid(feature) and the LineString path type. Here's a simplified example of my data:
Start_State_FIPS, End_State_FIPS, Count_of_things
2,36,3
1,36,13
5,36,5
4,36,8
6,36,13
8,36,3
I'm using this same data to plot circles on the map, using the count_of_things field to set the radius. That's working no problem. To set up the lines, I created a map var with the FIPS code and the feature centroid, then used the FIPS code key to pull the start-end points from my data.
My code is drawing lines, but definitely not between centroid points. I didn't think I needed to do anything with the projection of the points, since they're coming from the features that are already adjusted for the map projection, but maybe I'm wrong. Here's my code:
var arclines = svg.append('g')
data_nested = d3.map(my_data)
var state_points = new Map();
var statesarc = topojson.feature(us, us.objects.states).features
statesarc.forEach(function(d) {
state_points.set(d.id, path.centroid(d))
})
arcdata = []
data_nested.values().forEach(function(d) {
arcline = {source: state_points.get(parseInt(d.Start_State_FIPS)), endpoint: state_points.get(parseInt(d.End_State_FIPS))}
arcdata.push(arcline)
})
arclines.selectAll("path")
.data(mydata)
.enter.append("path")
.attr('d', function(d) { return path({type: "LineString", coordinates: [d.source, d.endpoint]}) })
