Skip to content

Instantly share code, notes, and snippets.

@poezn
Forked from anonymous/_.md
Created August 23, 2012 23:42
Show Gist options
  • Save poezn/3443630 to your computer and use it in GitHub Desktop.
Save poezn/3443630 to your computer and use it in GitHub Desktop.
some animation going
{"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}}
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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);
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment