Built with blockbuilder.org
Last active
March 10, 2020 09:15
-
-
Save GitNoise/e3d316103c38ce54c2dca5e66953900e to your computer and use it in GitHub Desktop.
sverige
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
| license: mit |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-geo.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> | |
| <script src="https://d3js.org/d3-array.v2.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { border: 1px solid red;} | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| d3.json('lan.json').then(geoData => { | |
| const size = 400; | |
| const mapData = topojson.feature(geoData, geoData.objects.lan); | |
| const projection = d3.geoMercator(); | |
| projection.fitSize( | |
| [size, size], | |
| mapData.features); | |
| const geoPath = d3.geoPath(projection); | |
| const svg = d3.select('body').append('svg') | |
| .attr('width', size) | |
| .attr('height', size); | |
| console.log(mapData.features) | |
| svg.selectAll("path") | |
| .data(mapData.features) | |
| .enter().append("path") | |
| .attr("d", geoPath); | |
| }) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment