neighbor colors

_.md

[ Launch: simple globe ] 4661850 by enjalot
[ Launch: Tributary inlet ] 4661803 by enjalot

config.json

{"description":"neighbor colors","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v0.min.js"},{"name":"d3.geo.projection","url":"http://d3js.org/d3.geo.projection.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"world110.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"extra.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

extra.js

//helper code
topojson.neighbors = function(topology, objects) {
  var objectsByArc = topology.arcs.map(function() { return []; });

  function line(arcs, index) {
    for (var i = 0, n = arcs.length, arc; i < n; ++i) {
      if ((arc = arcs[i]) < 0) arc = ~arc;
      objectsByArc[arc].push(index);
    }
  }

  function polygon(arcs, i) {
    arcs.forEach(function(arc) { line(arc, i); });
  }

  function geometry(o, i) {
    geometryType[o.type](o.arcs, i);
  }

  var geometryType = {
    LineString: line,
    MultiLineString: polygon,
    Polygon: polygon,
    MultiPolygon: function(arcs, i) { arcs.forEach(function(arc) { polygon(arc, i); }); }
  };

  objects.forEach(geometry);

  var neighbors = [];
  objectsByArc.forEach(function(d) {
    if (d.length < 2) return;
    if (!neighbors[d[0]]) neighbors[d[0]] = [];
    if (!neighbors[d[1]]) neighbors[d[1]] = [];
    neighbors[d[0]].push(objects[d[1]]);
    neighbors[d[1]].push(objects[d[0]]);
  });
  return neighbors;
};

inlet.js

//http://bl.ocks.org/4188334

var world = tributary.world110;

var globe = {type: "Sphere"},
  countries = topojson.object(world, world.objects.countries).geometries;

 var neighbors = topojson.neighbors(world, world.objects.countries.geometries),
    //colors = d3.scale.category10().range().map(function(c) { c = d3.hcl(c); c.c *= .5; c.h = c.h / 2 + 230; return c; }),
     colors = [
       "#69D382",
       "#4D6CBB",
       "#3838E4",
       "#2DC0A3",
       "#50B2C5",
       "#63AEBD"
      ],
      nColors = colors.length,
      colorByObject = {};

  world.objects.countries.geometries.forEach(function(o, index) {
    var oNeighbours = neighbors[index] || [],
        m = oNeighbours.length;
    nextColor:
    for (var i = 0; i < nColors; ++i) {
      var color = colors[i];
      for (var j = 0; j < m; ++j) {
        if (colorByObject[oNeighbours[j].id] === color) continue nextColor;
      }
      colorByObject[o.id] = color;
      break;
    }
  });


var projection = d3.geo.kavrayskiy7()
    .scale(130)
    .translate([398, 352])
    .rotate([0,0,0])

var graticule = d3.geo.graticule();

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

var svg = d3.select("svg");


svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

svg.append("path")
    .datum(graticule.outline)
    .attr("class", "graticule outline")
    .attr("d", path);

svg.selectAll("path.country")
.data(countries)
.enter()
.append("path")
.classed("country", true)
.attr("d", path)
.style("fill", function(d,i) { return colorByObject[d.id] });

style.css

.country {
  fill: #ccc;
  stroke: #FFFFFF;
  stroke-width: 0.5px;
  stroke-linejoin: round;
}

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

.graticule.outline {
  stroke: #333;
  stroke-opacity: 1;
  stroke-width: 1.5px;
}

world110.json