Skip to content

Instantly share code, notes, and snippets.

@Dudemullet
Created June 16, 2015 04:59
Show Gist options
  • Save Dudemullet/ca59fbcfb7a08a9f7292 to your computer and use it in GitHub Desktop.
Save Dudemullet/ca59fbcfb7a08a9f7292 to your computer and use it in GitHub Desktop.
Simulacion de municipios Mexicanos
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test</title>
<!-- CSS -->
<style type="text/css">
.municipio {
fill: white;
stroke: #ddd;
}
.municipio:hover {
stroke: #999;
stroke-width: 2px;
}
.overlay {
fill: none;
pointer-events: all;
}
.color1 { fill:rgb(247,251,255); }
.color2 { fill:rgb(222,235,247); }
.color3 { fill:rgb(198,219,239); }
.color4 { fill:rgb(158,202,225); }
.color5 { fill:rgb(107,174,214); }
.color6 { fill:rgb(66,146,198); }
.color7 { fill:rgb(33,113,181); }
.color8 { fill:rgb(8,81,156); }
.color9 { fill:rgb(8,48,107); }
</style>
</head>
<body>
<!-- HTML -->
<div class="container">
</div>
<!-- Js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script type="text/javascript">
var width = 900,
height = 1160;
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 8])
.on("zoom", zoomed);
var svg = d3.select('.container').append("svg")
.attr("width", width)
.attr("height", height);
var features = svg.append('g')
.attr('class', 'municipios')
.call(zoom);
// svg.append('rect')
// .attr("class", "overlay")
// .attr("width", width)
// .attr("height", height)
// .call(zoom);
d3.json("./data.json", function(err, res){
var dataset = res;
var states = topojson.feature(dataset, dataset.objects.states);
var municipalities = topojson.feature(dataset, dataset.objects.municipalities);
var projection = d3.geo.albers()
.center([-1, 17])
.parallels([17.5, 29.5])
.scale(1500)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
var randomWaterLevel = function () {
var waterLevel = Math.floor(Math.random() *8);
this.dataset.waterLevel = waterLevel;
return "municipio " + "color" + waterLevel;
};
features.selectAll('path')
.data(municipalities.features)
.enter()
.append('path')
.attr("d", path)
.attr("class", randomWaterLevel)
.attr("id", function(d){
return d.properties.name;
})
.attr("title", function(d){
return d.properties.name;
})
.on("click", function(d){
// console.log(arguments);
var waterLevel = +this.dataset.waterLevel;
var muni = d3.select(this);
muni.classed("municipio", true);
waterLevel += 1;
muni.classed("color1", function(){ return waterLevel == 1;});
muni.classed("color2", function(){ return waterLevel == 2;});
muni.classed("color3", function(){ return waterLevel == 3;});
muni.classed("color4", function(){ return waterLevel == 4;});
muni.classed("color5", function(){ return waterLevel == 5;});
muni.classed("color6", function(){ return waterLevel == 6;});
muni.classed("color7", function(){ return waterLevel == 7;});
muni.classed("color8", function(){ return waterLevel == 8;});
muni.classed("color9", function(){ return waterLevel >= 9;});
this.dataset.waterLevel = waterLevel;
});
});
function zoomed() {
features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
features.select(".state-border").style("stroke-width", 1.5 / d3.event.scale + "px");
features.select(".county-border").style("stroke-width", .5 / d3.event.scale + "px");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment