just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":720,"height":621,"hide":true},"editor_json0":{"vim":false,"emacs":false,"width":1939,"height":280,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":600,"height":300,"hide":false}}

geojson0.json

geojson1.json

inlet.js

var gist = tributary["geojson1"];

var showTooltip = function(d, i) {
      //console.log(d);
      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 categories = _.uniq(_.map(gist.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 tooltip;

var shapes = g.selectAll('path.shapes')
    .data(gist.features)
    .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)
    });

// ========= 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());

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


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');

inlet.svg