md`# The world according to Fish
The Spilhaus World Ocean in a Square is a map that depicts the world's oceans as a single body of water -their true configuration. Suitable for small scale visualizations of oceanic systems, this map provides a captivating visual framework for purposes that would benefit from revealing the contentedness of our planet's marine environment. Shout out to @toja for the tutorial`
{
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.fillStyle = "#5e9ddb";
context.fillRect(0, 0, width, height);
context.strokeStyle = "#e9f2e9";
context.fillStyle = "#8cffcb";
context.beginPath();
path(graticule);
context.stroke();
context.beginPath();
path(land);
context.fill();
context.beginPath();
path(sphere);
context.stroke();
return context.canvas;
}
land = topojson.feature(world, world.objects.land)
topojson = require("topojson-client@3")
graticule = d3.geoGraticule10()
world = fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-110m.json").then(response => response.json())
projection = spilhausSquare()
.fitExtent([[50 , 50], [width - 50, height - 50]], sphere);
height = width
sphere = ({ type: "Sphere" })
d3 = require("d3-geo@1")
import {ellipticFactory, inverse} from "@toja/adams-world-in-a-square-i-ii"
import { spilhausSquare } from "@toja/spilhaus-world-ocean-map-in-a-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.
