jupaneira/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an interactive Map of the Administrative divisions of Bogotá, made with  TopoJSON and D3.
Inspired by the Mexican municipalities map, it shows the Administrative division of Colombia's capital city.

Bogotá has 20 localities and each of them is compound of smaller divisions called Barrios. There are 1900 Barrios in Bogotá

It uses TopoJSON to diferentiate the Departments boundaries through the function topojson.mesh and a special filter.
To obtain the TopoJSON, first I converted the .shp file of the Municipality divition of Colombia by Maurix Suárez to GeoJSON, using:
ogr2ogr   -f GeoJSON -t_srs EPSG:4326  bta_barrios.json  barrios.shp

and then, through mapshaper I obtained the topoJSON file with the corresponding attributes.
Enjoy it :)

  
## bta_barrios.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              bta_barrios.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.
      
    
## index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<style>

    .barrios {
        fill: #222;
    }

    .barrios :hover {
        fill: orange;
    }

    .localidad-boundary {
        fill: none;
        stroke: #fff;
        pointer-events: none;
    }

    .barrio-boundary {
        fill: none;
        stroke: #fff;
        stroke-opacity: .25;
        stroke-width: .5px;
        pointer-events: none;
    }

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

    var width = 1300,
            height = 950;

    var projection = d3.geo.mercator()
            .rotate([74.1, -4.65, 90.0])
            .scale(160000)
            .translate([width / 2, height / 2]);

    var path = d3.geo.path()
            .projection(projection);

    var color = d3.scale.category10();


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

    d3.json("bta_barrios.json", function (error, mapData) {
        var barrios = topojson.feature(mapData, mapData.objects.bta_barrios).features;

        svg.append("g")
                .attr("class", "barrios")
                .selectAll("path")
                .data(barrios)
                .enter().append("path")
                .attr("d", path)
                .append("title")
                .text(function (d) {
                    return d.properties.NOMB_BARR;
                });

        svg.append("path")
                .datum(topojson.mesh(mapData, mapData.objects.bta_barrios, function(a, b) { return a.properties.COD_LOC != b.properties.COD_LOC; }))
                .attr("class", "localidad-boundary")
                .attr("d", path);

        svg.append("path")
                .datum(topojson.mesh(mapData, mapData.objects.bta_barrios, function(a, b) { return a.properties.COD_LOC == b.properties.COD_LOC && a !== b; }))
                .attr("class", "barrio-boundary")
                .attr("d", path);

    });

    d3.select(self.frameElement).style("width", width + "px");
    d3.select(self.frameElement).style("height", height + "px");
    d3.select(self.frameElement).style("align", "left");
</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<meta charset="utf-8">
	<style>

	.barrios {
	fill: #222;
	}

	.barrios :hover {
	fill: orange;
	}

	.localidad-boundary {
	fill: none;
	stroke: #fff;
	pointer-events: none;
	}

	.barrio-boundary {
	fill: none;
	stroke: #fff;
	stroke-opacity: .25;
	stroke-width: .5px;
	pointer-events: none;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 1300,
	height = 950;

	var projection = d3.geo.mercator()
	.rotate([74.1, -4.65, 90.0])
	.scale(160000)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	var color = d3.scale.category10();


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

	d3.json("bta_barrios.json", function (error, mapData) {
	var barrios = topojson.feature(mapData, mapData.objects.bta_barrios).features;

	svg.append("g")
	.attr("class", "barrios")
	.selectAll("path")
	.data(barrios)
	.enter().append("path")
	.attr("d", path)
	.append("title")
	.text(function (d) {
	return d.properties.NOMB_BARR;
	});

	svg.append("path")
	.datum(topojson.mesh(mapData, mapData.objects.bta_barrios, function(a, b) { return a.properties.COD_LOC != b.properties.COD_LOC; }))
	.attr("class", "localidad-boundary")
	.attr("d", path);

	svg.append("path")
	.datum(topojson.mesh(mapData, mapData.objects.bta_barrios, function(a, b) { return a.properties.COD_LOC == b.properties.COD_LOC && a !== b; }))
	.attr("class", "barrio-boundary")
	.attr("d", path);

	});

	d3.select(self.frameElement).style("width", width + "px");
	d3.select(self.frameElement).style("height", height + "px");
	d3.select(self.frameElement).style("align", "left");
	</script>
	</body>
	</html>