How to add Label to each state in d3.js (albersUsa)?

Question

The us.json loaded, but when i try to add Label name i can't make it work. I don't see the name property in .json file so how can i add each state name? I'm really new to this framework.

I try different Tutorial on Google and Stackoverflow, but none of them work for me. Here is the link to couple tutorial i tried, that i think is worthy.

• Add names of the states to a map in d3.js
• State/County names in TopoJSON or go back GeoJSON?

The concerns I have:

1. I think I'm missing name property in us.json file. (if that's the issue, is there any other .json file that includes state name? And how to use the state name with that file?)
2. Is the US state name included in http://d3js.org/topojson.v1.min.js?

.html File (Framework Loaded)

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

.js File:

var width = 1500,
    height = 1100,
    centered;


var usData = ["json/us.json"];
var usDataText = ["json/us-states.json"];

var projection = d3.geo.albersUsa()
    .scale(2000)
    .translate([760, height / 2]);

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

var svg = d3.select("body").append("svg")
    .style("width", "100%")
    .style("height", "100%");


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

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

d3.json(usData, function(unitedState) {
  g.append("g")
    .attr("class", "states-bundle")
    .selectAll("path")
    .data(topojson.feature(unitedState, unitedState.objects.states).features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("class", "states")
    .on("click", clicked);
});

Thank you everyone in advanced. I also appreciate if you tell me where did you learn d3.js.

Answer 1

As you stated your us.json doesn't have state names in it. What it has, though, are unique ids and luckily, Mr. Bostock has mapped those ids to names here.

So, let's fix up this code a bit.

First, make the json requests to pull the data:

// path data
d3.json("us.json", function(unitedState) {
  var data = topojson.feature(unitedState, unitedState.objects.states).features;
  // our names
  d3.tsv("us-state-names.tsv", function(tsv){
    // extract just the names and Ids
    var names = {};
    tsv.forEach(function(d,i){
      names[d.id] = d.name;
    });

Now add our visualization:

// build paths
g.append("g")
  .attr("class", "states-bundle")
  .selectAll("path")
  .data(data)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("stroke", "white")
  .attr("class", "states");

 // add state names
 g.append("g")
  .attr("class", "states-names")
  .selectAll("text")
  .data(data)
  .enter()
  .append("svg:text")
  .text(function(d){
    return names[d.id];
  })
  .attr("x", function(d){
      return path.centroid(d)[0];
  })
  .attr("y", function(d){
      return  path.centroid(d)[1];
  })
  .attr("text-anchor","middle")
  .attr('fill', 'white');

  ....

Here's a working example.