colors = [ "#d3e7fa", "#5784c5", "#fc004b", "#ffec44" ]
interpolate = interpolatePalette(colors)
color = d3.scaleSequentialLog(countExtent, interpolate)
interval = 100 / (colors.length - 1)
gradient = gradientLinear()
.offsets(d3.range(0, 100 + interval, interval))
.colors(colors)
projection = d3.geoEqualEarth()
.rotate([-10, 0, 0])
.fitSize([w, h], { type: "Sphere" })
path = d3.geoPath(projection)
worldTopo = FileAttachment("ne_110m_land.json").json()
worldGeo = topojson.feature(worldTopo, worldTopo.objects.ne_110m_land)
w = width
h = w * aspect
aspect = 0.49
resolution = 0.5
// Downloaded from https://globalfishingwatch.org/data-download/datasets/public-welch-et-al-disabling-events:v20221102
ais_disabling_events = FileAttachment("ais_disabling_events.csv").csv()
points = [
...d3
.rollup(
ais_disabling_events.map(
(d) =>
`${resolution * ((d.gap_start_lon / resolution) | 0)} ${
resolution * ((d.gap_start_lat / resolution) | 0)
}`
),
(v) => {
const [x, y] = v[0].split(" ").map(Number);
return { x, y, count: v.length };
},
(d) => d
)
.values()
]
countExtent = d3.extent(points, d => d.count)
import { gradientLinear } from "@washpostgraphics/gradient-generators"
import { interpolatePalette } from "@harrystevens/roll-your-own-color-palette-interpolator"
import { toc } from "@harrystevens/toc@126"
import { franklinLight } from "@climatelab/fonts@44"
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.
