skysat-coverage-map

.block

license: mit

agriculture-format.csv

cities-format.csv

d3-legend.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var helper = require('./legend');

module.exports = function(){

  var scale = d3.scale.linear(),
    shape = "rect",
    shapeWidth = 15,
    shapeHeight = 15,
    shapeRadius = 10,
    shapePadding = 2,
    cells = [5],
    labels = [],
    classPrefix = "",
    useClass = false,
    title = "",
    labelFormat = d3.format(".01f"),
    labelOffset = 10,
    labelAlign = "middle",
    labelDelimiter = "to",
    orient = "vertical",
    ascending = false,
    path,
    legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");

    function legend(svg){

      var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter),
        legendG = svg.selectAll('g').data([scale]);

      legendG.enter().append('g').attr('class', classPrefix + 'legendCells');


      var cell = legendG.selectAll("." + classPrefix + "cell").data(type.data),
        cellEnter = cell.enter().append("g", ".cell").attr("class", classPrefix + "cell").style("opacity", 1e-6),
        shapeEnter = cellEnter.append(shape).attr("class", classPrefix + "swatch"),
        shapes = cell.select("g." + classPrefix + "cell " + shape);

      //add event handlers
      helper.d3_addEvents(cellEnter, legendDispatcher);

      cell.exit().transition().style("opacity", 0).remove();

      helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, path);

      helper.d3_addText(legendG, cellEnter, type.labels, classPrefix)

      // sets placement
      var text = cell.select("text"),
        shapeSize = shapes[0].map( function(d){ return d.getBBox(); });

      //sets scale
      //everything is fill except for line which is stroke,
      if (!useClass){
        if (shape == "line"){
          shapes.style("stroke", type.feature);
        } else {
          shapes.style("fill", type.feature);
        }
      } else {
        shapes.attr("class", function(d){ return classPrefix + "swatch " + type.feature(d); });
      }

      var cellTrans,
      textTrans,
      textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;

      //positions cells and text
      if (orient === "vertical"){
        cellTrans = function(d,i) { return "translate(0, " + (i * (shapeSize[i].height + shapePadding)) + ")"; };
        textTrans = function(d,i) { return "translate(" + (shapeSize[i].width + shapeSize[i].x +
          labelOffset) + "," + (shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };

      } else if (orient === "horizontal"){
        cellTrans = function(d,i) { return "translate(" + (i * (shapeSize[i].width + shapePadding)) + ",0)"; }
        textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign  + shapeSize[i].x) +
          "," + (shapeSize[i].height + shapeSize[i].y + labelOffset + 8) + ")"; };
      }

      helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
      helper.d3_title(svg, legendG, title, classPrefix);

      cell.transition().style("opacity", 1);

    }



  legend.scale = function(_) {
    if (!arguments.length) return scale;
    scale = _;
    return legend;
  };

  legend.cells = function(_) {
    if (!arguments.length) return cells;
    if (_.length > 1 || _ >= 2 ){
      cells = _;
    }
    return legend;
  };

  legend.shape = function(_, d) {
    if (!arguments.length) return shape;
    if (_ == "rect" || _ == "circle" || _ == "line" || (_ == "path" && (typeof d === 'string')) ){
      shape = _;
      path = d;
    }
    return legend;
  };

  legend.shapeWidth = function(_) {
    if (!arguments.length) return shapeWidth;
    shapeWidth = +_;
    return legend;
  };

  legend.shapeHeight = function(_) {
    if (!arguments.length) return shapeHeight;
    shapeHeight = +_;
    return legend;
  };

  legend.shapeRadius = function(_) {
    if (!arguments.length) return shapeRadius;
    shapeRadius = +_;
    return legend;
  };

  legend.shapePadding = function(_) {
    if (!arguments.length) return shapePadding;
    shapePadding = +_;
    return legend;
  };

  legend.labels = function(_) {
    if (!arguments.length) return labels;
    labels = _;
    return legend;
  };

  legend.labelAlign = function(_) {
    if (!arguments.length) return labelAlign;
    if (_ == "start" || _ == "end" || _ == "middle") {
      labelAlign = _;
    }
    return legend;
  };

  legend.labelFormat = function(_) {
    if (!arguments.length) return labelFormat;
    labelFormat = _;
    return legend;
  };

  legend.labelOffset = function(_) {
    if (!arguments.length) return labelOffset;
    labelOffset = +_;
    return legend;
  };

  legend.labelDelimiter = function(_) {
    if (!arguments.length) return labelDelimiter;
    labelDelimiter = _;
    return legend;
  };

  legend.useClass = function(_) {
    if (!arguments.length) return useClass;
    if (_ === true || _ === false){
      useClass = _;
    }
    return legend;
  };

  legend.orient = function(_){
    if (!arguments.length) return orient;
    _ = _.toLowerCase();
    if (_ == "horizontal" || _ == "vertical") {
      orient = _;
    }
    return legend;
  };

  legend.ascending = function(_) {
    if (!arguments.length) return ascending;
    ascending = !!_;
    return legend;
  };

  legend.classPrefix = function(_) {
    if (!arguments.length) return classPrefix;
    classPrefix = _;
    return legend;
  };

  legend.title = function(_) {
    if (!arguments.length) return title;
    title = _;
    return legend;
  };

  d3.rebind(legend, legendDispatcher, "on");

  return legend;

};

},{"./legend":2}],2:[function(require,module,exports){
module.exports = {

  d3_identity: function (d) {
    return d;
  },

  d3_mergeLabels: function (gen, labels) {

      if(labels.length === 0) return gen;

      gen = (gen) ? gen : [];

      var i = labels.length;
      for (; i < gen.length; i++) {
        labels.push(gen[i]);
      }
      return labels;
    },

  d3_linearLegend: function (scale, cells, labelFormat) {
    var data = [];

    if (cells.length > 1){
      data = cells;

    } else {
      var domain = scale.domain(),
      increment = (domain[domain.length - 1] - domain[0])/(cells - 1),
      i = 0;

      for (; i < cells; i++){
        data.push(domain[0] + i*increment);
      }
    }

    var labels = data.map(labelFormat);

    return {data: data,
            labels: labels,
            feature: function(d){ return scale(d); }};
  },

  d3_quantLegend: function (scale, labelFormat, labelDelimiter) {
    var labels = scale.range().map(function(d){
      var invert = scale.invertExtent(d),
      a = labelFormat(invert[0]),
      b = labelFormat(invert[1]);

      // if (( (a) && (a.isNan()) && b){
      //   console.log("in initial statement")
        return labelFormat(invert[0]) + " " + labelDelimiter + " " + labelFormat(invert[1]);
      // } else if (a || b) {
      //   console.log('in else statement')
      //   return (a) ? a : b;
      // }

    });

    return {data: scale.range(),
            labels: labels,
            feature: this.d3_identity
          };
  },

  d3_ordinalLegend: function (scale) {
    return {data: scale.domain(),
            labels: scale.domain(),
            feature: function(d){ return scale(d); }};
  },

  d3_drawShapes: function (shape, shapes, shapeHeight, shapeWidth, shapeRadius, path) {
    if (shape === "rect"){
        shapes.attr("height", shapeHeight).attr("width", shapeWidth);

    } else if (shape === "circle") {
        shapes.attr("r", shapeRadius)//.attr("cx", shapeRadius).attr("cy", shapeRadius);

    } else if (shape === "line") {
        shapes.attr("x1", 0).attr("x2", shapeWidth).attr("y1", 0).attr("y2", 0);

    } else if (shape === "path") {
      shapes.attr("d", path);
    }
  },

  d3_addText: function (svg, enter, labels, classPrefix){
    enter.append("text").attr("class", classPrefix + "label");
    svg.selectAll("g." + classPrefix + "cell text." + classPrefix + "label")
      .data(labels).text(this.d3_identity);
  },

  d3_calcType: function (scale, ascending, cells, labels, labelFormat, labelDelimiter){
    var type = scale.ticks ?
            this.d3_linearLegend(scale, cells, labelFormat) : scale.invertExtent ?
            this.d3_quantLegend(scale, labelFormat, labelDelimiter) : this.d3_ordinalLegend(scale);

    type.labels = this.d3_mergeLabels(type.labels, labels);

    if (ascending) {
      type.labels = this.d3_reverse(type.labels);
      type.data = this.d3_reverse(type.data);
    }

    return type;
  },

  d3_reverse: function(arr) {
    var mirror = [];
    for (var i = 0, l = arr.length; i < l; i++) {
      mirror[i] = arr[l-i-1];
    }
    return mirror;
  },

  d3_placement: function (orient, cell, cellTrans, text, textTrans, labelAlign) {
    cell.attr("transform", cellTrans);
    text.attr("transform", textTrans);
    if (orient === "horizontal"){
      text.style("text-anchor", labelAlign);
    }
  },

  d3_addEvents: function(cells, dispatcher){
    var _ = this;

      cells.on("mouseover.legend", function (d) { _.d3_cellOver(dispatcher, d, this); })
          .on("mouseout.legend", function (d) { _.d3_cellOut(dispatcher, d, this); })
          .on("click.legend", function (d) { _.d3_cellClick(dispatcher, d, this); });
  },

  d3_cellOver: function(cellDispatcher, d, obj){
    cellDispatcher.cellover.call(obj, d);
  },

  d3_cellOut: function(cellDispatcher, d, obj){
    cellDispatcher.cellout.call(obj, d);
  },

  d3_cellClick: function(cellDispatcher, d, obj){
    cellDispatcher.cellclick.call(obj, d);
  },

  d3_title: function(svg, cellsSvg, title, classPrefix){
    if (title !== ""){

      var titleText = svg.selectAll('text.' + classPrefix + 'legendTitle');

      titleText.data([title])
        .enter()
        .append('text')
        .attr('class', classPrefix + 'legendTitle');

        svg.selectAll('text.' + classPrefix + 'legendTitle')
            .text(title)

      var yOffset = svg.select('.' + classPrefix + 'legendTitle')
          .map(function(d) { return d[0].getBBox().height})[0],
      xOffset = -cellsSvg.map(function(d) { return d[0].getBBox().x})[0];

      cellsSvg.attr('transform', 'translate(' + xOffset + ',' + (yOffset + 10) + ')');

    }
  }
}

},{}],3:[function(require,module,exports){
var helper = require('./legend');

module.exports =  function(){

  var scale = d3.scale.linear(),
    shape = "rect",
    shapeWidth = 15,
    shapePadding = 2,
    cells = [5],
    labels = [],
    useStroke = false,
    classPrefix = "",
    title = "",
    labelFormat = d3.format(".01f"),
    labelOffset = 10,
    labelAlign = "middle",
    labelDelimiter = "to",
    orient = "vertical",
    ascending = false,
    path,
    legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");

    function legend(svg){

      var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter),
        legendG = svg.selectAll('g').data([scale]);

      legendG.enter().append('g').attr('class', classPrefix + 'legendCells');


      var cell = legendG.selectAll("." + classPrefix + "cell").data(type.data),
        cellEnter = cell.enter().append("g", ".cell").attr("class", classPrefix + "cell").style("opacity", 1e-6),
        shapeEnter = cellEnter.append(shape).attr("class", classPrefix + "swatch"),
        shapes = cell.select("g." + classPrefix + "cell " + shape);

      //add event handlers
      helper.d3_addEvents(cellEnter, legendDispatcher);

      cell.exit().transition().style("opacity", 0).remove();

      //creates shape
      if (shape === "line"){
        helper.d3_drawShapes(shape, shapes, 0, shapeWidth);
        shapes.attr("stroke-width", type.feature);
      } else {
        helper.d3_drawShapes(shape, shapes, type.feature, type.feature, type.feature, path);
      }

      helper.d3_addText(legendG, cellEnter, type.labels, classPrefix)

      //sets placement
      var text = cell.select("text"),
        shapeSize = shapes[0].map(
          function(d, i){
            var bbox = d.getBBox()
            var stroke = scale(type.data[i]);

            if (shape === "line" && orient === "horizontal") {
              bbox.height = bbox.height + stroke;
            } else if (shape === "line" && orient === "vertical"){
              bbox.width = bbox.width;
            }

            return bbox;
        });

      var maxH = d3.max(shapeSize, function(d){ return d.height + d.y; }),
      maxW = d3.max(shapeSize, function(d){ return d.width + d.x; });

      var cellTrans,
      textTrans,
      textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;

      //positions cells and text
      if (orient === "vertical"){

        cellTrans = function(d,i) {
            var height = d3.sum(shapeSize.slice(0, i + 1 ), function(d){ return d.height; });
            return "translate(0, " + (height + i*shapePadding) + ")"; };

        textTrans = function(d,i) { return "translate(" + (maxW + labelOffset) + "," +
          (shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };

      } else if (orient === "horizontal"){
        cellTrans = function(d,i) {
            var width = d3.sum(shapeSize.slice(0, i + 1 ), function(d){ return d.width; });
            return "translate(" + (width + i*shapePadding) + ",0)"; };

        textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign  + shapeSize[i].x) + "," +
              (maxH + labelOffset ) + ")"; };
      }

      helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
      helper.d3_title(svg, legendG, title, classPrefix);

      cell.transition().style("opacity", 1);

    }

  legend.scale = function(_) {
    if (!arguments.length) return scale;
    scale = _;
    return legend;
  };

  legend.cells = function(_) {
    if (!arguments.length) return cells;
    if (_.length > 1 || _ >= 2 ){
      cells = _;
    }
    return legend;
  };


  legend.shape = function(_, d) {
    if (!arguments.length) return shape;
    if (_ == "rect" || _ == "circle" || _ == "line" ){
      shape = _;
      path = d;
    }
    return legend;
  };

  legend.shapeWidth = function(_) {
    if (!arguments.length) return shapeWidth;
    shapeWidth = +_;
    return legend;
  };

  legend.shapePadding = function(_) {
    if (!arguments.length) return shapePadding;
    shapePadding = +_;
    return legend;
  };

  legend.labels = function(_) {
    if (!arguments.length) return labels;
    labels = _;
    return legend;
  };

  legend.labelAlign = function(_) {
    if (!arguments.length) return labelAlign;
    if (_ == "start" || _ == "end" || _ == "middle") {
      labelAlign = _;
    }
    return legend;
  };

  legend.labelFormat = function(_) {
    if (!arguments.length) return labelFormat;
    labelFormat = _;
    return legend;
  };

  legend.labelOffset = function(_) {
    if (!arguments.length) return labelOffset;
    labelOffset = +_;
    return legend;
  };

  legend.labelDelimiter = function(_) {
    if (!arguments.length) return labelDelimiter;
    labelDelimiter = _;
    return legend;
  };

  legend.orient = function(_){
    if (!arguments.length) return orient;
    _ = _.toLowerCase();
    if (_ == "horizontal" || _ == "vertical") {
      orient = _;
    }
    return legend;
  };

  legend.ascending = function(_) {
    if (!arguments.length) return ascending;
    ascending = !!_;
    return legend;
  };

  legend.classPrefix = function(_) {
    if (!arguments.length) return classPrefix;
    classPrefix = _;
    return legend;
  };

  legend.title = function(_) {
    if (!arguments.length) return title;
    title = _;
    return legend;
  };

  d3.rebind(legend, legendDispatcher, "on");

  return legend;

};

},{"./legend":2}],4:[function(require,module,exports){
var helper = require('./legend');

module.exports = function(){

  var scale = d3.scale.linear(),
    shape = "path",
    shapeWidth = 15,
    shapeHeight = 15,
    shapeRadius = 10,
    shapePadding = 5,
    cells = [5],
    labels = [],
    classPrefix = "",
    useClass = false,
    title = "",
    labelFormat = d3.format(".01f"),
    labelAlign = "middle",
    labelOffset = 10,
    labelDelimiter = "to",
    orient = "vertical",
    ascending = false,
    legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");

    function legend(svg){

      var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter),
        legendG = svg.selectAll('g').data([scale]);

      legendG.enter().append('g').attr('class', classPrefix + 'legendCells');

      var cell = legendG.selectAll("." + classPrefix + "cell").data(type.data),
        cellEnter = cell.enter().append("g", ".cell").attr("class", classPrefix + "cell").style("opacity", 1e-6),
        shapeEnter = cellEnter.append(shape).attr("class", classPrefix + "swatch"),
        shapes = cell.select("g." + classPrefix + "cell " + shape);

      //add event handlers
      helper.d3_addEvents(cellEnter, legendDispatcher);

      //remove old shapes
      cell.exit().transition().style("opacity", 0).remove();

      helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, type.feature);
      helper.d3_addText(legendG, cellEnter, type.labels, classPrefix)

      // sets placement
      var text = cell.select("text"),
        shapeSize = shapes[0].map( function(d){ return d.getBBox(); });

      var maxH = d3.max(shapeSize, function(d){ return d.height; }),
      maxW = d3.max(shapeSize, function(d){ return d.width; });

      var cellTrans,
      textTrans,
      textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;

      //positions cells and text
      if (orient === "vertical"){
        cellTrans = function(d,i) { return "translate(0, " + (i * (maxH + shapePadding)) + ")"; };
        textTrans = function(d,i) { return "translate(" + (maxW + labelOffset) + "," +
              (shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };

      } else if (orient === "horizontal"){
        cellTrans = function(d,i) { return "translate(" + (i * (maxW + shapePadding)) + ",0)"; };
        textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign  + shapeSize[i].x) + "," +
              (maxH + labelOffset ) + ")"; };
      }

      helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
      helper.d3_title(svg, legendG, title, classPrefix);
      cell.transition().style("opacity", 1);

    }


  legend.scale = function(_) {
    if (!arguments.length) return scale;
    scale = _;
    return legend;
  };

  legend.cells = function(_) {
    if (!arguments.length) return cells;
    if (_.length > 1 || _ >= 2 ){
      cells = _;
    }
    return legend;
  };

  legend.shapePadding = function(_) {
    if (!arguments.length) return shapePadding;
    shapePadding = +_;
    return legend;
  };

  legend.labels = function(_) {
    if (!arguments.length) return labels;
    labels = _;
    return legend;
  };

  legend.labelAlign = function(_) {
    if (!arguments.length) return labelAlign;
    if (_ == "start" || _ == "end" || _ == "middle") {
      labelAlign = _;
    }
    return legend;
  };

  legend.labelFormat = function(_) {
    if (!arguments.length) return labelFormat;
    labelFormat = _;
    return legend;
  };

  legend.labelOffset = function(_) {
    if (!arguments.length) return labelOffset;
    labelOffset = +_;
    return legend;
  };

  legend.labelDelimiter = function(_) {
    if (!arguments.length) return labelDelimiter;
    labelDelimiter = _;
    return legend;
  };

  legend.orient = function(_){
    if (!arguments.length) return orient;
    _ = _.toLowerCase();
    if (_ == "horizontal" || _ == "vertical") {
      orient = _;
    }
    return legend;
  };

  legend.ascending = function(_) {
    if (!arguments.length) return ascending;
    ascending = !!_;
    return legend;
  };

  legend.classPrefix = function(_) {
    if (!arguments.length) return classPrefix;
    classPrefix = _;
    return legend;
  };

  legend.title = function(_) {
    if (!arguments.length) return title;
    title = _;
    return legend;
  };

  d3.rebind(legend, legendDispatcher, "on");

  return legend;

};

},{"./legend":2}],5:[function(require,module,exports){
d3.legend = {
  color: require('./color'),
  size: require('./size'),
  symbol: require('./symbol')
};
},{"./color":1,"./size":3,"./symbol":4}]},{},[5]);

drybulk-format.csv

index.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
g {
  stroke: white;
  stroke-width: 0.3px;
  fill: rgb(239,239,239);
}

g.cell {
  fill: rgba(0, 98, 102, 0.8);
  stroke: white;
}

text.legendTitle, text.label {
  font: 13px sans-serif;
  font-family: 'Lato', sans-serif;
  color: black;
  stroke: none;
  fill: gray;
}

svg {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

svg:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

div.tooltip {
  position: absolute;
  text-align: center;
  padding: 10px;
  font: 12px sans-serif;
  font-family: 'Lato', sans-serif;
  color: rgb(79, 82, 88);
  background: rgb(255, 255, 255);
  border: 0px;
  border-radius: 2px;
  line-height: 16px;
  pointer-events: none;
}

button {
  width: 2rem;
  border-radius: 0;
  box-shadow: none;
  font-size: 1.5em;
  font-weight: 400;
  text-align: center;
  color: gray;
}

#parentDiv {
  position: relative;
  width: 1200px;
  height: 380px;
  border: 1px solid lightgray;
  background-color: rgb(249,249,249); <!-- rgb(51,51,51); OR #fff; OR rgb(249,249,249) -->
}

#zoomButtons {
  position: absolute;
  bottom: 0;
  right: 0;
}

