Skip to content

Instantly share code, notes, and snippets.

@fabriciotav

fabriciotav/BRA_adm1.json

Created April 9, 2014 23:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fabriciotav/10330891 to your computer and use it in GitHub Desktop.
Save fabriciotav/10330891 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
BRA_adm1.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!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>
Raw
Makefile
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