xxxxxxxxxx
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 700;
//computing projection
var projection = d3.geo.mercator()
.scale(3000)
.translate([0,2200]);
//preparing the canvas
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
//adding context
var context = canvas.node().getContext("2d");
//computing path
var path = d3.geo.path()
.projection(projection)
.context(context);
d3.json("tunisia.json", function(error, topology) {
path(topojson.feature(topology, topology.objects.governorates));
context.stroke();
});
//set the height the bl.ocks.org preview
d3.select(self.frameElement).style("height", height + "px");
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js