Welsh-speaking schools in WalesHello, eurostat-map2020 National Park routesLinesRidgeline plot maps with annotationsWisconsin Breweries with Mapbox GL tooltipPopulation à la BertinU.S. Geographic DataAll Kwik Trip brand stores2020 presidential campaign events30DayMapChallenge - Day 11 : 3DRejected absentee ballots in Wisconsin's Spring Primary - City of Milwaukee30 Day Map Challenge 2020 - HexagonsCoding With Fire: NYPD CCRB30DayMapChallenge - Day 15 : ConnectionsThe 2016 French Nuit DeboutDistance topologique aux bordures😷 Air Quality by Population 😷NUTS regions (The Nomenclature of territorial units for statistics): Perspective30DayMapChallenge - Day 24 : Elevation30DayMapChallenge - Day 22 : Movement30DayMapChallenge - Day 29 : GlobeInterrupted Homolosine OceansCOVID-19 mapped over timeLivecoding Election Night Visualizations
The world according to Fish
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"
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.