Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
Add Comment
Please, Sign In to add comment