Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Topojson of Italy (province)

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
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@SimoneCarnio

This comment has been minimized.

Copy link

@SimoneCarnio SimoneCarnio commented Jun 18, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment