First, preproject and simplify using topojson --projection:
topojson \
-o ophz.json \
-q 1e5 \
-s 0.25 \
--projection 'd3.geo.albersUsa()' \
-- b=ophz-b-wgs84.shpSee the Command Line Reference for details.
The simplification threshold baked into the TopoJSON file is based on the maximum amount of zoom we’ll use, or conversely, the minimum area threshold for client-side simplification. Since at maximum zoom scale = 4, and the simplification threshold is set dynamically at 4 / scale / scale, the minimum simplification threshold is 0.25. (The two fours are unrelated; the latter indicates the area threshold in square pixels.) The smaller the baked-in simplification threshold, the more maximum detail, and the larger the file. But since the client simplifies when rendering, it should still perform well when zoomed out.
Then, update the example code to reflect the new projection, here the composite U.S.A. Albers projection (probably not the best projection for this; you might want to rotate so that the parallels are flat when you zoom in):
var projection = d3.geo.albersUsa();And that’s pretty much it.
Well, this example is slightly different from the original because it combines viewport clipping (via d3.geo.clipExtent) rather than using rough simplification outside the viewport. The geometry here is much more complex, so the rough simplification was causing artifacts on the edges of the viewport that go away when you use proper clipping.
