just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":594,"height":519,"hide":false},"editor_json0":{"vim":false,"emacs":false,"width":735,"height":376,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":1268,"height":61,"hide":false}}

geojson0.json

geojson1.json

inlet.js

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

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) {
      console.log(path, color);

  shapes = g.selectAll('path.shapes')
    .data(js, function(d) { console.log(d);return d.id } )
    .transition()
    .duration(1000)
    .attr('d', path);
    
   shapes.enter()
     .append('path')
      .attr('class', 'shape')
      .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(json1.features);
    });
  
};

    
// ========= 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