Old school D3 from simpler times

All examples By author By category About

mohamed-ali

Full window Github gist

Map of Tunisia with d3.js

Using d3.js and TopoJson to draw the map of Tunisia. Done by Mohamed Ali Jamaoui. To know more about Tunisia check this Wiki http://en.wikipedia.org/wiki/Tunisia

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  border: 1px solid #ccc;
}

path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}

path:hover {
  fill: #00AEEC;
}

</style>
<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 = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("tunisia.json", function(error, topology) {
  
  console.clear();

var featureCollection = topojson.feature(topology, topology.objects.governorates);
  var bounds = d3.geo.bounds(featureCollection);
  
  var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
      centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;

var projection = d3.geo.mercator()
    .scale(3000)
    .center([centerX, centerY]);
    
  path.projection(projection);
  
  svg.selectAll("path")
      .data(featureCollection.features)
      .enter().append("path")
      .attr("d", path);
});

</script>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
svg {
  border: 1px solid #ccc;
}
​
path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}
​
path:hover {
  fill: #00AEEC;
}
​
</style>
<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 = 500;
​
var path = d3.geo.path();
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.json("tunisia.json", function(error, topology) {
  
  console.clear();
​
  var featureCollection = topojson.feature(topology, topology.objects.governorates);
  var bounds = d3.geo.bounds(featureCollection);
  
  var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
      centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;
​
  var projection = d3.geo.mercator()
    .scale(3000)
    .center([centerX, centerY]);
    
  path.projection(projection);
  
  svg.selectAll("path")
      .data(featureCollection.features)
      .enter().append("path")
      .attr("d", path);
});
​
</script>
</body>
</html>
    

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