-
-
Save Andrew-Reid/eac96498a3845acef6c9c7f19178e3c9 to your computer and use it in GitHub Desktop.
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> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <style> | |
| .path { | |
| fill: none; | |
| stroke: #999; | |
| } | |
| .container { | |
| } | |
| .map { | |
| width: 100%; | |
| height: auto; | |
| border: 1px solid silver; | |
| cursor: pointer; | |
| } | |
| .district-borders { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 1px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| pointer-events: none; | |
| } | |
| .district-borders:hover { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| pointer-events: none; | |
| } | |
| .districts :hover { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| </style> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <script src="https://d3js.org/d3-queue.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <svg class="map"> | |
| <span id="districts" style="font-weight: bold;"></span> | |
| </svg> | |
| </div> | |
| <script> | |
| const height = 580; | |
| let width = 960; | |
| var svg = d3.select('svg') | |
| .attr("preserveAspectRatio", "xMidYMid meet") | |
| .attr("viewBox", "0 0 " + (width * 1) + " " + (height * 1)); | |
| var projection = d3.geoConicConformal() | |
| .parallels([40, 43]) | |
| .rotate([100, 0]) | |
| // .scale(8000); not needed if using fitExtent/fitSize | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| var g = svg.append("g"); | |
| // Queue up datasets using d3 Queue | |
| d3.queue() | |
| .defer(d3.json, "ne-district-id-topo.json") | |
| .await(ready); | |
| function ready(error, ne) { | |
| if (error) throw error; | |
| var featureCollection = topojson.feature(ne, ne.objects.districts); | |
| projection.fitSize([960,580],featureCollection); | |
| var paths = g.selectAll("path") | |
| .data(featureCollection.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path); | |
| svg.append("paths") | |
| .attr("class", "district-borders") | |
| .attr("d", path(topojson.mesh(ne, ne.objects.districts, function(a, b) { return a !== b; }))); | |
| } | |
| function round(value, precision) { | |
| var multiplier = Math.pow(10, precision || 0); | |
| return Math.round(value * multiplier) / multiplier; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment