Published
Edited
Mar 4, 2019
2 stars
map = {
let ctx = DOM.context2d(width, height)
//projection and path
let map_projection = d3.geoMercator()
.scale((1 << 18) / (2* Math.PI))
.translate([width / 2, height / 2])
.center([-118.269, 33.957])
let map_path = d3.geoPath()
.projection(map_projection)
.context(ctx)// this is canvas specific
// This draws the LA County neighborhoods goejson - will be used AFTER image is drawn (so it's on top)
let draw_borders = function() {
ctx.beginPath()
ctx.strokeStyle = 'red'
ctx.lineWidth = .5
map_path(mesh_neighborhoods)
ctx.stroke()
ctx.closePath()
}
// new image
let county_img = new Image()
// set source of image
// Image was downloaded using google earth engine, and transformed using GDAL
county_img.src = 'https://user-images.githubusercontent.com/22920929/52886973-e9a80180-312a-11e9-967a-f8a5363bb914.jpg'
// These bounds are coordinates of the two corners of the image.
let county_bounds = [[-118.6074416, 34.1450089] // this one is NW corner (top left)
, [-117.5488219, 33.5576005]] // this one is SE corner (top right)
// This function takes the coordinates, projects them
let county = function(){
let WN = map_projection(county_bounds[0])
let ES = map_projection(county_bounds[1])
return {
x: WN[0], // left top corner
y: WN[1], // left top corner
w:(ES[0]-WN[0]), // projected width
h:(ES[1]-WN[1]) //projected height
}
}
function draw_everything(){
ctx.drawImage(county_img, county().x,county().y,county().w ,county().h)
draw_borders()
}
// we want to make sure draw everything is executed AFTER image is loaded
county_img.onload = draw_everything()
return ctx.canvas
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