</style>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="d3-legend.js"></script>

<div id="parentDiv">
	<div id="zoomButtons">
		<button id="zoom_in">+</button><br>
		<button id="zoom_out">-</button>
	</div>
</div>

<script>
var width = 1200, // 860
    height = 380;

var projection = d3.geoRobinson()
    .center([-59, -9])
    .scale(170) //280
    .rotate([0,0]);

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

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

var div = d3.select("body")
		.append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

var circleScale = d3.scale.linear()
  .domain([1, 708])
  .range([3,13]);

var g = svg.append("g"); // world background json
var	g2 = svg.append("g"); // countries json
var	g3 = svg.append("g"); // oil csv
var g4 = svg.append("g"); // ports csv
var g5 = svg.append("g"); // cities csv
var g6 = svg.append("g"); // retail csv
var g7 = svg.append("g"); // supply chain csv
var g8 = svg.append("g"); // agriculture csv
var g9 = svg.append("g"); // social impact csv
var g10 = svg.append("g"); // dry bulk and mines csv
var g11 = svg.append("g"); // intelligence csv

// legend background
var rectangle = svg.append("rect")
	.attr("x", 0) //0
	.attr("y", 294) //518
	.attr("width", 183)
	.attr("height", 86)
	.style("fill", 'rgba(255, 255, 255, 0.7)');

