Skip to content

Instantly share code, notes, and snippets.

@swingley

swingley/index.html

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.
Download ZIP
Raw
index.html
<!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
montreal-polygon.geojson
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-73.62178802490234,45.55204442226065],[-73.66950988769531,45.52944081525666],[-73.65440368652344,45.509474756808736],[-73.59569549560547,45.53376986898192],[-73.5970687866211,45.552284837314595],[-73.62178802490234,45.55204442226065]]]}}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment