Public
Edited
Apr 17
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.geoArea(feature(triangle))
Insert cell
d3.geoArea(rewind(feature(triangle)))
Insert cell
d3.polygonArea(triangle[0])
Insert cell
Insert cell
Insert cell
transformations = [
["(no transform)", (d) => d],
["placemark.rewind", (shape) => placemark.rewindFeature(shape, "RFC7946")],
["placemark.rewind (D3)", (shape) => placemark.rewindFeature(shape, "d3")],
["turf", (shape) => turf.rewind(shape)],
["turf (reverse)", (shape) => turf.rewind(shape, { reverse: true })],
["geotoolbox", (shape) => geotoolbox.rewind(shape, { mutate: false })],
["@fil/rewind", rewind]
]
Insert cell
transformed = {
return Array.from(transformations, ([name, rewind]) => [
name,
[
rewind(countries_geo_10m),
rewind(feature(triangle)),
rewind(feature(sliver)),
rewind(feature(sliver2)),
rewind(feature(pole))
]
]);
}
Insert cell
feature = (d) =>
Array.isArray(d)
? {
type: "FeatureCollection",
features: [
{ type: "Feature", geometry: { type: "Polygon", coordinates: d } }
]
}
: d
Insert cell
draw = (shape, title) =>
Plot.plot({
title,
projection: "equal-earth",
marks: [
Plot.geo(shape, { fill: "#ccc", stroke: "currentColor" }),
Plot.graticule(),
Plot.sphere()
]
})
Insert cell
triangle = [
[
[0, 30],
[60, 50],
[0, 80],
[0, 30]
]
]
Insert cell
pole = [
[
[0, 80],
[120, 80],
[-120, 80],
[0, 80]
]
]
Insert cell
sliver = [
[
[20, 15],
[15, 15.05],
[10, 15],
[20, 15]
]
]
Insert cell
sliver2 = [
[
[0, 0],
[5.2, 5],
[10, 10],
[0, 0]
]
]
Insert cell
// import { countries_geo_10m } from "@plmrry/winding-order-woes"
countries_geo_10m = FileAttachment("countries_geo_10m.json").json()
Insert cell
import { geo as geotoolbox } from "@neocartocnrs/rewind"
Insert cell
turf = require("@turf/turf@7")
Insert cell
import {rewind} from "@fil/rewind"
Insert cell
placemark = import("https://esm.sh/@placemarkio/geojson-rewind")
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