var linearSize = d3.scale.linear().domain([1, 708]).range([3,13]);

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

svg2.append("g")
	.attr("class", "legendSize")
	.attr("transform", "translate(5, 312)"); //1024

var legendSize = d3.legend.size()
	.scale(linearSize)
	.shape('circle')
	.shapePadding(23)
	.labels(["1", "100", "200", "400", "700"])
	.cells([1,100,200,400,700])
	.labelOffset(20)
	.orient('horizontal')
	.title("SkySat Image Quantity");

svg2.select(".legendSize")
	.call(legendSize);

// *************************************************************
// Radio Menu

var defaultColor = "#8F9399"
var hoverColor = "#009DA4"
var pressedColor = "#006266"

var radioMenu = svg.append("rect")
					.attr("id", "radioRect")
					.attr("width", "107px")
					.attr("height", "256px")
					.attr("x", 0)
					.attr("y", 0)
					.attr("fill", "rgba(255, 255, 255, 0.7)");

var allButtons = svg.append("g")
					.attr("id", "toggle");

var labels = ["OIL TANKS", "PORTS", "CITIES", "RETAIL", "SUPPLY CHAIN", "AGRICULTURE", "SOCIAL IMPACT", "BULK/MINES", "INTELLIGENCE", "FULL ARCHIVE"];

