Last active
February 6, 2023 20:36
-
-
Save milafrerichs/69035da4707ea51886eb to your computer and use it in GitHub Desktop.
Simple Map of Europe TopoJSON
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This map is missing Malta.
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
I have tried this visual studio it is showing me blank page
I don't have much idea on html or java script