Plotting points on map

[hilay khatri]

Hi,

I just started to learn how the overall projection thing works.

Here's my sample projection that I am using.

 
var xym = d3.geo.mercator();
path = d3.geo.path().projection(xym);
 
var translate = xym.translate();
translate[0] =7330;
translate[1] = 3400;
 
// center on the netherlands and zoom all the way in   
xym.translate(translate);
xym.scale(30000);

Now, I have a CSV file with points containing latitude and longitude values. How do I plot those points onto this map. Basically I would like to draw each point as a circle. Any idea how to do that such that the point gets appeared on the current location. Before implementing the projection, I manually translated and scaled points using this but it didn't give me the correct location of the points.

d3.csv("data.csv", function(collection) {
    variable_name.selectAll("circle")
      .data(collection)
    .enter().append("svg:circle")
    .attr('transform','translate(660,380)scale(7,8)')
      .attr("cy", function(d) { return -(d.latitude) })
      .attr("cx", function(d) { return (d.longitude) })
      .attr("r", function(d) { return .01; });
});

Thanks.

[Scott Murray]

Projections are just configurable functions. First, you're using the projection "xym" to project your GeoJSON features (I assume).

To place points on the map, using the same projection, you'll need their latitude/longitude values. Just feed those to the xym projection function, as a two-value array, which could look like this:

projection([d.lon, d.lat]);

Note that longitude goes first!

That will return another two-value array, which are x/y screen coordinates. So you just need to get at those numbers in the array in whatever way works best for you, such as:

var coords = projection([d.lon, d.lat]);
var x = coords[0];
var y = coords[1];

Or, to integrate it into your code below, you could change the cx/cy lines to read:

.attr("cy", function(d) { return Vis.projection([d.lon, d.lat])[0]; })
.attr("cx", function(d) { return Vis.projection([d.lon, d.lat])[1]; })

Good luck!

[hilay khatri]

Thank you Scott. That worked.