var buttonGroups = allButtons.selectAll("g.button")
					.data(labels)
					.enter()
					.append("g")
					.attr("class", "button")
					.attr("id", function(d){
						var theID = d.replace(/\s/g, '');
						return theID;
						}) 
					.style("cursor", "pointer")
					.on("click", function(d,i) { // (d,i)
						updateButtonColors(d3.select(this), d3.select(this.parentNode))
						if (d == "OIL TANKS") {
							g3.style('display', 'inline')
							g4.style('display', 'none')
							g5.style('display', 'none')
							g6.style('display', 'none')
							g7.style('display', 'none')
							g8.style('display', 'none')
							g9.style('display', 'none')
							g10.style('display', 'none')
							g11.style('display', 'none')
						}
						else if (d == "PORTS") {
							g3.style('display', 'none')
							g4.style('display', 'inline')
							g5.style('display', 'none')
							g6.style('display', 'none')
							g7.style('display', 'none')
							g8.style('display', 'none')
							g9.style('display', 'none')
							g10.style('display', 'none')
							g11.style('display', 'none')
						}
						else if (d == "CITIES") {
							g3.style('display', 'none')
							g4.style('display', 'none')
							g5.style('display', 'inline')
							g6.style('display', 'none')
							g7.style('display', 'none')
							g8.style('display', 'none')
							g9.style('display', 'none')
							g10.style('display', 'none')
							g11.style('display', 'none')
						}
						else if (d == "RETAIL") {
							g3.style('display', 'none')
							g4.style('display', 'none')
							g5.style('display', 'none')
							g6.style('display', 'inline')
							g7.style('display', 'none')
							g8.style('display', 'none')
							g9.style('display', 'none')
							g10.style('display', 'none')
							g11.style('display', 'none')
						}
						else if (d == "SUPPLY CHAIN") {
							g3.style('display', 'none')
							g4.style('display', 'none')
							g5.style('display', 'none')
							g6.style('display', 'none')
							g7.style('display', 'inline')
							g8.style('display', 'none')
							g9.style('display', 'none')
							g10.style('display', 'none')
							g11.style('display', 'none')
						}
						else if (d == "AGRICULTURE") {
							g3.style('display', 'none')
							g4.style('display', 'none')
							g5.style('display', 'none')
							g6.style('display', 'none')
							g7.style('display', 'none')
							g8.style('display', 'inline')
							g9.style('display', 'none')
							g10.style('display', 'none')
							g11.style('display', 'none')
						}
						else if (d == "SOCIAL IMPACT") {
							g3.style('display', 'none')
							g4.style('display', 'none')
							g5.style('display', 'none')
							g6.style('display', 'none')
							g7.style('display', 'none')
							g8.style('display', 'none')
							g9.style('display', 'inline')
							g10.style('display', 'none')
							g11.style('display', 'none')
						}
						else if (d == "BULK/MINES") {
							g3.style('display', 'none')
							g4.style('display', 'none')
							g5.style('display', 'none')
							g6.style('display', 'none')
							g7.style('display', 'none')
							g8.style('display', 'none')
							g9.style('display', 'none')
							g10.style('display', 'inline')
							g11.style('display', 'none')
						}
						else if (d == "INTELLIGENCE") {
							g3.style('display', 'none')
							g4.style('display', 'none')
							g5.style('display', 'none')
							g6.style('display', 'none')
							g7.style('display', 'none')
							g8.style('display', 'none')
							g9.style('display', 'none')
							g10.style('display', 'none')
							g11.style('display', 'inline')
						}
						else if (d == "FULL ARCHIVE") {
							g3.style('display', 'inline')
							g4.style('display', 'inline')
							g5.style('display', 'inline')
							g6.style('display', 'inline')
							g7.style('display', 'inline')
							g8.style('display', 'inline')
							g9.style('display', 'inline')
							g10.style('display', 'inline')
							g11.style('display', 'inline')
						}
					})
					.on("mouseover", function() {
						if (d3.select(this).select("rect").attr("fill") != pressedColor) {
							d3.select(this)
								.select("rect")
								.attr("fill", hoverColor);
						}
					})
					.on("mouseout", function() {
						if (d3.select(this).select("rect").attr("fill") != pressedColor) {
							d3.select(this)
								.select("rect")
								.attr("fill", defaultColor);
						}
					});

