React = import("https://cdn.skypack.dev/react") // whoa, works
source(React.Component) // minified?
require("react") // nope
import("react") // also doesn't work
d3 = import("https://cdn.skypack.dev/d3@5")
require("d3@5") // the de facto way
import("d3@5") // also works
source(d3.scaleLinear) // not minified!
source((await import("https://cdn.skypack.dev/d3@5?min")).scaleLinear) // minified version
source((await require("d3@5")).scaleLinear) // minified during npm publish https://github.com/d3/d3/blob/7244e45e/package.json#L20
_ = import("https://cdn.skypack.dev/underscore")
require("underscore")
import("underscore")
lodash = import("https://cdn.skypack.dev/lodash")
require("lodash")
import("lodash") // I guess lodash isn't packaged for this
pathToRegexp = import("https://cdn.skypack.dev/path-to-regexp")
require("path-to-regexp") // not packaged for require, but...
import("path-to-regexp") // packaged for es modules
chartjs = import("https://cdn.skypack.dev/chart.js@^2.7.1")
obliterator = import("https://cdn.skypack.dev/obliterator@^1.2.1")
hyperHTML = import("https://cdn.skypack.dev/hyperhtml@^2.31.6")
source = fn => md`
~~~javascript
${fn.toString()}
~~~`
svg`<svg class="logo logo--icon" style="background-color: #3167ff" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M97.55 60.85L71.8 48l25.75-12.85c1.2-.6 1.95-1.8 1.95-3.15 0-1.35-.75-2.55-1.95-3.15l-32-16c-1-.5-2.15-.5-3.15 0l-32 16c-1.2.6-1.95 1.8-1.95 3.15v32c0 1.2.65 2.35 1.65 3l.3.15L56.15 80 30.4 92.85c-1.2.6-1.95 1.8-1.95 3.15 0 1.35.75 2.55 1.95 3.15l32 16c.5.25 1.05.35 1.55.35s1.05-.1 1.55-.35l32-16c1.2-.6 1.95-1.8 1.95-3.15V64c.05-1.35-.7-2.55-1.9-3.15zM64 19.9L88.15 32 64 44.1 39.85 32 64 19.9zM35.5 37.65L56.15 48 35.5 58.35v-20.7zM39.85 64L64 51.9 88.15 64 64 76.1 39.85 64zM60.5 85.65v20.65L39.85 95.95l20.65-10.3zm32 8.2l-25 12.5V82.2l25-12.5v24.15z"></path></svg>`
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.
