Skip to content

Instantly share code, notes, and snippets.

@milafrerichs
Last active February 6, 2023 20:36
Show Gist options
  • Save milafrerichs/69035da4707ea51886eb to your computer and use it in GitHub Desktop.
Save milafrerichs/69035da4707ea51886eb to your computer and use it in GitHub Desktop.
Simple Map of Europe TopoJSON
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#map {
width: 400px;
height: 300px;
}
</style>
<body>
<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
(function() {
var center, countries, height, path, projection, scale, svg, width;
width = 300;
height = 400;
center = [5, 70];
scale = 600;
projection = d3.geo.mercator().scale(scale).translate([width / 2, 0]).center(center);
path = d3.geo.path().projection(projection);
svg = d3.select("#map").append("svg").attr("height", height).attr("width", width);
countries = svg.append("g");
d3.json("eu.topojson", function(data) {
countries.selectAll('.country')
.data(topojson.feature(data, data.objects.europe).features)
.enter()
.append('path')
.attr('class', 'country')
.attr('d', path);
return;
});
}).call(this);
</script>
</body>
</html>
@aditya7293
Copy link

I have tried this visual studio it is showing me blank page
I don't have much idea on html or java script

@mzeinstra
Copy link

This map is missing Malta.

@CeltSpeaksGoth
Copy link

CeltSpeaksGoth commented Feb 6, 2023

Am a bit late to the party on this topic. I downloaded the map and successfully loaded it into PowerBI as a shape map.
It's exactly what I was looking for. Many thanks.
PS the HTML produces an error viewable in the browser under Development tools => Console, apparently the remote function being called needs something added in its response header. I know JS a fair bit so will aim to use the map with my own scripting. Cheers.

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