State/County names in TopoJSON or go back GeoJSON?

[marc fawzi]

I'm using one of Mike's TopoJSON files for the entire US 

http://bl.ocks.org/mbostock/raw/4090846/us.json

I need to be able to track which state is being rendered in the code below:

    d3.json("us.json", function(error, us) {

        g.selectAll("path")

                .data(topojson.object(us, us.objects.states).geometries)

                .enter().append("path")

                .attr("d", path)

                .attr("class", "feature")

                .on("click", click);

        g.append("path")

                .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))

                .attr("class", "mesh")

                .attr("d", path);

    })

I need to apply different "fill" attribute per state.

I remember being able to do that with a GeoJSON file that I had also copied from one of Mike's examples. 

Kind of a dumb question, but I'm wondering if go back to GeoJSON in case TopoJSON omits state/county name by convention?

[Scott Murray]

The link seems to be broken. Does us.json include the state names or IDs?

It's possible they were stripped out. The topojson command line strips those properties out by default, but you can set the -p option to maintain them.

Either way, I wouldn't assume that the particular TopoJSON file you're looking at follows the same structure as an earlier GeoJSON one.

Scott

[marc fawzi]

I think github raw service is down ...

That explains my other problem (map examples not loading on bl.ocks)

Didn't assume it would be same structure but I assumed State and County names would be there by default in every map file regardless of format since the whole purpose of the file is to represent a map (I guess names add extra bytes)  

        Scott

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Scott Murray]

> Didn't assume it would be same structure but I assumed State and County names would be there by default in every map file regardless of format since the whole purpose of the file is to represent a map (I guess names add extra bytes)

Yes, exactly. You should be able to view source on the local copy of us.json and really quickly tell whether those names are in there. (Otherwise, it will just be the geodata with no names.)

Scott

[Mike Bostock]

That file only has ids; if you want names, you'd have to join with this TSV:

http://bl.ocks.org/mbostock/raw/4090846/us-county-names.tsv

But in general I would recommend building your own TopoJSON rather
than relying on ones in my gists. A good place to start is the
us-atlas repository:

https://github.com/mbostock/us-atlas

Also, the topojson command-line tool supports joining CSVs and TSVs
with shapefiles using the -e option. So, if you have a TSV file that
has an id, name, and some other interesting properties, you can join
those with your shapefile and generate TopoJSON for a choropleth or
other geovisualization.

Mike

[marc fawzi]

Thanks Mike and Scott!

It went smoothly once github raw file serving came back

I ended up converting the file below to TopoJSON with the -p option 

http://bl.ocks.org/mbostock/raw/2206489/7110de3d8412433d3222c9b7e3ac6593593162b2/us-states.json

Below is the updated code from the Zoom to Bounding Box example showing the state names in console

I'll be using the threshold function to color states ...

    var width = 960,

            height = 500,

            active;

    var projection = d3.geo.albersUsa();

    var path = d3.geo.path()

            .projection(projection);

    var svg = d3.select("body").append("svg")

            .attr("width", width)

            .attr("height", height);

    svg.append("rect")

            .attr("width", width)

            .attr("height", height)

            .on("click", reset);

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

    d3.json("us-states-topo.json", function(error, us) {

        g.selectAll("path")

                .data(topojson.object(us, us.objects["us-states"]).geometries)

                .enter()

                .append("path")

                .attr("d", path)

                .attr("class", "feature")

                .on("click", click)

                .each(function(d) {

                   console.log(d.properties.name)

                })

        g.append("path")

                .datum(topojson.mesh(us, us.objects["us-states"], function(a, b) { return a !== b; }))

                .attr("class", "mesh")

                .attr("d", path);

    });

[Mike Bostock]

> I ended up converting the file below to TopoJSON with the -p option

That works, but I really wouldn't recommend it using that old file.
You can get much higher-quality geometry from the us-atlas repository.

For that matter, you can take the more recent us-states.json and
combine that with us-county-names.tsv like so:

git clone https://gist.github.com/4090846.git
cd 4090846
topojson -o us-named.json -e us-state-names.tsv -e
us-county-names.tsv -p -- us.json

Read about -e in detail here, under "External Properties":

https://github.com/mbostock/topojson/wiki/Command-Line-Reference

Mike

[marc fawzi]

I will do that

How does TopoJSON help in the case where I need the counties to have
very simplified outlines in normal zoom factor and proportionately
more detailed lines for higher zoom factors? Does it make that easier
by any chance, or is it equally straightforward with GeoJSON? just for
my curiosity's sake

Thanks Mike