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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.