| license: gpl-3.0 |
This demonstrates using topojson.merge, a new feature in TopoJSON 1.6, to merge multiple polygons into a single polygon whilst removing interior borders. (An alternative approach is to draw the polygons twice.)
This example is in response to a Stack Overflow question.
| <!DOCTYPE html> | |
| <head> | |
| <title>Block</title> | |
| <meta charset="utf-8"> | |
| <style> | |
| .state { | |
| fill: #ccc; | |
| } | |
| .state-boundary { | |
| fill: none; | |
| stroke: #fff; | |
| } | |
| .state.central { | |
| fill: orange; | |
| stroke: #000; | |
| } | |
| .state.midatlantic { | |
| fill: blue; | |
| stroke: #000; | |
| } | |
| .state.midwest { | |
| fill: green; | |
| stroke: #000; | |
| } | |
| .state.mountain { | |
| fill: purple; | |
| stroke: #000; | |
| } | |
| .state.northeast { | |
| fill: lightblue; | |
| stroke: #000; | |
| } | |
| .state.southeast { | |
| fill: red; | |
| stroke: #000; | |
| } | |
| .state.west { | |
| fill: yellow; | |
| stroke: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://d3js.org/d3-fetch.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-geo.v1.min.js"></script> | |
| <script src="//d3js.org/d3.v5.min.js"></script> | |
| <script src="//d3js.org/topojson.v3.min.js"></script> | |
| <script> | |
| const width = 960, | |
| height = 600; | |
| const projection = d3.geoAlbersUsa() | |
| .scale(1280) | |
| .translate([width / 2, height / 2]); | |
| const path = d3.geoPath() | |
| .projection(projection); | |
| const svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Create region lists based on FIPS ids | |
| const regions = { | |
| central: d3.set([38,46,27,31,19,20,29,40,5]), // ND,SD,MN,NE,IA,KS,MO,OK,AR | |
| midatlantic: d3.set([42,11,10,24,54,51,37,45]), // PA,DC,DE,MD,WV,VA,NC,SC | |
| midwest: d3.set([55,26,17,18,39,21]), // WI,MI,IL,IN,OH,KY | |
| mountain: d3.set([16,30,56,49,8,4,35,48]), // ID,MT,WY,UT,CO,AZ,NM,TX | |
| northeast: d3.set([23,33,50,36,25,44,9,34]), // ME,NH,VT,NY,MA,RI,CT,NJ | |
| southeast: d3.set([47,22,28,1,13,12]), // TN,LA,MS,AL,GA,FL | |
| west: d3.set([53,41,6,32,2,15]) // WA,OR,CA,NV,AK,HI | |
| } | |
| d3.json('us.json').then(function(us) { | |
| svg.append('path') | |
| .datum(topojson.feature(us, us.objects.states)) | |
| .attr('class', 'state') | |
| .attr('d', path); | |
| svg.append('path') | |
| .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) | |
| .attr('class', 'state-boundary') | |
| .attr('d', path); | |
| for(region in regions){ | |
| if (regions.hasOwnProperty(region)) { | |
| let states = regions[region]; | |
| svg.append('path') | |
| .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return states.has(d.id); }))) | |
| .attr('class', `state ${region}`) | |
| .attr('d', path); | |
| } | |
| } | |
| }); | |
| d3.select(self.frameElement).style('height', height + 'px'); | |
| </script> | |
| </body> | |
| </html> |
