Add names of the states to a map in d3.js

Question

I am using albersUSA projection to display a map. I want to add the name of the states to each state.

This is what I tried, and i can see the names of the states in the source, but I don't see them rendered. What am i doing wrong?

var width = 1060,
height = 600,

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

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click)
    .on("mousemove", mousemove);

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .append("g")
    .attr("id", "states");

var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 100]);

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

draw();

function draw(){

  d3.json("readme.json", function(json) {
    g.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .append("svg:text")
    .text(function(d){
        return d.properties.name;
    })
    .attr("x", function(d){
        return -path.centroid(d)[0];
    })
    .attr("y", function(d){
        return  -path.centroid(d)[1];
    });

  });
}

Solution 1

OK for anyone wondering, this is how I managed to do it:

function draw(){

  d3.json("readme.json", function(json) {
    g.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .on("click", click);

    g.selectAll("text")
    .data(json.features)
    .enter()
    .append("svg:text")
    .text(function(d){
        return d.properties.name;
    })
    .attr("x", function(d){
        return path.centroid(d)[0];
    })
    .attr("y", function(d){
        return  path.centroid(d)[1];
    })
    .attr("text-anchor","middle")
    .attr('font-size','6pt');


  });
}

Solution 2

I took a similar approach to the answer you provided yourself, but I didn't like where "centroid" put all of the state names. Hawaii, Louisiana, Michigan, and Florida, for instance. So I added properties to the json data for the state info for dx and dy for those states, and added code to the drawing function.

Here's an example of some of the modified states (with the coordinates removed to keep it smaller):

    {
        "geometry": { "type": "Polygon", "coordinates": [] },
        "type": "Feature",
        "id": "12",
        "properties": { "name": "Florida", "abbr": "FL", "dx": "1em" }
    },
    {
        "geometry": { "type": "MultiPolygon", "coordinates": [] },
        "type": "Feature",
        "id": "15",
        "properties": { "name": "Hawaii", "abbr": "HI", "dx": "1.15em", "dy": "1.25em" }
    },

And here is the portion of the function that draws the labels:

        g.selectAll("text")
            .data(json.features)
            .enter()
            .append("text")
            .attr("transform", function (d) { return "translate(" + path.centroid(d) + ")"; })
            .attr("dx", function (d) { return d.properties.dx || "0"; })
            .attr("dy", function (d) { return d.properties.dy || "0.35em"; })
            .text(function (d) { return d.properties.abbr; });

Comments

[Melanie Sumner]

How would I just return the state code and store it into a variable? I don't necessarily need any names to display, just need to get to the state code so I can use it for other things.

[Chris Baker]

Do you have this json data in a git repo somewhere for reuse, by any chance?

[jfren484]

It was internal code at the place I worked at the time. The state json data doesn't have any sensitive information in it, though, so I do have it. It's not on a public repo, but here is the state json data and then a snippet from our MVC Razor view where it was used (if you're not doing ASP.NET MVC you'll need to heavily edit that piece). Oops, can't paste the whole file in here. I'll have to put it up somewhere.