riccardoscalco/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Topojson of Italy

Shapefile source: http://www.istat.it/it/archivio/24613
Convert shapefile to geojson, s_srs defines the input projection, t_srs defines the output projection to the EPSG code 4326 (http://spatialreference.org/ref/epsg/4326/)
see also http://www.gdal.org/ogr2ogr.html
ogr2ogr -f GeoJSON -s_srs prov2011_g.prj -t_srs EPSG:4326 sub.json prov2011_g.shp

Converts geojson to topojson
(see https://github.com/mbostock/topojson/wiki/Command-Line-Reference)
topojson -p nome_pro=NOME_PRO -p nome_pro --id-property NOME_PRO -s 0.00000001 -o itx.json sub.json

Beautify the topojson file (not for the web)
js-beautify -f it.json -o it_beauty.json


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.map {fill: #666; stroke: #f5f5f5;}
.border_map {stroke: red; stroke-width: 3px;}
.torino_map {fill: #fff; stroke: blue; stroke-width: 3px;}
</style>
<html>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 500,
    height = 500;

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

d3.json("itx.json", function(error, it) {

    var projection = d3.geo.albers()
        .center([0, 41])
        .rotate([347, 0])
        .parallels([35, 45])
        .scale(2000)
        .translate([width / 2, height / 2]);

    var subunits = topojson.feature(it, it.objects.sub);

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


    // draw border with sea
    svg.append("path")
    .datum(topojson.mesh(it, it.objects.sub, function(a, b) { return a === b ; }))
    .attr("class", "border_map")
    .attr("d", path);

    // draw all the features together (no different styles)
    svg.append("path")
    .datum(subunits)
    .attr("class", "map")
    .attr("d", path);

    // draw and style any feature at time
    /*svg.selectAll("path")
    .data(topojson.feature(it, it.objects.sub).features)
    .enter().append("path")
    .attr("class",function(d) { return d.id; })
    .attr("d",path);*/

    // draw TORINO border (i.e. the border of a given feature)
    svg.append("path")
    .datum(topojson.mesh(it, it.objects.sub, function(a, b) { return b.id === 'TORINO' || a.id === 'TORINO'; }))
    .attr("class", "torino_map")
    .attr("d", path);


});

</script>
</body>
</html>

## itx.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              itx.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">
	<style>
	.map {fill: #666; stroke: #f5f5f5;}
	.border_map {stroke: red; stroke-width: 3px;}
	.torino_map {fill: #fff; stroke: blue; stroke-width: 3px;}
	</style>
	<html>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>
	var width = 500,
	height = 500;

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

	d3.json("itx.json", function(error, it) {

	var projection = d3.geo.albers()
	.center([0, 41])
	.rotate([347, 0])
	.parallels([35, 45])
	.scale(2000)
	.translate([width / 2, height / 2]);

	var subunits = topojson.feature(it, it.objects.sub);

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


	// draw border with sea
	svg.append("path")
	.datum(topojson.mesh(it, it.objects.sub, function(a, b) { return a === b ; }))
	.attr("class", "border_map")
	.attr("d", path);

	// draw all the features together (no different styles)
	svg.append("path")
	.datum(subunits)
	.attr("class", "map")
	.attr("d", path);

	// draw and style any feature at time
	/*svg.selectAll("path")
	.data(topojson.feature(it, it.objects.sub).features)
	.enter().append("path")
	.attr("class",function(d) { return d.id; })
	.attr("d",path);*/

	// draw TORINO border (i.e. the border of a given feature)
	svg.append("path")
	.datum(topojson.mesh(it, it.objects.sub, function(a, b) { return b.id === 'TORINO' \|\| a.id === 'TORINO'; }))
	.attr("class", "torino_map")
	.attr("d", path);


	});

	</script>
	</body>
	</html>