just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":752,"height":838,"hide":false},"editor_json0":{"vim":false,"emacs":false,"width":735,"height":376,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":1910,"height":120,"hide":false},"endpoint":"tributary","editor_json2":{"vim":false,"emacs":false,"width":1809,"height":114,"hide":false}}

geojson0.json

geojson1.json

inlet.js

d3.selection.prototype.moveToFront = function() { 
    return this.each(function() { 
      this.parentNode.appendChild(this); 
    }); 
  };
  
  
  var defs = g.append('defs');

    var mask = defs.append('mask')
      .attr('id', 'clipper');

	mask
      .append('rect')
      .attr('height', $('body').height())
      .attr('width', $('body').width())
      .style('fill', "#4D4D4D");
      
    mask
      .attr('cy', 100)
      .attr('r', 100)
      .attr('fill', 'white')
      .attr('maskContentUnits', "objectBoundingBox")



var json0 = tributary["geojson0"];
var json1 = tributary["geojson1"];
var texts = tributary["text_data"];

var current;

var tooltip, shapes;

var categories = _.uniq(_.map(json0.features, function(d) { return d.properties.category; }));
var colorScale = d3.scale.ordinal().range(['#5b88a5', '#87af20', '#ffc240', "#DD8000", "#E06A87"]);

var color = function(d, i) {
  return colorScale(d.properties.category);
}

var xy = d3.geo.albers()
    .scale(1200)
	.translate([437, 355]);

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


var categoryLabels = {
  'none': 'Unclaimed',
  'other_country': 'Other Countries',
  'disputed': 'Disputed Areas',
  'territory': 'US Territories',
  'state': 'US State'
};

// =============
// FUNCTIONS

var showTooltip = function(d, i) {
      var text = d.properties.label;
      if (d.properties.country) {
		text += ' (' + d.properties.country + ')';
      }
      
      // show tooltip
      tooltip.text(text)
        .style('visibility', null);
	
  	d3.select('#cover')
       .style('visibility', null)
		.style('mask', 'url(#clipper)')
  .moveToFront();
  
	d3.select(this)
      .style('fill', "#EBDFCD");
  
      
  	  moveTooltip(d, i);
    };

var moveTooltip = function(d, i) {
      // move tooltip
      var m = d3.svg.mouse(this);
      tooltip.attr('transform', 'translate(' + m + ')');
    };

var drawMap = function(js) {
  if (current == json0) {
	current = json1;
  } else {
	current = json0;
  }    
  
  
  
  
  var sh = g.selectAll('path.shapes')
    .data(js, function(d) { return d.properties.id } );
  
  sh.enter()
     .append('path')
      .attr('class', 'shapes')
      .attr('d', path)
      .style('fill', color)
      .style('stroke', "#FFFFFF")
      .on('mouseover', showTooltip)
      .on('mousemove', moveTooltip)
      .on('mouseout', function(d, i) { 
	  	d3.select('#cover')
        	.style('visibility', 'hidden'); 

        tooltip.style('visibility', 'hidden'); 
        d3.select(this).style('fill', color)
      })
    .on('click', function() {
		drawMap(current.features);
    });

    
  sh.exit()
    .remove();
  
  sh.transition()
    .delay(1000)
    .duration(1000)
    .attr('d', path);
};

g.append('rect')
  .attr('id', 'cover')
  .attr('width', $('body').width())
  .attr('height', $('body').height())
  .attr("pointer-events", "none")
  .style('visibility', 'hidden')
  .moveToFront();

    
// ========= TIMELINE
var dates = _.map(texts, function(d) {
  var parts = d.date.match(/(\d+)/g);
  // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
  return new Date(parts[0], parts[1]-1, parts[2]); // months are 0-based
});

var xscale = d3.time.scale()
    .domain([d3.min(dates), d3.max(dates)])
    .range([25, 800]);

var timeline = g.selectAll('circle')
    .data(dates)
    .enter().append('circle')
    .attr('cx', xscale )
    .attr('cy', 668)
    .attr('r', 5)
    .style('opacity', .1);

var axis = d3.svg.axis()
    .scale(xscale)
    .ticks(d3.time.years, 10);

g.append("g")
    .attr("transform", "translate(" + [0,687] + ")")
    .call(axis);


// ========= LEGEND
var yscale = d3.scale.ordinal()
    .domain(d3.range(0, categories.length))
    .rangeBands([87, 277]);

var legend = g.selectAll('g.legenditem')
    .data(categories)
    .enter().append('g')
    .attr('class', 'legenditem')
    .attr('transform', function(d, i) { 
      return 'translate(' + [930, yscale(i)] + ')';
    })
    .attr('width', 300)
    .attr('height', yscale.rangeBand());


legend.append('text')
  .text(function(d, i) {
 	return categoryLabels[d];
  })
  .attr('transform', 'translate(' + [26, 15] + ')')
    

legend.append('rect')
  .attr('width', 20)
  .attr('height', 20)
  .style('fill', colorScale)
    
    
drawMap(json0.features);

tooltip = g.append('text')
  .attr("pointer-events", "none"); 

inlet.svg

text_data.json