// hide layers on load
g4.style('display', 'none');
g5.style('display', 'none');
g6.style('display', 'none');
g7.style('display', 'none');
g8.style('display', 'none');
g9.style('display', 'none');
g10.style('display', 'none');
g11.style('display', 'none');

var bWidth = 95; // button width
var bHeight = 20; // button height
var bSpace = 5; // space between buttons
var x0 = 5; // x offset
var y0 = 5; // y offset

// adding a rect to each toggle button group
buttonGroups.append("rect")
			.attr("class", "buttonRect")
			.attr("width", bWidth)
			.attr("height", bHeight)
			.attr("x", x0)
			.attr("y", function(d,i) {return y0+(bHeight+bSpace)*i;})
			// rx and ry for rounded corners
			.attr("fill", defaultColor)

// add text to each toggle button group, centered in rect
buttonGroups.append("text")
			.attr("class", "buttonText")
			.attr("font-family", "Lato")
			.attr("font-size", "12px")
			.attr("x", x0 + bWidth/2)
			.attr("y", function(d,i) {
						return y0 + (bHeight + bSpace)*i + bHeight/2;
						})
			.attr("text-anchor", "middle")
			.attr("dominant-baseline", "central")
			.attr("fill", "#fff")
			.text(function(d) {return d;})

function updateButtonColors(button, parent) {
	parent.selectAll("rect")
			.attr("fill", defaultColor)

	button.select("rect.buttonRect")
			.attr("fill", pressedColor)
}

// default "pressed" radio button (oil tanks for now)
d3.select("g#OILTANKS")
			.selectAll("rect")
			.attr("fill", pressedColor)


d3.json("world-background.json", function(world) {

	// load and display the World
	d3.json("world-110m.json", function(land) {
			
		// load and display the oil tanks
		d3.csv("oil-format.csv", function(data) {
	
			// load and display the ports
			d3.csv("ports-format.csv", function(data) {
		
				d3.csv("cities-format.csv", function(data) {
					
					d3.csv("retail-format.csv", function(data) {
					
						d3.csv("supplychain-format.csv", function(data) {

							d3.csv("agriculture-format.csv", function(data) {
							
								d3.csv("socialimpact-format.csv", function(data) {

									d3.csv("drybulk-format.csv", function(data) {
										
										d3.csv("intelligence-format.csv", function(data) {
										
										
											g11.selectAll("circle")
											   .data(data.filter(function(d){
													if(d.lon == ""){
														return false;
													}
													else {
														return true;
													}
												}))
											   .enter()
											   .append("circle")
											   .attr("cx", function(d) {
													   return projection([d.lon, d.lat])[0];
											   })
											   .attr("cy", function(d) {
													   return projection([d.lon, d.lat])[1];
											   })
											   .attr("r", function(d){
												 return circleScale(d.images);
											   })
											   .on('mouseover', mouseover)
											   .on('mouseout', mouseout)
											   .style("fill", "rgba(0, 98, 102, 0.7)")
											   .style('stroke', 'white')
											   .style('stroke-width', 0.3)
											});	
									
										g10.selectAll("circle")
										   .data(data.filter(function(d){
												if(d.lon == ""){
													return false;
												}
												else {
													return true;
												}
											}))
										   .enter()
										   .append("circle")
										   .attr("cx", function(d) {
												   return projection([d.lon, d.lat])[0];
										   })
										   .attr("cy", function(d) {
												   return projection([d.lon, d.lat])[1];
										   })
										   .attr("r", function(d){
											 return circleScale(d.images);
										   })
										   .on('mouseover', mouseover)
										   .on('mouseout', mouseout)
										   .style("fill", "rgba(0, 98, 102, 0.7)")
										   .style('stroke', 'white')
										   .style('stroke-width', 0.3)
										});
								
									g9.selectAll("circle")
									   .data(data.filter(function(d){
											if(d.lon == ""){
												return false;
											}
											else {
												return true;
											}
										}))
									   .enter()
									   .append("circle")
									   .attr("cx", function(d) {
											   return projection([d.lon, d.lat])[0];
									   })
									   .attr("cy", function(d) {
											   return projection([d.lon, d.lat])[1];
									   })
									   .attr("r", function(d){
										 return circleScale(d.images);
									   })
									   .on('mouseover', mouseover)
									   .on('mouseout', mouseout)
									   .style("fill", "rgba(0, 98, 102, 0.7)")
									   .style('stroke', 'white')
									   .style('stroke-width', 0.3)
									});	
								
								g8.selectAll("circle")
								   .data(data.filter(function(d){
										if(d.lon == ""){
											return false;
										}
										else {
											return true;
										}
									}))
								   .enter()
								   .append("circle")
								   .attr("cx", function(d) {
										   return projection([d.lon, d.lat])[0];
								   })
								   .attr("cy", function(d) {
										   return projection([d.lon, d.lat])[1];
								   })
								   .attr("r", function(d){
									 return circleScale(d.images);
								   })
								   .on('mouseover', mouseover)
								   .on('mouseout', mouseout)
								   .style("fill", "rgba(0, 98, 102, 0.7)")
								   .style('stroke', 'white')
								   .style('stroke-width', 0.3)
								});			
			
							g7.selectAll("circle")
							   .data(data.filter(function(d){
									if(d.lon == ""){
										return false;
									}
									else {
										return true;
									}
								}))
							   .enter()
							   .append("circle")
							   .attr("cx", function(d) {
									   return projection([d.lon, d.lat])[0];
							   })
							   .attr("cy", function(d) {
									   return projection([d.lon, d.lat])[1];
							   })
							   .attr("r", function(d){
								 return circleScale(d.images);
							   })
							   .on('mouseover', mouseover)
							   .on('mouseout', mouseout)
							   .style("fill", "rgba(0, 98, 102, 0.7)")
							   .style('stroke', 'white')
							   .style('stroke-width', 0.3)
							});

						g6.selectAll("circle")
						   .data(data.filter(function(d){
								if(d.lon == ""){
									return false;
								}
								else {
									return true;
								}
							}))
						   .enter()
						   .append("circle")
						   .attr("cx", function(d) {
								   return projection([d.lon, d.lat])[0];
						   })
						   .attr("cy", function(d) {
								   return projection([d.lon, d.lat])[1];
						   })
						   .attr("r", function(d){
							 return circleScale(d.images);
						   })
						   .on('mouseover', mouseover)
						   .on('mouseout', mouseout)
						   .style("fill", "rgba(0, 98, 102, 0.7)")
						   .style('stroke', 'white')
						   .style('stroke-width', 0.3)
						});
					
					g5.selectAll("circle")
					   .data(data.filter(function(d){
							if(d.lon == ""){
								return false;
							}
							else {
								return true;
							}
						}))
					   .enter()
					   .append("circle")
					   .attr("cx", function(d) {
							   return projection([d.lon, d.lat])[0];
					   })
					   .attr("cy", function(d) {
							   return projection([d.lon, d.lat])[1];
					   })
					   .attr("r", function(d){
						 return circleScale(d.images);
					   })
					   .on('mouseover', mouseover)
					   .on('mouseout', mouseout)
					   .style("fill", "rgba(0, 98, 102, 0.7)")
					   .style('stroke', 'white')
					   .style('stroke-width', 0.3)
					});
		
				g4.selectAll("circle")
				   .data(data.filter(function(d){
						if(d.lon == ""){
							return false;
						}
						else {
							return true;
						}
					}))
				   .enter()
				   .append("circle")
				   .attr("cx", function(d) {
						   return projection([d.lon, d.lat])[0];
				   })
				   .attr("cy", function(d) {
						   return projection([d.lon, d.lat])[1];
				   })
				   .attr("r", function(d){
					 return circleScale(d.images);
				   })
				   .on('mouseover', mouseover)
				   .on('mouseout', mouseout)
				   .style("fill", "rgba(0, 98, 102, 0.7)")
				   .style('stroke', 'white')
				   .style('stroke-width', 0.3)
			});
		
			g3.selectAll("circle")
			   .data(data.filter(function(d){
					if(d.lon == ""){
						return false;
					}
					else {
						return true;
					}
				}))
			   .enter()
			   .append("circle")
			   .attr("cx", function(d) {
					   return projection([d.lon, d.lat])[0];
			   })
			   .attr("cy", function(d) {
					   return projection([d.lon, d.lat])[1];
			   })
			   .attr("r", function(d){
				 return circleScale(d.images);
			   })
			   .on('mouseover', mouseover)
			   .on('mouseout', mouseout)
			   .style("fill", "rgba(0, 98, 102, 0.7)")
			   .style('stroke', 'white')
			   .style('stroke-width', 0.3)
		});

		g2.selectAll("path")
			  .data(topojson.object(land, land.objects.countries)
				  .geometries)
			  .enter()
			  .append("path")
			  .attr("d", path)
			  .style("fill", "#c7c7c7");
	});

	g.selectAll("path")
		.data(topojson.object(world, world.objects.worldbackground)
			.geometries)
		.enter()
		.append("path")
		.attr("d", path)
});


