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

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/0.3.5/composite-projections.min.js"></script>

Using bower

The bower package will install the production files, without tests or building options:
bower install d3-composite-projections

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

npm install -g gulp

gulp
This will download all the dependencies, the test files, and build and run the tests.

Example

Code:

var width = 900,
height = 500;
var projection = d3.geo.conicConformalFrance();

var path = d3.geo.path()
    .projection(projection);

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

d3.json("france.json", function(error, regions) {
  var land = topojson.feature(regions, regions.objects.regions);

svg.selectAll("path")
  .data(land.features)
  .enter()
  .append("path")
  .attr("d", path)
  .style("stroke","#000")
  .style("stroke-width",".5px")
  .style("fill","#aca")
  .on("mouseover", function(d,i) {
    d3.select(this)
      .transition()
      .style("fill", "red");
    })
  .on("mouseout", function(d,i) {
    d3.select(this)
      .transition()
      .style("fill", "#aca");
    });

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

});