Skip to content

Instantly share code, notes, and snippets.

/_.md

Forked from poezn/_.md
Created August 25, 2012 20:21
Show Gist options
  • Save anonymous/3470558 to your computer and use it in GitHub Desktop.
Save anonymous/3470558 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