Created
April 9, 2014 23:47
-
-
Save fabriciotav/10330891 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3.geo</title> | |
| <style> | |
| circle { | |
| cursor: pointer; | |
| } | |
| label { | |
| position: relative; | |
| top: 8px; | |
| } | |
| .states { | |
| fill: rgb(230, 230, 230); | |
| stroke: rgb(200, 200, 200); | |
| shape-rendering: crispEdges; | |
| } | |
| .year { | |
| fill: rgba(67, 162, 202, .5); | |
| stroke: rgb(230, 230, 230); | |
| stroke-width: 1px; | |
| } | |
| .compare-year { | |
| fill: transparent; | |
| stroke: rgb(100,100,100); | |
| stroke-width: 2px; | |
| stroke-dasharray: 5 1; | |
| } | |
| .active { | |
| fill: rgb(215,215,215); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <div> | |
| <select name="year" id="year"> | |
| <option value="year2013">2013</option> | |
| <option value="year2012">2012</option> | |
| <option value="year2011">2011</option> | |
| <option value="year2010">2010</option> | |
| <option value="year2009">2009</option> | |
| <option value="year2008">2008</option> | |
| <option value="year2007">2007</option> | |
| <option value="year2006">2006</option> | |
| <option value="year2005">2005</option> | |
| <option value="year2004">2004</option> | |
| <option value="year2003">2003</option> | |
| <option value="year2002">2002</option> | |
| <option value="year2001">2001</option> | |
| <option value="year2000">2000</option> | |
| </select> | |
| <label for="year"> | |
| <svg class="label" width="24" height="24"> | |
| <circle class="year" cx="12" cy="12" r="10"></circle> | |
| </svg> | |
| </label> | |
| </div> | |
| <div> | |
| <select name="compYear" id="compYear"> | |
| <option value="year2013">2013</option> | |
| <option value="year2012">2012</option> | |
| <option value="year2011">2011</option> | |
| <option value="year2010">2010</option> | |
| <option value="year2009">2009</option> | |
| <option value="year2008">2008</option> | |
| <option value="year2007">2007</option> | |
| <option value="year2006">2006</option> | |
| <option value="year2005">2005</option> | |
| <option value="year2004">2004</option> | |
| <option value="year2003">2003</option> | |
| <option value="year2002">2002</option> | |
| <option value="year2001">2001</option> | |
| <option value="year2000">2000</option> | |
| </select> | |
| <label for="compYear"> | |
| <svg class="label" width="24" height="24"> | |
| <circle class="compare-year" cx="12" cy="12" r="10"></circle> | |
| </svg> | |
| </label> | |
| </div> | |
| </div> | |
| <div id="map"></div> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script> | |
| <script> | |
| (function() { | |
| // Dummy data | |
| var dataset = {}, | |
| max = 0, | |
| min = 0; | |
| for (var i = 2013; i > 1999; i -= 1) { | |
| dataset['year' + i] = []; | |
| for (var j = 0; j < 27; j += 1) { | |
| var r = Math.floor(d3.random.normal(200, 100)()); | |
| dataset['year' + i].push(r > 0 ? r : 0); | |
| } | |
| if (d3.max(dataset['year' + i]) > max) { max = d3.max(dataset['year' + i]) } | |
| if (d3.min(dataset['year' + i]) < min) { min = d3.min(dataset['year' + i]) } | |
| } | |
| // Scale for the circles | |
| var rScale = d3.scale.linear().range([1, 30]).domain([min, max]); | |
| // Margin convention | |
| var margin = { top: 10, right: 10, bottom: 10, left: 10 }, | |
| width = 960 - margin.left - margin.right, | |
| height = 600 - margin.top - margin.bottom; | |
| var svg = d3.select('#map').append('svg') | |
| .attr('width', width + margin.left + margin.right) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
| // Load the TopoJSON file | |
| d3.json('BRA_adm1.json', function(adm1) { | |
| d3.select('#year').on('change', function(d) { | |
| update(d3.select(this).property('value')); | |
| }); | |
| d3.select('#compYear').on('change', function(d) { | |
| updateComparator(d3.select(this).property('value')); | |
| }); | |
| var projection = d3.geo.equirectangular() | |
| .center([-55,-15]) | |
| .scale(800) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| // Draw states | |
| svg.selectAll('.states') | |
| .data(topojson.feature(adm1, adm1.objects.BRA_adm1_GeoJSON).features) | |
| .enter().append('path') | |
| .attr('class', 'states') | |
| .attr('d', path) | |
| .on('mouseover', function(d) { d3.select(this).classed('active', true); }) | |
| .on('mouseout', function(d) { d3.select(this).classed('active', false); }); | |
| // Draw year circles | |
| svg.selectAll('.year') | |
| .data(topojson.feature(adm1, adm1.objects.BRA_adm1_GeoJSON).features) | |
| .enter().append('circle') | |
| .attr('class', 'year') | |
| .attr('cx', function(d) { return path.centroid(d)[0]; }) | |
| .attr('cy', function(d) { return path.centroid(d)[1]; }) | |
| .attr('r', function(d, i) { return rScale(dataset.year2013[+d.properties.id - 1]); }); | |
| // Draw comparator year circles | |
| svg.selectAll('.compare-year') | |
| .data(topojson.feature(adm1, adm1.objects.BRA_adm1_GeoJSON).features) | |
| .enter().append('circle') | |
| .attr('class', 'compare-year') | |
| .attr('cx', function(d) { return path.centroid(d)[0]; }) | |
| .attr('cy', function(d) { return path.centroid(d)[1]; }) | |
| .attr('r', function(d, i) { return rScale(dataset.year2013[+d.properties.id - 1]); }); | |
| function update(year) { | |
| svg.selectAll('.year') | |
| .transition() | |
| .duration(500) | |
| .attr('r', function(d, i) { return rScale(dataset[year][+d.properties.id - 1]); }) | |
| } | |
| function updateComparator(year) { | |
| svg.selectAll('.compare-year') | |
| .transition() | |
| .duration(500) | |
| .attr('r', function(d, i) { return rScale(dataset[year][+d.properties.id - 1]); }) | |
| } | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| FILES = \ | |
| BRA_adm1_GeoJSON.json \ | |
| BRA_adm0_GeoJSON.json \ | |
| BRA_adm \ | |
| BRA_adm.zip | |
| .PHONY: clean | |
| BRA_adm1.json: BRA_adm1_GeoJSON.json | |
| topojson \ | |
| -o BRA_adm1.json \ | |
| -p name=NAME_1 \ | |
| -p id=ID_1 \ | |
| BRA_adm1_GeoJSON.json | |
| BRA_adm1_GeoJSON.json: BRA_adm1.shp | |
| ogr2ogr \ | |
| -f GeoJSON \ | |
| BRA_adm1_GeoJSON.json \ | |
| BRA_adm/BRA_adm1.shp | |
| BRA_adm1.shp: BRA_adm.zip | |
| unzip BRA_adm.zip -d BRA_adm | |
| touch BRA_adm/BRA_adm1.shp | |
| BRA_adm0.json: BRA_adm0_GeoJSON.json | |
| topojson \ | |
| -o BRA_adm0.json \ | |
| -p name=NAME_1 \ | |
| -p id=ID_1 \ | |
| BRA_adm0_GeoJSON.json | |
| BRA_adm0_GeoJSON.json: | |
| ogr2ogr \ | |
| -f GeoJSON \ | |
| BRA_adm0_GeoJSON.json \ | |
| BRA_adm/BRA_adm0.shp | |
| BRA_adm0.shp: BRA_adm.zip | |
| unzip BRA_adm.zip -d BRA_adm | |
| touch BRA_adm/BRA_adm0.shp | |
| BRA_adm.zip: | |
| wget http://biogeo.ucdavis.edu/data/gadm2/shp/BRA_adm.zip | |
| clean: | |
| rm -rf -- $(FILES) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment