Public
Edited
Oct 12, 2023
Insert cell
Insert cell
projection = d3.geoInterruptedSinusoidal()
Insert cell
map
Insert cell
import {d3, map} with {projection} from "@d3/world-map"
Insert cell
Insert cell
projection2 = d3.geoInterrupt(
d3.geoSinusoidalRaw,
[[ // northern hemisphere
[[-180, 0], [-100, 90], [ -40, 0]],
[[ -40, 0], [ 30, 90], [ 180, 0]]
], [ // southern hemisphere
[[-180, 0], [-160, -90], [-100, 0]],
[[-100, 0], [ -60, -90], [ -20, 0]],
[[ -20, 0], [ 20, -90], [ 80, 0]],
[[ 80, 0], [ 140, -90], [ 180, 0]]
]]
)
Insert cell
map2
Insert cell
import {map as map2} with {projection2 as projection} from "@d3/world-map"
Insert cell
Insert cell
Insert cell
projection_bart = d3.geoInterrupt(
d3.geoSinusoidalRaw,
[[ // northern hemisphere
[[-180, 0], [-100, 90], [ -40, 0]],
[[ -40, 0], [ 30, 90], [ 180, 0]]
], [ // southern hemisphere
[[-180, 0], [ -60, -90], [ -20, 0]],
[[ -20, 0], [ 20, -90], [ 80, 0]],
[[ 80, 0], [ 140, -90], [ 180, 0]]
]]
)
Insert cell
Insert cell
import {map as map_bart_canvas} with {projection_bart as projection} from "@d3/world-map"
Insert cell
map_bart_canvas
Insert cell
Insert cell
import {map as map_bart_svg} with {projection_bart as projection} from "@d3/world-map-svg"
Insert cell
map_bart_svg
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
map_custom_svg = html`<svg viewBox="0 0 ${width} ${height}" 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)})">
<use xlink:href="${new URL("#outline", location)}" fill="#fff" />
<path d="${path(graticule)}" stroke="#ccc" fill="none"></path>
<path d="${path(land)}"></path>
</g>
<use xlink:href="${new URL("#outline", location)}" fill="none" stroke="#000" />
</svg>`
Insert cell
d3_two = require("d3-geo@2", "d3-geo-projection@3")
Insert cell
topojson = require("topojson-client@3")
Insert cell
world = FileAttachment("land-50m.json").json()
Insert cell
land = topojson.feature(world, world.objects.land)
Insert cell
graticule = d3_two.geoGraticule10()
Insert cell
outline = ({type: "Sphere"})
Insert cell
height = {
const [[x0, y0], [x1, y1]] = d3_two.geoPath(projection_bart.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection_bart.scale(projection_bart.scale() * (l - 1) / l).precision(0.2);
return dy;
}
Insert cell
path = d3_two.geoPath(projection_bart)
Insert cell
Insert cell
world_2 = FileAttachment("land-110m-test01.json")
Insert cell
topojsonsimplify = require("topojson-simplify@3")
Insert cell
//land_simple = topojsonsimplify.simplify(world)
Insert cell
land_simple_pre = topojsonsimplify.presimplify(world)
Insert cell
//land_ahoy = topojson.feature(land_simple_pre, land_simple_pre.objects.land)
Insert cell
// land_simple_adjusted = topojsonsimplify.simplify(land_simple_pre, 0.5)
land_simple_adjusted = topojsonsimplify.simplify(land_simple_pre, simplify_weight)
Insert cell
land_ahoy = topojson.feature(land_simple_adjusted, land_simple_adjusted.objects.land)
Insert cell
Insert cell

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.
Learn more