map = html`<svg height="80" width="128" viewBox="0 0 128 64" style="display: block;">
<defs>
<path id="outline" d="${path(outline)}" />
<clipPath id="clip"><use xlink:href="${new URL("#outline", location)}" /></clipPath>
</defs>
<g clip-path="url(${new URL("#clip", location)})">
<path d="${path(land)}"></path>
<path id="outline" d="${path(outline)}" />
<path d="${path(R5ASIA)}" stroke="none" fill="red"></path>
<path d="${path(R5LAM)}" stroke="none" fill="blue"></path>
<path d="${path(R5MAF)}" stroke="none" fill="yellow"></path>
<path d="${path(R5OECD)}" stroke="none" fill="green"></path>
<path d="${path(R5REF)}" stroke="none" fill="pink"></path>
<path d="${path(FRANCE)}" stroke="none" fill="orange"></path>
</g>
<use xlink:href="${new URL("#outline", location)}" fill="none" stroke="#000" />
</svg>`
path = d3.geoPath(projection)
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(128, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
R5MAF = ({
type: 'FeatureCollection',
bbox: [-180, -89.99892578125, 180, 83.599609375],
features: regions.R5MAF.map(c => land.features.find(f => c === f.properties.ISO_A3 || c === f.properties.ADM0_A3)).filter(r => r != null)
})
R5OECD = ({
type: 'FeatureCollection',
bbox: [-180, -89.99892578125, 180, 83.599609375],
features: regions["R5OECD90+EU"].map(c => land.features.find(f => c === f.properties.ISO_A3 || c === f.properties.ADM0_A3)).filter(r => r != null)
})
R5REF = ({
type: 'FeatureCollection',
bbox: [-180, -89.99892578125, 180, 83.599609375],
features: regions["R5REF"].map(c => land.features.find(f => c === f.properties.ISO_A3 || c === f.properties.ADM0_A3)).filter(r => r != null)
})
FRANCE = ({
type: 'FeatureCollection',
bbox: [-180, -89.99892578125, 180, 83.599609375],
features: regions["FRANCE"].map(c => land.features.find(f => c === f.properties.ISO_A3 || c === f.properties.ADM0_A3)).filter(r => r != null)
})
regions = ({
R5ASIA: ["AFG", "ASM", "ATF", "BGD", "BRN", "BTN", "CCK", "CHN", "COK", "CXR", "FJI", "FSM", "GUM", "HKG", "IDN", "IND", "IOT", "KHM", "KIR", "KOR", "LAO", "LKA", "MAC", "MDV", "MHL", "MMR", "MNG", "MNP", "MYS", "NCL", "NFK", "NIU", "NPL", "NRU", "PAK", "PCN", "PHL", "PLW", "PNG", "PRK", "PYF", "SGP", "SLB", "THA", "TKL", "TLS", "TON", "TUV", "TWN", "UMI", "VNM", "VUT", "WLF", "WSM"],
R5LAM: ["AIA", "ARG", "ATA", "ATG", "BES", "BHS", "BLM", "BLZ", "BMU", "BOL", "BRA", "BRB", "BVT", "CHL", "COL", "CRI", "CUB", "CUW", "CYM", "DMA", "DOM", "ECU", "FLK", "GLP", "GRD", "GTM", "GUF", "GUY", "HND", "HTI", "JAM", "KNA", "LCA", "MAF", "MEX", "MSR", "MTQ", "NIC", "PAN", "PER", "PRI", "PRY", "SGS", "SLV", "SUR", "SXM", "TCA", "TTO", "URY", "VCT", "VEN", "VGB", "VIR"],
R5MAF: ["AGO", "ARE", "BDI", "BEN", "BFA", "BHR", "BWA", "CAF", "CIV", "CMR", "COD", "COG", "COM", "CPV", "DJI", "DZA", "EGY", "ERI", "ESH", "ETH", "GAB", "GHA", "GIN", "GMB", "GNB", "GNQ", "IRN", "IRQ", "ISR", "JOR", "KEN", "KWT", "LBN", "LBR", "LBY", "LSO", "MAR", "MDG", "MLI", "MOZ", "MRT", "MUS", "MWI", "MYT", "NAM", "NER", "NGA", "OMN", "PSE", "QAT", "REU", "RWA", "SAU", "SDN", "SEN", "SHN", "SLE", "SOM", "SSD", "STP", "SWZ", "SYC", "SYR", "TCD", "TGO", "TUN", "TZA", "UGA", "YEM", "ZAF", "ZMB", "ZWE", "SOL"],
"R5OECD90+EU": ["ALA", "ALB", "AND", "AUS", "AUT", "BEL", "BGR", "BIH", "CAN", "CHE", "CYP", "CZE", "DEU", "DNK", "ESP", "EST", "FIN", "FRA", "FRO", "GBR", "GGY", "GIB", "GRC", "GRL", "HMD", "HRV", "HUN", "IMN", "IRL", "ISL", "ITA", "JEY", "JPN", "LIE", "LTU", "LUX", "LVA", "MCO", "MKD", "MLT", "MNE", "NLD", "NOR", "NZL", "POL", "PRT", "ROU", "SJM", "SMR", "SPM", "SRB", "SVK", "SVN", "SWE", "TUR", "USA", "VAT", "KOS"],
R5REF: ["ARM", "AZE", "BLR", "GEO", "KAZ", "KGZ", "MDA", "RUS", "TJK", "TKM", "UKR", "UZB"],
FRANCE: ["FRA"]
})
topojson = require("topojson-client@3")
d3 = require("d3-geo@1", "d3-geo-projection@2")
import {projectionInput} from "@d3/projection-comparison"
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.