// zoom and pan
var zoom = d3.behavior.zoom()
	.scaleExtent([0.8, 3]) // limits zoom range (only change 2nd #)
	.on("zoom", zoomed);
	
function zoomed() {
	g.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g2.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g3.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g4.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g5.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g6.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g7.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g8.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g9.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g10.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);
	g11.attr("transform",
	"translate(" + zoom.translate() + ")" +
	"scale(" + zoom.scale() + ")"
	);

	circleScale.range([3/zoom.scale(), 13/zoom.scale()]);
	
	g3.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
	g4.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
	g5.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
	g6.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
	g7.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
	g8.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
	g9.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
	g10.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
	g11.selectAll("circle")
		.attr("d", path.projection(projection))
		// Keeps circle size the same on zoom
		.attr("r", function(d){
		 return circleScale(d.images);
		})
		
};

function interpolateZoom (translate, scale) {
	var self = this;
	return d3.transition().duration(350).tween("zoom", function() {
		var iTranslate = d3.interpolate(zoom.translate(), translate),
			iScale = d3.interpolate(zoom.scale(), scale);
		return function (t) {
			zoom.scale(iScale(t))
				.translate(iTranslate(t));
			zoomed();
		};
	});
}

function zoomClick() {
	var clicked = d3.event.target,
		direction = 1,
        factor = 0.2,
        target_zoom = 1,
        center = [width / 2, height / 2],
        extent = zoom.scaleExtent(),
        translate = zoom.translate(),
        translate0 = [],
        l = [],
        view = {x: translate[0], y: translate[1], k: zoom.scale()};

    d3.event.preventDefault();
    direction = (this.id === 'zoom_in') ? 1 : -1;
    target_zoom = zoom.scale() * (1 + factor * direction);

    if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; }

    translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
    view.k = target_zoom;
    l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

    view.x += center[0] - l[0];
    view.y += center[1] - l[1];

    interpolateZoom([view.x, view.y], view.k);
}

d3.selectAll('button').on('click', zoomClick);

function mouseover(d, i){
  d3.select(this)
    .style('fill', 'rgba(0, 0, 0, 0.7)')
    .style('stroke', 'white')
	//.style('stroke-width', 0.3)
	.style('cursor', 'auto');
  div.transition()
    .duration(150)
    .style("opacity", 0.9);
  div.text(d.place)
     .style("left", (d3.event.pageX - 50) + "px")     
     .style("top", (d3.event.pageY - 65) + "px");
  div.html("<b>" + d.admin1 + ", " + d.admin2 + "</b>" + "<br/><span>Images: " + d.images + "</span>");
}

function mouseout(d, i){
  g3.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  g4.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  g5.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  g6.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  g7.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  g8.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  g9.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  g10.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  g11.selectAll("circle")
    .style("fill", "rgba(0, 98, 102, 0.7)")
	.style('stroke', 'white')
	.style('stroke-width', 0.3)
  div.transition()        
           .duration(200)      
           .style("opacity", 0);
}

svg.call(zoom).on("wheel.zoom", null);

</script>
</body>
</html>

intelligence-format.csv

oil-format.csv

ports-format.csv

retail-format.csv

socialimpact-format.csv

supplychain-format.csv

world-110m.json

world-background.json