some animation going

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":364,"height":177,"hide":false},"editor_json0":{"vim":false,"emacs":false,"width":735,"height":376,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":1270,"height":28,"hide":false}}

geojson0.json

geojson1.json

inlet.js

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

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(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) { 
        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);
};

    
// ========= 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)
    
    
tooltip = g.append('text');


drawMap(json0.features);

inlet.svg