Contents hide

1.1) Setting Up World Map Using D3 Library

In this tutorial, we will see how to create a world map using d3 JavaScript library. You can find many tutorials on this topic but after going through them, you will be left with some unanswered questions, which are very important to master the art of creating maps using d3.js. I am assuming that you are familiar with d3.js, SVG, and javascript.

Check out the demo on how to create World Map Using D3 JavaScript library.

Implementing D3 JavaScript library

To begin with we need HTML page. Create index.html file and load jquery, d3.js and TopoJSON library.

Note : A div with class map where we are going to render map.

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>World Map</title>
    <style type="text/css">/* Write CSS here */</style>
</head>
<body>
    <!-- render map -->
    <div class="map"></div>
    <!-- render map -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/2.2.0/topojson.min.js"></script>
    <script> /* Write JavaScript Here  */</script>
</body>
</html>

Setting Up World Map Using D3 Library

Write following script in place of ‘Write JavaScript Here’ before closing body tag.


var jMap = $(".map"),
    height = jMap.height(),
    width = jMap.width(),
    mapJsonUrl = 'https://ucarecdn.com/8e1027ea-dafd-4d6c-bf1e-698d305d4760/world110m2.json',
    svg = d3.select(".map").append("svg").attr("width", width).attr("height", height);

Height And Width

Let’s define the height and width of div with a class map where we are going to render map. mapJsonUrl is a data file for the world map which is generated by Mike Bostock using geoJSON and TopoJSON libraries. Generating that data file is out of scope for this article.


svg = d3.select(".map").append("svg").attr("width", width).attr("height", height);

As you can guess above line of code selects the element with a class map and appends SVG element with a height and width that we have already calculated.

Loading Data


d3.json(mapJsonUrl, function (error, worldJson) {
    if (error) throw error;
    var projection = getProjection();
});

Above code block will load world TopoJSON file. The real action starts now.

Setting Projection As you can see that getProjection() method is undefined as of now. Define getProjection and mercatorBounds function as below.


var getProjection = function(worldJson) {
 var scale = 1,
     offset = [ width / 2, height / 2 ],
     projection = d3.geoEquirectangular().scale( scale ).rotate( [0,0] ).center([0,5]).translate( offset ),
     bounds = mercatorBounds( projection ),
     scaleExtent;

    scale = width / (bounds[ 1 ][ 0 ] - bounds[ 0 ][ 0 ]);
    scaleExtent = [ scale, 10 * scale ];

    projection
      .scale( scaleExtent[ 0 ] );

  return projection;
},

mercatorBounds = function(projection) {
  var maxlat = 83,
      yaw = projection.rotate()[ 0 ],
      xymax = projection( [ -yaw + 180 - 1e-6, -maxlat ] ),
      xymin = projection( [ -yaw - 180 + 1e-6, maxlat ] );
   return [ xymin, xymax ];
};

getProjection method takes worldJson as an argument. This argument is nothing but TopoJSON file that we loaded. Before explaining what above methods do, let me explain few terms that we are going to use in this tutorial.

projection: projection is used to project spherical coordinate to our two-dimensional screen. Basically, TopoJSON file provides spherical coordinates in degrees and projection converts it to Cartesian coordinates in pixels.
center: projection.center method takes location([lon,lat]) as an array and sets the projection’s center to the specified location. For example, if I use [0, 5] the map will be centered to 0 degrees West and 5 degrees North. North is for positive values of latitude and South is for negative values of latitude.
translate: The translation offset determines the pixel coordinates of the projection’s center and returns the projection.
scale: sets the projection’s scale factor to the specified value and returns the projection.
rotate: sets the projection’s three-axis rotation to the specified angles λ, φ and γ (longitude, latitude and roll) in degrees and returns the projection.

Read more about projections from official documentation.

getProjection Method

Let’s come back to method getProjection. First, we are just making guess for the projection like this


var center = d3.geoCentroid( worldJson ),
     scale = 1,
     offset = [ width / 2, height / 2 ],
     projection = d3.geoEquirectangular().scale( scale ).rotate( [0,0] ).center([0,5]).translate( offset );

mercatorBounds method calculates the bounds of current projection. Bounds will give us the exact value to translate and scale the projection. Once we have bounds, update the scale of the projection. Calculating bounds and updating projection will make sure that your map will take full dimension of the container provided and will always be centered. This is by far the hardest thing to understand when creating maps in d3. Other tutorials/articles on the internet give hardcoded values for above properties and leave the most difficult part which I explained above.
Till now you haven’t seen anything on your screen. Bear with me, we are almost done. Rest part is easy.

Draw Geography

Define path generator like this


var path = d3.geoPath().projection( projection );
svg.selectAll( 'path.land' )
      .data( topojson.feature( worldJson, worldJson.objects.countries ).features )
      .enter().append( 'path' )
      .attr( 'class', 'land' )
      .attr( 'd', path );

This is the final snippet which draws world map as expected. Here we are binding country data with path elements. topojson.feature( worldJson, worldJson.objects.countries ).features this pulls the data from TopoJSON file which defines the countries.

Beautifying

This map looks bit ugly. Let’s add some styles and make the world beautiful. Add following styles in place of ‘Write CSS here’


html {
  height: 100%;
}

body {
  background: #2c87a9;
  height: inherit;
  margin: 0;
  padding: 0;
}

.map {
  height: 100%;
}

.water {
    fill: none;
}

.land {
    fill: #44ab66;
    stroke: #080808;
    stroke-width: 0.5px;
}
.land:hover {
    fill: #49988d;
    stroke: #080808;
    stroke-width: 1.5px;
}

Check out how our World Map looks Like HERE.

Tags: css3, d3.js, html5, JavaScript, JQuery, js, properties, web api

World Map Using D3 JavaScript library