CODEWITHSUNDEEP
javascriptd3.jspoint
bailey
bailey

Reputation: 363

Points on a map with D3.js

I have a geoJSON of zip code centroid points that I am plotting on a D3.js map. I can get them to display but I am unable to adjust the size of the points. I was assuming that .attr("r", 1) would be doing that but I must be missing something. 

        d3.json("ZipPoints.json", function (zipPoints) {
            svg.selectAll("g")
               .data(zipPoints.features)
               .enter()
               .append("path")
               .attr("d", path)
               .attr("r", 1)
               .style("fill", "red");
         });

EDIT:

        d3.json("ZipPoints.json", function (zipPoints) {
            points.selectAll("circle")
               .data(zipPoints.features)
               .enter()
               .append("circle")
               .attr("r", 1.5)
               .attr("transform", function(d, i) {
                   return "translate(" + projection(zipPoints.features[i].geometry.coordinates) + ")";
                })
               .style("fill", "red")
               .classed("point", true);     
        });

Upvotes: 0

Views: 2643

Answers (1)

Serendipity
Serendipity

Reputation: 1037

You could try the following.

var pins = svg.append("g");
d3.json("ZipPoints.json", function(zipPoints) {
    pins.selectAll("circle")
        .data(zipPoints.features)
        .enter()
        .append("circle")
        .attr("r", 5)
        .style("fill", "red")
        .classed("pin", true);
});

You may need transformation on these points to render them correctly (I guess). In that case you could use the following bit of code. (The transformation function I used was required to plot data that had lat, long information on a map built using a specific projection).

.attr("transform", function(d) {
    /*whatever transformation that needs to be done*/
    return "translate(" + projection([ d.lon, d.lat ]) + ")";
})

Upvotes: 2

Related Questions