Skip to content

Instantly share code, notes, and snippets.

@swingley
Last active March 20, 2023 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save swingley/9441b02dd565b6caa3b9f388cbd077bb to your computer and use it in GitHub Desktop.
Save swingley/9441b02dd565b6caa3b9f388cbd077bb to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mercator projection</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
body {
background-color: gray;
margin: 1em auto;
width: 500px;
}
svg {
background-color: white;
}
g path {
fill: none;
stroke: #2E9C32;
}
</style>
</head>
<body>
<script>
//Width and height
var w = 500;
var h = 300;
//Define map projections
var mercator = d3.geo.mercator()
.center([ -73.6, 45.5 ])
.translate([ w * 0.5, h * 0.6 ])
.scale([ w * 128 ]);
//Define path generators
var generator = d3.geo.path().projection(mercator);
//Create SVG
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("montreal-polygon.geojson", function(json) {
svg.append("g").selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", generator);
});
</script>
</body>
</html>
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