A d3 worldmap with own regions, defined by the iso 3166-1 (alpha-3) country code. Uses topojson.merge().
Last active
February 26, 2017 19:36
-
-
Save wiesson/ef18dba71256d526eb42 to your computer and use it in GitHub Desktop.
A simple d3 worldmap with own (merged) regions.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #222; | |
| font-family: sans-serif; | |
| } | |
| .border { | |
| fill: none; | |
| stroke: #d9edf7; | |
| stroke-width: 1px; | |
| } | |
| .regions.selected { | |
| fill: #222; | |
| stroke: none; | |
| transition: all 0.2s ease; | |
| } | |
| .regions.selected:hover { | |
| fill: #d9edf7; | |
| stroke: #d9edf7; | |
| stroke-width: 1px; | |
| } | |
| .legend { | |
| height: 10px; | |
| color: #CCC; | |
| text-align: center; | |
| } | |
| </style> | |
| <body> | |
| <div class="legend"></div> | |
| <div class="view" id="map"></div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| d3.select(window).on("resize", resize); | |
| var width = document.querySelector('#map').offsetWidth; | |
| var mapRatio = 0.7; | |
| var height = width * mapRatio; | |
| var projection = d3.geo.mercator().scale(width / 2 / Math.PI) | |
| .rotate([-11, 0]) | |
| .translate([(width) / 2, height * 1.35 / 2]) | |
| .precision(.1); | |
| var path = d3.geo.path().projection(projection); | |
| var svg = d3.select("#map") | |
| .append("svg") | |
| .attr("preserveAspectRatio", "xMinYMin") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g"); | |
| var sets = [ | |
| { | |
| name: 'Central Europe', | |
| set: d3.set(['BEL', 'CHE', 'DEU', 'AUT', 'ESP', 'FRA', 'ATF', 'GBR', 'GGY', 'JEY', 'FLK', 'SGS', 'GRC', 'MLT', 'IRL', 'ITA', 'LUX', 'NLD', 'AND', 'POL', 'PRT', 'TUR', 'CYP', 'CYN', 'MON', 'ALD', 'IMN', 'LTU', 'LVA', 'EST', 'BLR', 'UKR', 'MDA', 'ROU', 'HUN', 'SVK', 'SVN', 'HRV', 'BIH', 'CZE', 'BGR', 'KOS', 'MKD', 'ALB', 'MNE', 'SRB']), | |
| }, | |
| { | |
| name: 'Northern Europe', | |
| set: d3.set(['DNK', 'FRO', 'FIN', 'GRL', 'ISL', 'NOR', 'SWE']) | |
| }, | |
| { | |
| name: 'North America', | |
| set: d3.set(['CAN', 'MEX', 'USA']) | |
| }, | |
| { | |
| name: 'Caribbean', | |
| set: d3.set(['BLZ', 'CRI', 'CUB', 'GTM', 'HND', 'NIC', 'PAN', 'SLV', 'HTI', 'JAM', 'DOM', 'PRI', 'BHS', 'TCA', 'ATG', 'DMA', 'BRB', 'GRD']) | |
| }, | |
| { | |
| name: 'South America', | |
| set: d3.set(['ARG', 'BOL', 'BRA', 'CHL', 'COL', 'ECU', 'FLK', 'GUY', 'PRY', 'PER', 'SUR', 'URY', 'VEN', 'TTO']) | |
| }, | |
| { | |
| name: 'Africa', | |
| set: d3.set(['AGO', 'BDI', 'BEN', 'BFA', 'BWA', 'CAF', 'CIV', 'CMR', 'COD', 'COD', 'COG', 'COM', 'CPV', 'DJI', 'DZA', 'EGY', 'ERI', 'ETH', 'GAB', 'GHA', 'GIN', 'GMB', 'GNB', 'GNQ', 'KEN', 'LBR', 'LBY', 'LSO', 'MAR', 'MDG', 'MLI', 'MOZ', 'MRT', 'MUS', 'MWI', 'MYT', 'NAM', 'NER', 'NGA', 'REU', 'RWA', 'ESH', 'SDN', 'SDS', 'SEN', 'SHN', 'SHN', 'SLE', 'SOM', 'SOL', 'SSD', 'STP', 'STP', 'SWZ', 'SYC', 'TCD', 'TGO', 'TUN', 'TZA', 'TZA', 'UGA', 'ZAF', 'ZMB', 'ZWE']) | |
| }, | |
| { | |
| name: 'South Pacific', | |
| set: d3.set(['AUS', 'NZL']) | |
| }, | |
| { | |
| name: 'India', | |
| set: d3.set(['IND', 'BGD', 'LKA']) | |
| }, | |
| { | |
| name: 'Orient', | |
| set: d3.set(['AZE', 'ARE', 'QAT', 'IRN', 'AFG', 'PAK', 'BHR', 'SAU', 'YEM', 'OMN', 'SYR', 'JOR', 'IRQ', 'KWT', 'ISR', 'LBN', 'PSX', 'PSR', 'GEO', 'ARM']) | |
| }, | |
| { | |
| name: 'Russia', | |
| set: d3.set(['RUS', 'KAZ', 'UZB', 'TKM', 'KGZ', 'TJK']) | |
| }, | |
| { | |
| name: 'Asia', | |
| set: d3.set(['BTN', 'CHN', 'JPN', 'IDN', 'MNG', 'NPL', 'MMR', 'THA', 'KHM', 'LAO', 'VNM', 'PRK', 'KOR', 'TWN', 'MYS', 'PNG', 'SLB', 'VUT', 'NCL', 'BRN', 'PHL', 'TLS', 'HKG', 'FJI', 'GUM', 'PLW', 'FSM', 'MNP', 'KAS']) | |
| } | |
| ]; | |
| d3.json("countries.json", function (error, w) { | |
| if (error) throw error; | |
| svg.append("path").datum(topojson.merge(w, w.objects.units.geometries.filter(function (d) { | |
| return d.id !== 'ATA'; // Sorry Antarctica | |
| }))) | |
| .attr("class", "border") | |
| .attr("d", path); | |
| for (var i = 0; i < sets.length; i++) { | |
| svg.append("path").datum(topojson.merge(w, w.objects.units.geometries.filter(function (d) { | |
| return sets[i].set.has(d.id); | |
| }))) | |
| .attr('class', "regions selected") | |
| .attr("d", path) | |
| .attr({'data-name': sets[i].name}) | |
| .on('mouseover', function () { | |
| var region = d3.select(this); | |
| document.querySelector('.legend').innerText = region.attr('data-name'); | |
| }).on('mouseout', function () { | |
| document.querySelector('.legend').innerText = ''; | |
| }); | |
| } | |
| }); | |
| function resize() { | |
| // adjust things when the window size changes | |
| width = document.querySelector('#map').offsetWidth; | |
| // width = width - margin.left - margin.right; | |
| height = width * mapRatio; | |
| // update projection | |
| projection.scale(width / 2 / Math.PI) | |
| .translate([(width) / 2, height * 1.35 / 2]) | |
| .precision(.1); | |
| // resize the map container | |
| document.querySelector('svg').setAttribute('width', width); | |
| document.querySelector('svg').setAttribute('height', height); | |
| // resize the map | |
| svg.selectAll('.regions, .border').attr('d', path); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment