CODEWITHSUNDEEP
javascriptajaxd3.jssvggeo
rosteve
rosteve

Reputation: 371

Displaying coordinates in D3 from JSON array

I am getting a json response coordinates from php as follows

{"All":[{"longitude":"36.8948669","name":" Manyanja Rd, Nairobi, Kenya","latitude":"-1.2890965","userID":"1"}, ...]}

I am thereafter loading it via javascript as follows:

$.ajax({
url : "http://xxx.xxx.xxx/GetLocations.php",
dataType : "json",
data :"",

success : 
function (data){
//populate map is the function that I pass the coordinates to d3 to be shown 
 //when i console.log(data), its showing me the json so I am sure the data is there

populate_map(data)
}
});

And this is the function populate_map.

function populate_map(pos_data){
    console.log(pos_data.All[0]);
    var width = 700;
var height = 580;

var svg = d3.select( "body" )
    .append( "svg" )
    .attr( "width", width )
    .attr( "height", height );

var g = svg.append( "g" );

var albersProjection = d3.geo.albers()
    .scale( 190000 )
    .rotate( [71.057,0] )
    .center( [0, 42.313] )
    .translate( [width/2,height/2] );

var geoPath = d3.geo.path()
    .projection( albersProjection );




var projection = d3.geo.mercator()
.center([36.8, -1.3])
.scale([60000])
.translate([width/2, height/2]);

var nairobipathing = d3.geo.path().projection(projection);

g.selectAll( "path" )
    .data( data.geometries )
    .enter()
    .append( "path" )
    .attr( "fill", "#ccc" )
    .attr( "stroke", "#333")
    .attr( "d", nairobipathing );



      svg.selectAll("circles.points")
        .data(pos_data)
        .enter()
        .append("circle")
        .attr("r",5)
        .attr("transform", function(d) {return "translate("  d.All.longitude+","+d.All.latitude ")";});
}

The problem is that its not showing any coordinates on the nairobi map that i have initialised but when I console.log the data in the populate function its showing me data json.

The last svg is the one i am using to populate the map with these coordinates but it doesnt work in any way and doesnt show any coordinate in the map.

Kindly help me to show me where the problem is

Upvotes: 1

Views: 1155

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38151

First, you appear to be using two projections, it will be clearer if you remove references to the Albers projection which is centered off the coast of North America in the Atlantic.

Second, you should pass the array of points in the data object presented rather than the data object itself.

Third, the values used for in the transform need to be in svg coordinate space not a geographic coordinate space. In your example you are using d.All.longitude or d.All.latitude without applying the projection. You need to use projection([longitude,latitude]) to get the svg coordinates for the circle. This returns a coordinate [x,y] in the svg coordinate space (for which you can extract the x and y coordinates separately if needed.

Based on points two and three, your points could be appended with something like:

     svg.selectAll(".points")
            .data(pos_data.All)
            .enter()
            .append("circle")
            .attr("class","points")
            .attr("r", 5 )
            .attr("stroke","orange")
            .attr("transform", function(d) {return "translate(" + projection([d.longitude,d.latitude]) + ")";})

Alternatively you can use .attr("cx",x) or .attr("cy",y) for point center instead of translate:

         svg.selectAll(".points")
            .data(test.All)
            .enter()
            .append("circle")
            .attr("class","points")
            .attr("r", 5 )
            .attr("stroke","orange")
            .attr("cx", function(d) { return projection([d.longitude,d.latitude])[0]; })
            .attr("cy", function(d) { return projection([d.longitude,d.latitude])[1]; })

Upvotes: 2

Related Questions