Changelog 2018-03-28 Welcome back to the Changelog, where we cover recent improvements and new features for Observable notebooks! Love it? š Hate it? š” Let us know on the forum or by email.
Itās a small thing, but notebooks can now use relative links, making it easier to reference other notebooks and cells within the current notebook. Weāre still working on making it easier to find awesome notebooks (beyond featured collections and browsing recent), so we encourage you to curate and share your own favorites. See Philippe RiviĆØreās list for inspiration!
Hereās a link to a notebook: Metaballs!
And hereās a link to a cell: File
Observableās inspector can now handle very large arrays with aplomb. For example, the following array has a million elements, but opens or closes instantly:
new Uint8Array(1e6) // 1MB
The inspector now reveals empty slots in sparse arrays:
[0, 1, 2,,,,, 7]
Though rarely-used, the inspector now shows named properties on collections:
{ let m = new Map([["foo", 1], ["bar", 2]]); m.property = "Surprise!"; return m; }
To make it easier to bring data into Observable, notebooks now have same-origin access! This means you can make a cross-origin request to (or fetch from) a server that requires an origin header. Servers can selectively enable access to specific authors using the authorās domain. For example, my domain is:
window.location.host
Same-origin access also enables notebooks to use local storage if the reader allows it: browsers block third-party cookies by default, and a notebook is typically considered a third party. Because each author has a separate domain, local storage used by one author isnāt readable by other authors. (The reader, of course, will always be able to read whatās in their own local storage!) Notebooks can also now request access to privileged features such as geolocation and media capture. If you grant a privileged feature, the grant applies only to notebooks by the author of the current notebook; other authors wonāt have access unless you separately grant them. To demonstrate, here is a button that will request your current position:
viewof position = { const form = html`<form><button name=button>Where am I?`; form.button.onclick = event => { event.preventDefault(); navigator.geolocation.getCurrentPosition( position => { form.value = position; form.dispatchEvent(new CustomEvent("input")); }, error => { form.value = Promise.reject(error); form.dispatchEvent(new CustomEvent("input")); }, { timeout: 5000, maximumAge: Infinity } ); }; return form; }
[position.coords.longitude, position.coords.latitude]
The standard library has a few new features, too. Promises.never has been replaced by the magic invalidation promise. This promise resolves when the current cell is re-evaluated: when the cellās code changes, when it is run using Shift-Enter, or when a referenced input changes. By handling invalidation, a cell can free resources such as web workers or timer loops. Below is an example using invalidation to revoke a blob URL when itās no longer needed. Click the Choose File button and select an image to see it in action.
viewof image = html`<input type="file" accept=".jpg,.png,.gif">`
{ const src = URL.createObjectURL(image); invalidation.then(() => URL.revokeObjectURL(src)); return html`<img src="${src}">`; }
The new DOM.uid method returns a unique identifier. These are often needed in SVG to link between elements, such as for href and clip-path attributes. For example, in the treemap below, the text labels are clipped to the surrounding nodeās rectangular cell. By using DOM.uid, your identifiers are guaranteed unique even when your notebook is imported.
treemap
import {chart as treemap} from "@mbostock/d3-treemap"
Lastly, require now supports data: and blob: URLs! This is especially useful if you want to require a local JavaScript file that you are editing outside of Observable. Click the button below and choose a JavaScript file to try it out. (Youāll need an AMD-compatible bundle; see Tomās require debugger for tips.)
viewof file = html`<input type="file" accept=".js">`
require(URL.createObjectURL(file))
Thanks for reading, and thanks for your feedback! š