Interrupted Sinusoidal: 12 lobes

The sinusoidal projection is available as d3.geo.sinusoidal in the geo.projection D3 plugin.

forked from mbostock's block: Interrupted Sinusoidal

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #fcfcfa;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
      height = 500;

var n = 12; // 12 sinusoidal sections
  var w = 360 / n;
  var northern = []
  var southern = []
  d3.range(n).forEach(function(i) {
    var north = [ ];
    var south = [ ];
    // left
    north.push([
      -180 + i * w, 
      0
    ]) 
    // top
    north.push([
      -180 + i * w + w/2,
      90
    ])
    // right
    north.push([
      -180 + i * w + w,
      0
    ])
    
    // left
    south.push([
      -180 + i * w, 
      0
    ]) 
    // top
    south.push([
      -180 + i * w + w/2,
      -90
    ])
    // right
    south.push([
      -180 + i * w + w,
      0
    ])
    northern.push(north)
    southern.push(south)
  })

var projection = d3.geo.interrupt(d3.geo.sinusoidal.raw)
  .lobes([northern, southern])
  /*
      .lobes([
        [ // northern hemisphere
          [[-180,   0], [-100,  90], [ -40,   0]],
          [[ -40,   0], [   0,  90], [  40,   0]],
          [[  40,   0], [ 100,  90], [ 180,   0]]
        ], 
        [ // southern hemisphere
          [[-180,   0], [-100, -90], [ -40,   0]],
          [[ -40,   0], [   0, -90], [  40,   0]],
          [[  40,   0], [ 100, -90], [ 180,   0]]
        ]
      ])
      */
      .rotate([0, 0])
      .scale(150)
      .translate([width / 2, height / 2])
      .precision(.1);

var graticule = d3.geo.graticule();

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

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

var defs = svg.append("defs");

defs.append("path")
      .datum({type: "Sphere"})
      .attr("id", "sphere")
      .attr("d", path);

defs.append("clipPath")
      .attr("id", "clip")
    .append("use")
      .attr("xlink:href", "#sphere");

svg.append("use")
      .attr("class", "stroke")
      .attr("xlink:href", "#sphere");

svg.append("use")
      .attr("class", "fill")
      .attr("xlink:href", "#sphere");

svg.append("path")
      .datum(graticule)
      .attr("class", "graticule")
      .attr("clip-path", "url(#clip)")
      .attr("d", path);

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json", function(error, world) {
    if (error) throw error;

svg.insert("path", ".graticule")
        .datum(topojson.feature(world, world.objects.land))
        .attr("class", "land")
        .attr("clip-path", "url(#clip)")
        .attr("d", path);

svg.insert("path", ".graticule")
        .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
        .attr("class", "boundary")
        .attr("clip-path", "url(#clip)")
        .attr("d", path);
  });

</script>

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/topojson.v1.min.js