Skip to content

Instantly share code, notes, and snippets.

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

Topojson of Italy

Shapefile source:

Convert shapefile to geojson, s_srs defines the input projection, t_srs defines the output projection to the EPSG code 4326 ( see also

ogr2ogr -f GeoJSON -s_srs prov2011_g.prj -t_srs EPSG:4326 sub.json prov2011_g.shp

Converts geojson to topojson (see

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">
.map {fill: #666; stroke: #f5f5f5;}
.border_map {stroke: red; stroke-width: 3px;}
.torino_map {fill: #fff; stroke: blue; stroke-width: 3px;}
<script src=""></script>
<script src=""></script>
var width = 500,
height = 500;
var svg ="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])
.translate([width / 2, height / 2]);
var subunits = topojson.feature(it, it.objects.sub);
var path = d3.geo.path()
// draw border with sea
.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)
.attr("class", "map")
.attr("d", path);
// draw and style any feature at time
.data(topojson.feature(it, it.objects.sub).features)
.attr("class",function(d) { return; })
// draw TORINO border (i.e. the border of a given feature)
.datum(topojson.mesh(it, it.objects.sub, function(a, b) { return === 'TORINO' || === 'TORINO'; }))
.attr("class", "torino_map")
.attr("d", path);
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Copy link

SimoneCarnio commented Jun 18, 2019

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