example of TopoJSON map with overlaid points?

[zach cp]

I have been playing with D3 for the purpose of making some maps of geographic data. While there are some good examples of overlying maps with point data using google maps or polymaps, I don't see any for the recently released map series based on topojson. As a newcomer to D3, an example that is very close to what I would like to do is the best way to get started and I would appreciate any pointers to a map like this. 

If there are no pre-existing examples maybe someone could help me figure out how to assign lat/long to points on a topoJSON map. Here is an attempt to overlay a series of points from a JSON file onto this map.  I am not sure how to get the long/lat data into the correct d3.geo.circle() or d3.geo.path() format. Any insight would be appreciated. 

var circle = d3.geo.circle()

.angle(2);

d3.json("soil_data_simple.json", function(error, data) {

svg.append("g")

.attr("class", "points")

 .selectAll("circle")

   .data(d3.entries(data))

 .enter().append("circle")

  .attr("d", (function(data) {return circle.origin([data.value[35],data.value[36] ]) } ));

});

thanks,

zach cp

[Mike Bostock]

The "U.S. Airports" example shows points on top of a TopoJSON map, if
you ignore the Voronoi bit. The points come from a CSV file with
columns 0 and 1 (longitude and latitude), which makes it easy to
construct a GeoJSON MultiPoint geometry object using the CSV rows as
the coordinates array:

http://bl.ocks.org/4360892

Technically, this abuses the GeoJSON standard because the coordinates
are objects rather than arrays, and the longitude and latitude values
are strings rather than numbers. But it's compatible with d3.geo.path.

Another example, the "Symbol Map", demonstrates a GeoJSON
FeatureCollection of Point geometries. The data comes from
us-state-centroids.json, which contains the center of population for
each state:

http://bl.ocks.org/4342045

Lastly, if you want to represent points in TopoJSON directly, I've
just added support to that to the reference implementation. It was
previously documented in the specification, but I hadn't yet
implemented it in bin/topojson. That's now fixed in this commit:

https://github.com/mbostock/topojson/commit/9e50072119bd6ea5ad0ffc3083cc6a333a3f5210

And here's an example:

http://bl.ocks.org/4408297

Mike

[zach cp]

Thanks MIke,

These are great.

zach cp

[jamiepopkin]

Hey Zach.

If you're interested... I did a little playing around with d3.v3 and topojson yesterday. Nothing fancy, but it seems to work:

http://littleearth.ca/d3/v3/mouse-in-out.html

I'd recommend using something like qGIS ( http://www.qgis.org ) to create the dataset. It exports to GeoJSON... Then you can directly convert to topojson with Mike's tool.

Point of interest: Even though my example contains a boundary with no shared topology it still shrunk down by half when converting from geojson to topojson. Then down to 1/8th with gzip. I'm assuming the size difference will be much greater with shared topology. Awesome!

Jamie

[marc fawzi]

Does anyone have any idea about the pros and cons of TopoJSON vs
GeoJSON? Do they achieve the same goal or are they designed with
different goals?

[Mike Bostock]

> Does anyone have any idea about the pros and cons of TopoJSON

I may be biased, but the TopoJSON wiki sums it up pretty concisely:

https://github.com/mbostock/topojson/wiki

Mike

[marc fawzi]

Ok, so it's GeoJSON's brainier and slimmer cousin :)

But how can we access the TopoJSON files off of bl.ocks? I tried going
to the gist directly but wasn't sure how to find the JSON file. I know
I can always fork the gist console.log the data, but is there a way
for accessing these files on bl.ocks or gits.github.com? I recall for
GeoJSON examples the JSON files were pasted on bl.ocks along with the
D3 code

Also, how are these files generated? The wiki has a very basic
description of the spec. I didn't see any description of how to
generate the data from more basic formats (like publicly available
files whatever is the common or popular intermediate format)

[Mike Bostock]

> But how can we access the TopoJSON files off of bl.ocks?

You can add TopoJSON files to your gists like any other file. If you
want to use the TopoJSON files I've created, refer to this gist:

https://gist.github.com/4090846

You can load files across gists on bl.ocks.org using URLs of the form
"/d/gistid/path/to/file". For example, to load the 1:110m resolution
world TopoJSON file, which defines both countries and land objects,
use "/d/4090846/world-110m.json". As in this example:

http://bl.ocks.org/4319903

In general, you'll see me referring to these shared TopoJSON files
rather than creating separate copies for each gist. This makes the
examples load faster because the files are cached across examples,
reduces load on bl.ocks.org, and makes it easier for me to update the
shared files without needing to touch every example.

> Also, how are these files generated?

Try topojson --help? Very simply:

topojson foo.geojson -o foo.topojson

For a longer description, see my recent tutorial:

http://bost.ocks.org/mike/map/

Mike

[marc fawzi]

exactly what I was looking for, thanks Mike

[jamiepopkin]

May I just say that I'm totally impressed with the concept and performance of topojson. I totally love it!!!

Has anyone ever considered submitting it to the OGC (http://www.opengeospatial.org) as a standard?

[Elijah Meeks]

I updated this so that it's all TopoJSON, except the points:

http://bl.ocks.org/4414107

The routes file went from 2MB to 100K when switched from GeoJSON to TopoJSON, but that's because there were a lot of shared arcs. The land file went from 160k to 130k, even though there are no shared arcs at all. So, yeah, TopoJSON is the real stuff.