News and graphics at @ClimateLab, a project of @PostGraphics.
{
const context = DOM.context2d(width, height);
path.context(context);
context.beginPath();
context.fillStyle = "tomato";
path(square());
context.fill();
context.beginPath();
context.strokeStyle = "black";
path(land);
context.stroke();
return context.canvas;
}
square = geoSquare()
.center([lon, lat])
.area(area);
square.center() // getter for center
square.area() // getter for area
projection = d3.geoNaturalEarth1()
.fitSize([width, height], {type: "Sphere"});
path = d3.geoPath()
.projection(projection);
height = width * .57;
land = FileAttachment("ne_110m_land.json").json();
function geoSquare(){
let center = [0, 0]; // lon/lat
let area = 10e3; // in km
// Circumference of Earth: https://en.wikipedia.org/wiki/Earth%27s_circumference
// Latitude to longitude: https://stackoverflow.com/questions/13861616/drawing-a-square-around-a-lat-long-point
function square(d){
const [ lon, lat ] = typeof center === "function" ? center(d) : center;
const sideKm = Math.sqrt(typeof area === "function" ? area(d) : area);
const sideDegLat = (sideKm * 0.5) / 111.1329527778; // circumference of Earth in km / 360 (degrees)
const sideDegLon = sideDegLat / Math.cos(lat / 180 * Math.PI);
// Longitude is negative in the west, positive in the east
// Latitude is positive in the north, negative in the south
return {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[lon - sideDegLon, lat + sideDegLat], // nw
[lon + sideDegLon, lat + sideDegLat], // ne
[lon + sideDegLon, lat - sideDegLat], // se
[lon - sideDegLon, lat - sideDegLat], // sw
[lon - sideDegLon, lat + sideDegLat] // nw
]
]
}
}
}
square.center = function(array){
return array ? (center = array, square) : center;
}
square.area = function(number){
return number ? (area = number, square) : area;
}
return square;
}
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.
