FAQ

State/County names in TopoJSON or go back GeoJSON?

Marc fawzi
Mar 19, 2013 at 8:25 pm
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?

--
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+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
reply

Search Discussions

7 responses

  • Scott Murray at Mar 19, 2013 at 8:34 pm
    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

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Marc fawzi at Mar 19, 2013 at 8:40 pm
    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)

    On Tue, Mar 19, 2013 at 1:34 PM, Scott Murray wrote:

    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

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Scott Murray at Mar 19, 2013 at 8:41 pm
    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

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Mike Bostock at Mar 19, 2013 at 8:51 pm
    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

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Marc fawzi at Mar 19, 2013 at 11:17 pm
    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);
    });


    On Tue, Mar 19, 2013 at 1:50 PM, Mike Bostock wrote:

    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

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Mike Bostock at Mar 19, 2013 at 11:31 pm
    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

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Marc fawzi at Mar 20, 2013 at 1:48 am
    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
    On Tue, Mar 19, 2013 at 4:31 PM, Mike Bostock wrote:
    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

    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
    --
    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+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.

Related Discussions

Discussion Navigation
viewthread | post