Public
Edited
Nov 16, 2023
Insert cell
Insert cell
Plot.plot({
insetBottom: 0,
width: 700,
projection: {
type: "mercator",
rotate: [-133, 27],
domain: {type: "MultiPoint", coordinates: [[113, -24], [154, -28], [141, -10.5], [146, -44]]}
},
marks: [
Plot.sphere({fill: "#ccc", opacity: 1}),
Plot.geo(countries, {fill: "black", fillOpacity: 1, stroke: "white", strokeWidth: 4, strokeOpacity: 1}),
Plot.density(numbats, {x: "decimalLongitude", y: "decimalLatitude", r: 40, fill: "red", opacity: .5, stroke: "orange", strokeOpacity: .3, title: d=>d.city + "\n" + d.state}),
Plot.dot(numbats, {x: "decimalLongitude", y: "decimalLatitude", r: 6, fill: "red", title: d=>d.city}),
Plot.image(numbats.slice(0,1),{x:125, y: -27, opacity: .4, width: 1000, dx: 75, src: "https://upload.wikimedia.org/wikipedia/commons/0/05/Numbat.jpg" }),
Plot.dot(numbats, {x: "decimalLongitude", y: "decimalLatitude", r: 3, fill: "white", title: d=>d.city}),
Plot.text(['Australia Numbat sightings'], {x:111, y: -34.6, dy: -330, dx: 170, fontSize:27, fill: "#5C4033", opacity: 1, stroke: "white", lineWidth: 26, textAnchor: "start", lineHeight: 1.4, clip: false, fontWeight: "bold" }),
Plot.text([`Data: ala.org.au | Image: wikipedia.org\nDesign: Deepsha Menghani | Threads: IandLoveandData`], {x:110.5, y: -39, fontSize:20, fill: "white", stroke: "black", opacity: 1, lineWidth: 40, textAnchor: "start", lineHeight: 1.4, clip: false,}),
],
r: { range: [3, 20], legend: true},
})
Insert cell
numbats.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
import {countries} from "ff0a83b495637684"
Insert cell
import {Scrubber} from "@mbostock/scrubber"
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