Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@qawemlilo
Forked from larsbouwens/index.html
Created June 18, 2021 13:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save qawemlilo/d8c90165ca30b4c6584677ef26404d52 to your computer and use it in GitHub Desktop.
Save qawemlilo/d8c90165ca30b4c6584677ef26404d52 to your computer and use it in GitHub Desktop.
The Netherlands GeoJSON
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>The Netherlands gejson map</title>
<script src="js/d3.v3.min.js"></script>
<style type="text/css">
path {fill: #000; stroke: #fff; stroke-width: 1;}}
</style>
</head>
<body>
<script>
// Parameters
var width = 750,
height = 750,
scale = 8500,
centerLat = 5.5,
centerLong = 52.2;
// Append svg to body
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
// Adjust projection based on scale and center of the map
var projection = d3.geo.mercator()
.scale(scale).translate([width / 2, height / 2]).center([centerLat, centerLong]);
var path = d3.geo.path()
.projection(projection);
// Add the data
d3.json("nl.json", function(json) {
svg.selectAll("path")
.data(json.features).enter()
.append("path")
.attr("d", path)
});
</script>
<body>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment