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

commented Jun 18, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.