drawMap = () => {
const ctx = DOM.context2d(width, height);
const path = d3.geoPath(contourProjection).context(ctx);
// water
const waterGrd = ctx.createLinearGradient(0, 0, width, height);
waterGrd.addColorStop(0, d3.hsl(waterColor).darker(.1).hex());
waterGrd.addColorStop(1, d3.hsl(waterColor).brighter(.1).hex());
ctx.fillStyle = waterGrd;
ctx.fillRect(0, 0, width, height);
// land
const landGrd = ctx.createLinearGradient(0, 0, width, height);
landGrd.addColorStop(0, d3.hsl(landColor).darker(.1).hex());
landGrd.addColorStop(1, d3.hsl(landColor).brighter(.2).hex());
ctx.fillStyle = landGrd;
ctx.beginPath();
path(contours[0]);
ctx.fill();
// black outline
ctx.lineWidth = 1.5;
ctx.stroke();
contours.slice(1).forEach( d => {
d.coordinates.forEach(coords => {
var prev = null;
coords[0].forEach(coords => {
if (coords) {
const pt = {
'type': 'Point',
'coordinates': coords
}
const centroidCoords = path.centroid(pt);
if (prev == null) {
ctx.beginPath();
ctx.moveTo(...centroidCoords);
}
else {
// angle of line segment
const angle = Math.atan2(coords[1] - prev[1], -coords[0] + prev[0]);
// convert angle to aspect
const aspect = ((Math.PI / 2 - angle) + 2 * Math.PI) % (2 * Math.PI);
// convert sun azimuth to radians
const azimuth = (az / 180) * Math.PI;
// difference between angle and azimuth
const diff = ( (aspect - azimuth) + 2 * Math.PI) % (2 * Math.PI);
// scale width of stroke based on orientation
ctx.lineWidth = widthScale(diff);
// color stroke based on orientation
ctx.strokeStyle = diff > Math.PI ? shadowColor : highlightColor;
ctx.lineTo(...centroidCoords);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(...centroidCoords);
}
prev = coords;
}
});
});
});
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.
