How to display state names on the Choropleth map?

[zqshen]

Hi,

I am a d3 newbie and trying to visualize my data using the Choropleth
map in examples. I would like to display state names on the map. I
tried to load the names and coordinates from us-state-centroids.json
in the examples/data/ folder and add to svg:text. But it did not work.
What attributes should I set when I append the data to svg:text?
Please help.

Thanks
Jack

[Mike Bostock]

> What attributes should I set when I append the data to svg:text?

http://www.w3.org/TR/SVG/text.html#TextElement

There are a number of examples in the Git repository, the wiki, and
the website that show how to use svg:text elements. Typically, you use
x & y attributes (or a transform) to set the position, and then the
text operator to set the content. The fill style controls the color.
The text-anchor, dx & dy attributes are used to control alignment and
baseline.

If you want help debugging your code, please post it to the group so
we can see what the error is.

Mike

[zqshen]

Thanks. I figured it out. Here is what I did:

var labels = svg.append("svg:g")
.attr("id", "labels")
.attr("class", "Title");

d3.json("us-state-centroids.json", function(json) {
var project = d3.geo.albersUsa();
labels.selectAll("text")
.data(json.features)
.enter().append("svg:text")
.text(function(d){return d.properties.name;})
.attr("x", function(d){return project(d.geometry.coordinates)[0];})
.attr("y", function(d){return project(d.geometry.coordinates)[1];})
.attr("dx", "-1em");
});

Since I work on the Choropleth map, I tried to append text to states.
But it seems that I cannot control the rendering order, the labels
sometime are behind the map layer. So I created another svg element
for labels.

-Jack

[Ayesha Mahmood]

Can you share you code for project(). How do you get the specific x and y?

[Ayesha Mahmood]

I just can't get the x and y correct.

[Ian Johnson]

you could calculate the centroid of each state:

https://github.com/mbostock/d3/wiki/Geo-Paths#wiki-path_centroid

so something like:

.attr("transform", function(d) {

  var p = path.centroid(d);

  //p is [x,y] coordinates of centroid

  return "translate(" + p + ")";

})

--
Ian Johnson

http://enja.org

[Ayesha Mahmood]

That did work but the center is not 100% accurate. I think what's happening is that it is centering based on the square around each path which is the bounding box. Any ideas on how to calculate the actual center of each state?

[Ian Johnson]

You could probably calculate a center of mass or something but my guess is you'd still be unhappy with the result. I'd make all the labels draggable, manually adjust their placement and then serialize the json of there positions for reuse.

Perfect centers won't help in the north east for example