d3.geomap - Create Geographic Maps for the Web

d3.geomap is a library for creating geographic maps that are rendered in a Web browser. d3.geomap is written in JavaScript using features introduced in EcmaScript 6 and later and built on top of D3.js.

Quickstart

Set the charset of your document to utf-8 right at the beginning of the HTML head section, then include the downloaded dependencies, and in the body create a div with the id map.

Setting the charset to utf-8 is mandatory, because d3, d3-geo-projection and several of the topojson files contain characters that may not work with the default encoding otherwise set by the browser.

In the other examples on this site inclusion of this code is assumed and not repeated on every page.

<html>
    <head>
        <meta charset="utf-8">
        <link href="/d3-geomap/css/d3.geomap.css" rel="stylesheet">
        <script src="/d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
        <script src="/d3-geomap/js/d3.geomap.min.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

The JavaScript code you still need to write to create a plain world map, that can be zoomed by clicking on countries looks as follows.

var map = d3.geomap()
    .geofile('/d3-geomap/topojson/world/countries.json');

d3.select('#map')
    .call(map.draw, map);

Either add the above code between script tags after including the dependencies or put it in an external JavaScript file (recommended) and include that. See the map created with this code rendered below. Click on a country to zoom the map.


Example Maps