Skip to content

Instantly share code, notes, and snippets.

@caged

caged/index.html

Last active January 16, 2020 10:24
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save caged/093b6f1b46ed3e721a40 to your computer and use it in GitHub Desktop.
Save caged/093b6f1b46ed3e721a40 to your computer and use it in GitHub Desktop.
Download ZIP
Plot vector points on a cropped raster image with d3.js
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<body>
<style media="screen">
body {
margin: 0;
}
.supermarket {
fill: red;
stroke: #c00;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="js-map map"></div>
<script charset="utf-8">
var el = d3.select('.js-map'),
// 150 DPI image
width = 1743 / 2,
// 150 DPI image
height = 1421 / 2,
// Exported bounds of raster image
rasterBounds = [[-122.7895, 45.4394], [-122.5015, 45.6039]]
var projection = d3.geo.mercator()
.scale(1)
.translate([0, 0])
var path = d3.geo.path()
.projection(projection)
var map = el.append('svg')
.attr('width', width)
.attr('height', height)
map.append('image')
.attr('xlink:href', 'raster.png')
.attr('width', width)
.attr('height', height)
d3.json('supermarkets.json', function(err, data) {
var b = [projection(rasterBounds[0]), projection(rasterBounds[1])],
s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2]
projection
.scale(s)
.translate(t)
map.selectAll('.supermarket')
.data(data.features)
.enter().append('circle')
.attr('class', 'supermarket')
.attr('r', 2)
.each(function(d) {
var lonlat = projection(d.geometry.coordinates);
d3.select(this)
.attr('cx', lonlat[0])
.attr('cy', lonlat[1])
})
})
</script>
</body>
Raw
supermarkets.json
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment