Introduction
D3 (Data-Driven Documents) is a JavaScript library for creating interactive data visualizations in web browsers. D3 uses web standards such as HTML, CSS, and SVG to bring data to life through graphical elements such as charts, maps, and plots. It makes it easy to create dynamic and interactive visualizations that are highly customizable and can be easily integrated into web applications.
In addition, D3 allows developers to bind data to the Document Object Model (DOM), and then apply data-driven transformations to the document. This approach gives designers and developers a high level of control over the look and feel of the visualization, and allows for the creation of complex visualizations that are both interactive and responsive.
World Atlas TopoJSON is a geographic data format that is used to represent the shapes of countries, states, and other geopolitical boundaries. It is based on TopoJSON, which is an extension of the popular JSON data format that is optimized for use with geospatial data. The World Atlas TopoJSON data format includes the shapes of the boundaries of countries, states, and other geopolitical entities, encoded as a series of connected lines and arcs.
One of the main benefits of using World Atlas TopoJSON is that it allows for smaller file sizes compared to traditional geographic data formats such as Shapefiles or KML. This is because TopoJSON uses a lossy compression algorithm to reduce the size of the data by removing redundant line segments and arcs. The World Atlas TopoJSON data is also designed to be easily consumable by web-based data visualization tools, such as D3.js, which makes it a popular choice for creating interactive maps and other geospatial visualizations in web applications.
The integration of D3 and World Atlas TopoJSON with the GeoDataSource Country-Region DropDown Menu will be demonstrated in this article. Upon selecting the country and region from the drop-down list, the associated country will be instantly highlighted in the world atlas.
Countries not available in World Atlas TopoJSON
Note that the following list shows the countries that are not available in the World Atlas TopoJSON:
- Bonaire, Sint Eustatius and Saba
- Bouvet Island
- Cocos (Keeling) Islands
- Christmas Island
- French Guiana
- Guadeloupe
- Martinique
- Reunion
- Svalbard and Jan Mayen
- French Southern Territories
- Tokelau
- Mayotte
Integration steps
- Download the GeoDataSource Country-Region DropDown Menu resources at https://github.com/geodatasource/country-region-dropdown-menu
- Run the following code in your site.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Country-Region DropDown Menu</title>
<!-- link for jquery style -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- link for bootstrap style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="assets/js/geodatasource-cr.min.js"></script>
<!-- link to EN language po files -->
<link rel="gettext" type="application/x-po" href="languages/en/LC_MESSAGES/en.po" />
<script type="text/javascript" src="assets/js/Gettext.js"></script>
<!-- D3 Resources -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center" style="margin-bottom:40px;">
<h2>Country-Region DropDown Menu</h2>
</div>
<div class="col-md-12">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<select class="form-control gds-cr" country-data-region-id="gds-cr-one" data-language="en"></select>
</div>
</div>
<div class="form-group">
<label for="gds-cr-one" class="col-sm-2 control-label">Region</label>
<div class="col-sm-10">
<select class="form-control" id="gds-cr-one"></select>
</div>
</div>
</form>
<br/>
<div style="width:100%;overflow:auto;margin-top: 10px;">
<svg id="map" viewBox="0 0 1000 580" style="width:100%;"></svg>
</div>
<script>
(function(){
$("#gds-cr-one").on('change',function() {
var width = 960, height = 500;
var svg = d3.select("#map")
.attr("width", width)
.attr("height", height);
var projection = d3.geoMercator()
.center([0, 30])
.scale(100);
var path = d3.geoPath()
.projection(projection);
var g = svg.append("g");
d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-50m.json").then(function(data) {
var countries = topojson.feature(data, data.objects.countries);
g.selectAll("path")
.data(countries.features)
.enter()
.append("path")
.attr("class", "country")
.attr("d", path)
.attr('fill', function (d) {
// map ISO3166 country name with WorldAtlas
var country_selected = $(".gds-cr").children("option").filter(":selected").text();
if (country_selected == "Antigua and Barbuda") {country_selected = "Antigua and Barb."}
else if (country_selected == "Aland Islands") {country_selected = "Åland"}
else if (country_selected == "Bosnia and Herzegovina") {country_selected = "Bosnia and Herz."}
else if (country_selected == "Saint Barthelemy") {country_selected = "St-Barthélemy"}
else if (country_selected == "Brunei Darussalam") {country_selected = "Brunei"}
else if (country_selected == "Bolivia (Plurinational State of)") {country_selected = "Bolivia"}
else if (country_selected == "Congo (the Democratic Republic of the)") {country_selected = "Dem. Rep. Congo"}
else if (country_selected == "Central African Republic") {country_selected = "Central African Rep."}
else if (country_selected == "Cote d'Ivoire") {country_selected = "Côte d'Ivoire"}
else if (country_selected == "Cook Islands") {country_selected = "Cook Is."}
else if (country_selected == "Dominican Republic") {country_selected = "Dominican Rep."}
else if (country_selected == "Western Sahara") {country_selected = "W. Sahara"}
else if (country_selected == "Falkland Islands (Malvinas)") {country_selected = "Falkland Is."}
else if (country_selected == "Micronesia (Federated States of)") {country_selected = "Micronesia"}
else if (country_selected == "Faroe Islands") {country_selected = "Faeroe Is."}
else if (country_selected == "United Kingdom of Great Britain and Northern Ireland") {country_selected = "United Kingdom"}
else if (country_selected == "Equatorial Guinea") {country_selected = "Eq. Guinea"}
else if (country_selected == "South Georgia and the South Sandwich Islands") {country_selected = "S. Geo. and the Is."}
else if (country_selected == "Heard Island and McDonald Islands") {country_selected = "Heard I. and McDonald Is."}
else if (country_selected == "British Indian Ocean Territory") {country_selected = "Br. Indian Ocean Ter."}
else if (country_selected == "Iran (Islamic Republic of)") {country_selected = "Iran"}
else if (country_selected == "Saint Kitts and Nevis") {country_selected = "St. Kitts and Nevis"}
else if (country_selected == "Korea (the Democratic People's Republic of)") {country_selected = "North Korea"}
else if (country_selected == "Korea (the Republic of)") {country_selected = "South Korea"}
else if (country_selected == "Cayman Islands") {country_selected = "Cayman Is."}
else if (country_selected == "Lao People's Democratic Republic") {country_selected = "Laos"}
else if (country_selected == "Moldova (Republic of)") {country_selected = "Moldova"}
else if (country_selected == "Saint Martin (French Part)") {country_selected = "St-Martin"}
else if (country_selected == "Marshall Islands") {country_selected = "Marshall Is."}
else if (country_selected == "North Macedonia") {country_selected = "Macedonia"}
else if (country_selected == "Northern Mariana Islands") {country_selected = "N. Mariana Is."}
else if (country_selected == "French Polynesia") {country_selected = "Fr. Polynesia"}
else if (country_selected == "Saint Pierre and Miquelon") {country_selected = "St. Pierre and Miquelon"}
else if (country_selected == "Pitcairn") {country_selected = "Pitcairn Is."}
else if (country_selected == "Palestine, State of") {country_selected = "Palestine"}
else if (country_selected == "Russian Federation") {country_selected = "Russia"}
else if (country_selected == "Solomon Islands") {country_selected = "Solomon Is."}
else if (country_selected == "Saint Helena, Ascension and Tristan da Cunha") {country_selected = "Saint Helena"}
else if (country_selected == "South Sudan") {country_selected = "S. Sudan"}
else if (country_selected == "Sao Tome and Principe") {country_selected = "São Tomé and Principe"}
else if (country_selected == "Sint Maarten (Dutch Part)") {country_selected = "Sint Maarten"}
else if (country_selected == "Syrian Arab Republic") {country_selected = "Syria"}
else if (country_selected == "Eswatini") {country_selected = "eSwatini"}
else if (country_selected == "Turks and Caicos Islands") {country_selected = "Turks and Caicos Is."}
else if (country_selected == "Taiwan (Province of China)") {country_selected = "Taiwan"}
else if (country_selected == "Tanzania, United Republic of") {country_selected = "Tanzania"}
else if (country_selected == "United States Minor Outlying Islands") {country_selected = "U.S. Minor Outlying Is."}
else if (country_selected == "Holy See") {country_selected = "Vatican"}
else if (country_selected == "Saint Vincent and the Grenadines") {country_selected = "St. Vin. and Gren."}
else if (country_selected == "Venezuela (Bolivarian Republic of)") {country_selected = "Venezuela"}
else if (country_selected == "Virgin Islands (British)") {country_selected = "British Virgin Is."}
else if (country_selected == "Virgin Islands (U.S.)") {country_selected = "U.S. Virgin Is."}
else if (country_selected == "Viet Nam") {country_selected = "Vietnam"}
else if (country_selected == "Wallis and Futuna") {country_selected = "Wallis and Futuna Is."}
else {country_selected = country_selected}
if (d.properties.name == country_selected) {
return "#FF0000";
} else {
return "#d9d8d8";
}
})
.style('stroke', '#333333')
.style('stroke-width', 0.5);
});
});
})();
</script>
</div>
</div>
</div>
</body>
</html>- Choose a country and a region from the dropdown menu.
- Depending on the country and region you choose, a dropdown menu with a country highlighted world atlas will be visible.
- Done.
Conclusion
Whether you are creating simple charts or complex data visualizations, D3 and World Atlas TopoJSON provide the tools and flexibility to bring your data to life in new and exciting ways. It is a useful data format for developers and data scientists who want to work with geographic data in web-based applications, and it provides a convenient and efficient way to represent and visualize the shapes of geopolitical boundaries.
Looking for World Map Display?
Download our country region dropdown menu to create interactive data visualizations