问题描述:

My intention is to visualize connections between latitude and longitude pairs by applying forceBundling to the edges that represent the connection between the lat/lon pairs. Here's an example of a visualization that works. I've been able to get a map like the example working beautifully. However, I would like to apply the same process to building a map with forceBundle applied to a specific city in the U.S. For example, if I wanted to map connections between the watchtower in Berkeley, CA and any location that any individual arrived at after visiting the watchtower, then I want to be able to visualize those many connections in an orderly way using force bundling. But doing so at a city level has produced disastrous attempts. One guess is that the path/projection through which each lat/lon pair goes through is not appropriately scaled to the city level. I'm not too sure though since I've tried scaling the projection to approximately the city level but to no avail.

Here's my code (I've left out nodes and edges for readability):

 var node_data = {

"0": {"x": -122.1625137, "y": 37.4233818},

"1": {"color": "orange", "x": -122.15736699999999, "y": 37.426596000000004},

"2": {"color": "orange", "x": -122.15979280000001, "y": 37.422568700000006},

"3": {"color": "orange", "x": -122.176841, "y": 37.424965},

"4": {"color": "orange", "x": -122.1816551, "y": 37.424818999999999}}

var edge_data = [

{"source": "0", "target": "1"},

{"source": "0", "target": "2"},

{"source": "0", "target": "3"},

{"source": "0", "target": "4"}]

var width = 1000,

height = 800;

var projection = d3.geo.mercator()

.center([-122.1625137, 37.4233818])

.scale(100);

var path = d3.geo.path()

.projection(projection);

var svg = d3.select("#viz")

.append("svg")

.attr("width", width)

.attr("height", height);

d3.json('us-convert.json', function(error, us) {

if (error) throw error;

svg.append("path")

.datum(topojson.feature(us, us.objects.land))

.attr("d", path)

.attr("class", "land")

.style("fill", "grey")

.style("stroke", "#fff")

.style("opacity", 0.4)

.attr("d", path);

});

var fbundling = d3.ForceEdgeBundling();

fbundling.nodes(node_data)

.edges(edge_data);

svg = svg.append('g');

var results = fbundling();

for(var i = 0; i < results.length; i++){

for(var j = 0; j < results[i].length - 1; j++){

var x1 = +results[i][j]["x"];

var y1 = +results[i][j]["y"];

var x2 = +results[i][j + 1]["x"];

var y2 = +results[i][j + 1]["y"];

svg.append("path")

.datum({type: "LineString", coordinates:[[x1, y1], [x2, y2]]})

.attr("d", path)

.style("stroke-width", 1)

.style("stroke", "blue")

.style("fill", "none")

.style('stroke-opacity',0.5);

}

}

If projection/path are the issues, could someone point out how I might go about ensuring that the lat/lon pairs are appropriately scaled?

相关阅读:
Top