Topojson of Italy (province) by riccardoscalco

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="//d3js.org/d3.v3.min.js"></script>
<script src="//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>