d3-composite-projections

Set of d3 projections for showing countries' distant lands together

France Conic Conformal

Drawing choropleth maps is difficult in some countries when parts of them are far away from the mainland

View on Github
This library works with d3js v4. The old version worked with d3js v3, check it here.

Using the projection

Use the composite projections as any other D3 projection. They are based in the included AlbersUsa:

var projection = d3.geo.conicConformalFrance();

The following regions have available projections right now:

Adding the composite projection borders

To draw the separation between projection regions, you can use getCompositionBorders(), which returns the calculated path:

svg
  .append("path")
    .style("fill","none")
    .style("stroke","#000")
    .attr("d", projection.getCompositionBorders());

Installation

Getting the files

You can get the files just by cloning the repository:
git clone https://github.com/rveciana/d3-composite-projections.git
or downloading the composite-projections.js or composite-projections.min.js files.

Using cdnjs

You can link the files from your web page to cdnjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/1.0.1/composite-projections.min.js"></script>
Or unpkg:
<script src="https://unpkg.com/d3-composite-projections@1.0.1"></script>

Using NPM

To install the projections with npm so you can run the tests, use it with node, etc, just run:
npm install d3-composite-projections

Example

Code using node:

var d3_composite = require("d3-composite-projections");
var d3_geo = require("d3-geo");
var d3_request = require("d3-request");
var d3_selection = require("d3-selection");
var d3_transition = require("d3-transition");
var topojson = require("topojson");

var width = 960;
var height = 500;

var projection = d3_composite.geoConicConformalFrance();

var path = d3_geo.geoPath()
    .projection(projection);

var svg = d3_selection.select("#example_map").append("svg")
    .attr("width", width)
    .attr("height", height);

var t = d3_transition.transition()
  .on("interrupt", function(d,i){
    console.info(i);
  });

d3_request.json("france.json", function(error, topojsonData) {
    var us = topojson.feature(topojsonData, topojsonData.objects.regions);

    svg.selectAll(".region")
      .data(us.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class","region")
      .style("fill", "#aca")
      .style("stroke", "#000")
      .style("stroke-width", "0.5px")
      .on("mouseover", function(d,i) {
        d3_selection.select(this)
          .transition(t)
          .style("fill", "red");
        })
      .on("mouseout", function(d,i) {
        d3_selection.select(this).interrupt();
        d3_selection.select(this)
          .transition(t)
          .style("fill", "#aca");
        });

      svg
        .append("path")
          .style("fill","none")
          .style("stroke","#f00")
          .attr("d", projection.getCompositionBorders());

});
Create an index.html file:
<!DOCTYPE html>
<meta charset="utf-8">

<body>
<div id="map"></div>

<script src="bundle.js"></script>
Then, use browserify to use it from the browser:
browserify draw.js > bundle.js

Code linking d3js directly:

var width = 960,
    height = 500;

var projection = d3.geoConicConformalFrance();
var path = d3.geoPath()
    .projection(projection);

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

    var t = d3.transition();
d3.json("france.json", function(error, france) {
  var france = topojson.feature(france, france.objects.regions);
  svg.selectAll(".region")
      .data(france.features)
      .enter()
      .append("path")
      .attr("class", "region")
      .attr("d", path)
      .style("fill", "#aca")
      .style("stroke", "#000")
      .style("stroke-width", "0.5px")
      .on("mouseover", function(d,i) {
        d3.select(this).interrupt();
        d3.select(this)
          .transition(t)
          .style("fill", "red");
        })
      .on("mouseout", function(d,i) {
        d3.select(this).interrupt();
        d3.select(this)
          .transition(t)
          .style("fill", "#aca");
        });;

  svg
    .append("path")
      .style("fill","none")
      .style("stroke","#f00")
      .attr("d", projection.getCompositionBorders());

});