A test for the new topojson.merge functionality that will be available in the next release of TopoJSON, 1.6. The state boundaries are computed by merging the county boundaries!
The merge algorithm appears to have some issues with Virginia’s small counties; I am currently investigating this problem.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script src="topojson.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 600; | |
| var projection = d3.geo.albersUsa() | |
| .scale(1280) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("us-counties.json", function(error, us) { | |
| if (error) return console.error(error); | |
| svg.selectAll("path") | |
| .data(d3.range(100)) | |
| .enter().append("path") | |
| .style("fill", "#ccc") | |
| .style("stroke", "black") | |
| .attr("d", function(id) { return path(topojson.merge(us, us.objects.counties.geometries.filter(function(d) { return (d.id / 1000 | 0) === id; }))); }) | |
| .style("fill-opacity", 0) | |
| .style("stroke-dasharray", function() { return "0," + this.getTotalLength(); }) | |
| .transition() | |
| .delay(function(id) { return id * 250; }) | |
| .duration(function() { return this.getTotalLength() * 3; }) | |
| .ease("quad-in") | |
| .style("fill-opacity", 1) | |
| .style("stroke-dasharray", function() { return this.getTotalLength() + "," + this.getTotalLength(); }) | |
| .transition() | |
| .duration(250) | |
| .style("stroke", "#fff"); | |
| svg.append("path") | |
| .attr("d", path(topojson.mesh(us))) | |
| .style("fill", "none") | |
| .style("stroke", "#fff") | |
| .style("stroke-width", ".5px"); | |
| }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
| !function(){function n(n,t){function r(t){var r,e=n.arcs[0>t?~t:t],o=e[0];return n.transform?(r=[0,0],e.forEach(function(n){r[0]+=n[0],r[1]+=n[1]})):r=e[e.length-1],0>t?[r,o]:[o,r]}function e(n,t){for(var r in n){var e=n[r];delete t[e.start],delete e.start,delete e.end,e.forEach(function(n){o[0>n?~n:n]=1}),a.push(e)}}var o={},i={},u={},a=[];return t.forEach(function(n){var t,e,o=r(n),a=o[0],f=o[1];if(t=u[a])if(delete u[t.end],t.push(n),t.end=f,e=i[f]){delete i[e.start];var c=e===t?t:t.concat(e);i[c.start=t.start]=u[c.end=e.end]=c}else i[t.start]=u[t.end]=t;else if(t=i[f])if(delete i[t.start],t.unshift(n),t.start=a,e=u[a]){delete u[e.end];var s=e===t?t:e.concat(t);i[s.start=e.start]=u[s.end=t.end]=s}else i[t.start]=u[t.end]=t;else t=[n],i[t.start=a]=u[t.end=f]=t}),e(u,i),e(i,u),t.forEach(function(n){o[0>n?~n:n]||a.push([n])}),a}function t(n){return u(n,r.apply(this,arguments))}function r(t,r,e){function o(n){var t=0>n?~n:n;(s[t]||(s[t]=[])).push({i:n,g:c})}function i(n){n.forEach(o)}function u(n){n.forEach(i)}function a(n){"GeometryCollection"===n.type?n.geometries.forEach(a):n.type in l&&(c=n,l[n.type](n.arcs))}var f=[];if(arguments.length>1){var c,s=[],l={LineString:i,MultiLineString:u,Polygon:u,MultiPolygon:function(n){n.forEach(u)}};a(r),s.forEach(arguments.length<3?function(n){f.push(n[0].i)}:function(n){e(n[0].g,n[n.length-1].g)&&f.push(n[0].i)})}else for(var h=0,p=t.arcs.length;p>h;++h)f.push(h);return{type:"MultiLineString",arcs:n(t,f)}}function e(t,r){function e(n){for(var t,r=n[0],e=0,u=r.length;u>e;++e)t=r[e],0>t&&(t=~t),(o[t]||(o[t]=[])).push(n);i.push(n)}var o={},i=[],a=[];return r.forEach(function(n){"Polygon"===n.type?e(n.arcs):"MultiPolygon"===n.type&&n.arcs.forEach(e)}),i.forEach(function(n){if(!n.component){var t=[];a.push(t),function r(n){if(!n.component){n.component=t,t.push(n);for(var e,i=n[0],u=0,a=i.length;a>u;++u)o[(e=i[u])<0?~e:e].forEach(r)}}(n)}}),i.forEach(function(n){delete n.component}),u(t,{type:"MultiPolygon",arcs:a.map(function(r){for(var e=0,i=r.length,u=[],a=[];i>e;++e){for(var f,c=r[e],s=c[0],l=0,h=s.length;h>l;++l)f=s[l],1===o[0>f?~f:f].length&&u.push(f);for(var l=1,h=c.length;h>l;++l)a.push(c[l])}return a.unshift(n(t,u)[0]),a})})}function o(n,t){return"GeometryCollection"===t.type?{type:"FeatureCollection",features:t.geometries.map(function(t){return i(n,t)})}:i(n,t)}function i(n,t){var r={type:"Feature",id:t.id,properties:t.properties||{},geometry:u(n,t)};return null==t.id&&delete r.id,r}function u(n,t){function r(n,t){t.length&&t.pop();for(var r,e=s[0>n?~n:n],o=0,i=e.length;i>o;++o)t.push(r=e[o].slice()),c(r,o);0>n&&a(t,i)}function e(n){return n=n.slice(),c(n,0),n}function o(n){for(var t=[],e=0,o=n.length;o>e;++e)r(n[e],t);return t.length<2&&t.push(t[0].slice()),t}function i(n){for(var t=o(n);t.length<4;)t.push(t[0].slice());return t}function u(n){return n.map(i)}function f(n){var t=n.type;return"GeometryCollection"===t?{type:t,geometries:n.geometries.map(f)}:t in l?{type:t,coordinates:l[t](n)}:null}var c=g(n.transform),s=n.arcs,l={Point:function(n){return e(n.coordinates)},MultiPoint:function(n){return n.coordinates.map(e)},LineString:function(n){return o(n.arcs)},MultiLineString:function(n){return n.arcs.map(o)},Polygon:function(n){return u(n.arcs)},MultiPolygon:function(n){return n.arcs.map(u)}};return f(t)}function a(n,t){for(var r,e=n.length,o=e-t;o<--e;)r=n[o],n[o++]=n[e],n[e]=r}function f(n,t){for(var r=0,e=n.length;e>r;){var o=r+e>>>1;n[o]<t?r=o+1:e=o}return r}function c(n){function t(n,t){n.forEach(function(n){0>n&&(n=~n);var r=o[n];r?r.push(t):o[n]=[t]})}function r(n,r){n.forEach(function(n){t(n,r)})}function e(n,t){"GeometryCollection"===n.type?n.geometries.forEach(function(n){e(n,t)}):n.type in u&&u[n.type](n.arcs,t)}var o={},i=n.map(function(){return[]}),u={LineString:t,MultiLineString:r,Polygon:r,MultiPolygon:function(n,t){n.forEach(function(n){r(n,t)})}};n.forEach(e);for(var a in o)for(var c=o[a],s=c.length,l=0;s>l;++l)for(var h=l+1;s>h;++h){var p,g=c[l],v=c[h];(p=i[g])[a=f(p,v)]!==v&&p.splice(a,0,v),(p=i[v])[a=f(p,g)]!==g&&p.splice(a,0,g)}return i}function s(n,t){function r(n){u.remove(n),n[1][2]=t(n),u.push(n)}var e,o=g(n.transform),i=v(n.transform),u=p(h),a=0;for(t||(t=l),n.arcs.forEach(function(n){var r=[];n.forEach(o);for(var i=1,a=n.length-1;a>i;++i)e=n.slice(i-1,i+2),e[1][2]=t(e),r.push(e),u.push(e);n[0][2]=n[a][2]=1/0;for(var i=0,a=r.length;a>i;++i)e=r[i],e.previous=r[i-1],e.next=r[i+1]});e=u.pop();){var f=e.previous,c=e.next;e[1][2]<a?e[1][2]=a:a=e[1][2],f&&(f.next=c,f[2]=e[2],r(f)),c&&(c.previous=f,c[0]=e[0],r(c))}return n.arcs.forEach(function(n){n.forEach(i)}),n}function l(n){return Math.abs((n[0][0]-n[2][0])*(n[1][1]-n[0][1])-(n[0][0]-n[1][0])*(n[2][1]-n[0][1]))}function h(n,t){return n[1][2]-t[1][2]}function p(n){function t(t){for(var r=o[t];t>0;){var e=(t+1>>1)-1,i=o[e];if(n(r,i)>=0)break;o[i.index=t]=i,o[r.index=t=e]=r}}function r(t){for(var r=o[t];;){var e=t+1<<1,i=e-1,u=t,a=o[u];if(i<o.length&&n(o[i],a)<0&&(a=o[u=i]),e<o.length&&n(o[e],a)<0&&(a=o[u=e]),u===t)break;o[a.index=t]=a,o[r.index=t=u]=r}}var e={},o=[];return e.push=function(){for(var n=0,r=arguments.length;r>n;++n){var e=arguments[n];t(e.index=o.push(e)-1)}return o.length},e.pop=function(){var n=o[0],t=o.pop();return o.length&&(o[t.index=0]=t,r(0)),n},e.remove=function(e){var i=e.index,u=o.pop();return i!==o.length&&(o[u.index=i]=u,(n(u,e)<0?t:r)(i)),i},e}function g(n){if(!n)return d;var t,r,e=n.scale[0],o=n.scale[1],i=n.translate[0],u=n.translate[1];return function(n,a){a||(t=r=0),n[0]=(t+=n[0])*e+i,n[1]=(r+=n[1])*o+u}}function v(n){if(!n)return d;var t,r,e=n.scale[0],o=n.scale[1],i=n.translate[0],u=n.translate[1];return function(n,a){a||(t=r=0);var f=0|(n[0]-i)/e,c=0|(n[1]-u)/o;n[0]=f-t,n[1]=c-r,t=f,r=c}}function d(){}var m={version:"1.5.4",mesh:t,merge:e,feature:o,neighbors:c,presimplify:s};"function"==typeof define&&define.amd?define(m):"object"==typeof module&&module.exports?module.exports=m:this.topojson=m}(); |