Skip to content

Instantly share code, notes, and snippets.

@poezn poezn/_.md

forked from anonymous/_.md
Created Aug 28, 2012
Embed
What would you like to do?
just another inlet to tributary
{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":752,"height":838,"hide":false},"editor_json0":{"vim":false,"emacs":false,"width":735,"height":376,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":1910,"height":120,"hide":false},"endpoint":"tributary","editor_json2":{"vim":false,"emacs":false,"width":1809,"height":114,"hide":false}}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
var defs = g.append('defs');
var mask = defs.append('mask')
.attr('id', 'clipper');
mask
.append('rect')
.attr('height', $('body').height())
.attr('width', $('body').width())
.style('fill', "#4D4D4D");
mask
.attr('cy', 100)
.attr('r', 100)
.attr('fill', 'white')
.attr('maskContentUnits', "objectBoundingBox")
var json0 = tributary["geojson0"];
var json1 = tributary["geojson1"];
var texts = tributary["text_data"];
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('#cover')
.style('visibility', null)
.style('mask', 'url(#clipper)')
.moveToFront();
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) {
d3.select('#cover')
.style('visibility', 'hidden');
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);
};
g.append('rect')
.attr('id', 'cover')
.attr('width', $('body').width())
.attr('height', $('body').height())
.attr("pointer-events", "none")
.style('visibility', 'hidden')
.moveToFront();
// ========= TIMELINE
var dates = _.map(texts, function(d) {
var parts = d.date.match(/(\d+)/g);
// new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[0], parts[1]-1, parts[2]); // months are 0-based
});
var xscale = d3.time.scale()
.domain([d3.min(dates), d3.max(dates)])
.range([25, 800]);
var timeline = g.selectAll('circle')
.data(dates)
.enter().append('circle')
.attr('cx', xscale )
.attr('cy', 668)
.attr('r', 5)
.style('opacity', .1);
var axis = d3.svg.axis()
.scale(xscale)
.ticks(d3.time.years, 10);
g.append("g")
.attr("transform", "translate(" + [0,687] + ")")
.call(axis);
// ========= 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)
drawMap(json0.features);
tooltip = g.append('text')
.attr("pointer-events", "none");
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file has been truncated, but you can view the full file.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.