nitaku

Following the previous example, this is an attempt to label the countries of the world with the corresponding ISO 3166-1 alpha-2 code.

This turned out to be more difficult than expected, because some countries in disputed areas have no ISO code (represented in this map as red labels). Data from Natural Earth's datasets assign an arbitrary ID to these cases (the string '-99'). That makes it impossible to merge the topoJSON and the TSV provided by Mike Bostock's world atlas back into one, since some entries carry the same identifier.

Moreover, using the country shape's centroid to place the label is less than ideal in many cases (e.g., France).

nitaku

A reference gist for the implementation of a general purpose map of the world in d3 version 4.

The projection of choice is the Winkel Tripel projection, which has a very low average error in representing area, direction, and distance (see this article for more details).

Data is obtained from Mike Bostock's topojson world atlas, which is in turn based on the Natural Earth dataset.

Zooming and panning is enabled via SVG transforms, so no reprojection and clipping operations happen during user interaction.

nitaku

window.AnnotationView = Backbone.D3View.extend
  namespace: null
  tagName: 'div'

  initialize: () ->
    @d3el
      .attr
        class: 'AnnotationView'
    @listenTo @model, 'change:annotations', @render

nitaku

nitaku

nitaku

nitaku

A simple example of a node-link diagram drawn by using a force-directed layout in D3 v4.

nitaku

nitaku

nitaku