basicavisual/README.md

## README.md

      
    Raw
  

              README.md
            
          
    How to create the topojson map:
curl -o estados.zip http://mapserver.inegi.org.mx/MGN/mge2010v5_0.zip
curl -o  municipios.zip http://mapserver.inegi.org.mx/MGN/mgm2010v5_0.zip
unzip estados.zip 
unzip municipios.zip
ogr2ogr states.shp Entidades_2010_5.shp -t_srs "+proj=longlat +ellps=WGS84 +no_defs +towgs84=0,0,0"
ogr2ogr municipalities.shp Municipios_2010_5.shp -t_srs "+proj=longlat +ellps=WGS84 +no_defs +towgs84=0,0,0"
topojson -o mx_tj.json -s 1e-7 -q 1e5 states.shp municipalities.shp -p state_code=+CVE_ENT,state_name=NOM_ENT,mun_code=+CVE_MUN,mun_name=NOM_MUN

Related: Projected Topojson of Mexican Municipalities

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Mexico Topojson</title>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);

var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .scale(1200)
    .center([-102.34034978813841, 24.012062015793]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.append("g");

d3.json("mx_tj.json", function(error, mx) {
  svg.selectAll("path")
    .data(topojson.object(mx, mx.objects.municipalities).geometries)
    .enter().append("path")
    .attr("d", d3.geo.path().projection(projection))
    .attr("fill", "transparent")
    .style("stroke", "#333")
    .style("stroke-width", ".2px")
    .attr("class", "muns");

  g.selectAll("path")
    .data(topojson.object(mx, mx.objects.states).geometries)
    .enter().append("path")
    .attr("d", d3.geo.path().projection(projection))
    .attr("fill", "transparent")
    .style("stroke", "#333");

});

</script>

## mx_tj.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              mx_tj.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Mexico Topojson</title>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script>
	var x = d3.scale.linear()
	.domain([0, width])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([0, height])
	.range([height, 0]);

	var width = 960,
	height = 500;

	var projection = d3.geo.mercator()
	.scale(1200)
	.center([-102.34034978813841, 24.012062015793]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var g = svg.append("g");

	d3.json("mx_tj.json", function(error, mx) {
	svg.selectAll("path")
	.data(topojson.object(mx, mx.objects.municipalities).geometries)
	.enter().append("path")
	.attr("d", d3.geo.path().projection(projection))
	.attr("fill", "transparent")
	.style("stroke", "#333")
	.style("stroke-width", ".2px")
	.attr("class", "muns");

	g.selectAll("path")
	.data(topojson.object(mx, mx.objects.states).geometries)
	.enter().append("path")
	.attr("d", d3.geo.path().projection(projection))
	.attr("fill", "transparent")
	.style("stroke", "#333");

	});

	</script>