Skip to content

Instantly share code, notes, and snippets.

@mohamed-ali

mohamed-ali/README.md

Last active November 12, 2021 21:58
Show Gist options
  • Save mohamed-ali/8732826 to your computer and use it in GitHub Desktop.
Save mohamed-ali/8732826 to your computer and use it in GitHub Desktop.
Download ZIP
Map of Tunisia with d3.js
Raw
README.md
Raw
index.html
<!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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://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>
Display the source blob
Display the rendered blob
Raw
tunisia.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@RamiElBekri
Copy link

RamiElBekri commented Feb 10, 2017 •
edited
Loading

Bonsoir ,
J'ai copié le code mais il m'a affiché seulement le cadre et non pas la carte , je ne sais pas c'est quoi le problème .
Merci de me répondre .

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