3 ms·

I wrote more about the motivation for Observable (formerly d3.express) last year: https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0 https://medium.

I wrote more about the motivation for Observable (formerly d3.express) last year: https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0 https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3... It’s easy to use D3 within Observable, but it’s not pre-loaded or specifically built-in. Any browser library published to npm can be loaded via require (for AMD) or dynamic import (for ES modules). I’ve published a bunch of notebooks with D3 but you’ll find other ones with THREE.js, Vega-Lite, Leaflet and other libraries.

arnioxux 9y ago
Are the language/syntax differences documented somewhere? It's difficult to tell if something is an obscure early stage ecmascript proposal or a language feature specific to observablehq. For example in https://beta.observablehq.com/@mbostock/introduction-to-notebooks https://beta.observablehq.com/@mbostock/introduction-to-note... import {canvas as flood} with {height} from "@mbostock/randomized-flood-fill" or how you define generators i = { let i = 0; while (true) { yield ++i; } } etc
- mbostock 9y ago
  We’re still writing more documentation, but there’s a bit more detail here (and I’ll be posting more soon): https://beta.observablehq.com/@mbostock/introduction-to-code https://beta.observablehq.com/@mbostock/introduction-to-code To summarize, the body of a cell is typically either an expression or a block statement, akin to the body of an arrow function. If a cell starts with name = …, then it has a name and can be referenced by other cells. So, the name = part is specific to Observable, but the expression and block statement is normal JavaScript. The import declaration is similar to a normal static ES import, but the with clause allows you to inject local definitions into the imported notebook.
  - dunham 9y ago
    I got a little tripped up because I tried to assign a literal object to a name. e.g. name = { foo: 1 } doesn't work. I ended up doing: name = { return { foo: 1} } but after your explanation, I guessed that this would also work: name = ({ foo: 1})
    - mbostock 9y ago
      Yep!
d0mine 9y ago
There is mybinder.org to run jupyter notebooks online . For example, https://github.com/norvig/pytudes https://github.com/norvig/pytudes
- Hex-3-En 9y ago
  There's also some (currently) free cloud version by microsoft available on https://notebooks.azure.com https://notebooks.azure.com in a preview state, but works great already. (Tested python3 only)

arnioxux 9y ago

Are the language/syntax differences documented somewhere? It's difficult to tell if something is an obscure early stage ecmascript proposal or a language feature specific to observablehq. For example in https://beta.observablehq.com/@mbostock/introduction-to-notebooks https://beta.observablehq.com/@mbostock/introduction-to-note... import {canvas as flood} with {height} from "@mbostock/randomized-flood-fill" or how you define generators i = { let i = 0; while (true) { yield ++i; } } etc

mbostock 9y ago
We’re still writing more documentation, but there’s a bit more detail here (and I’ll be posting more soon): https://beta.observablehq.com/@mbostock/introduction-to-code https://beta.observablehq.com/@mbostock/introduction-to-code To summarize, the body of a cell is typically either an expression or a block statement, akin to the body of an arrow function. If a cell starts with name = …, then it has a name and can be referenced by other cells. So, the name = part is specific to Observable, but the expression and block statement is normal JavaScript. The import declaration is similar to a normal static ES import, but the with clause allows you to inject local definitions into the imported notebook.
- dunham 9y ago
  I got a little tripped up because I tried to assign a literal object to a name. e.g. name = { foo: 1 } doesn't work. I ended up doing: name = { return { foo: 1} } but after your explanation, I guessed that this would also work: name = ({ foo: 1})
  - mbostock 9y ago
    Yep!

d0mine 9y ago

There is mybinder.org to run jupyter notebooks online . For example, https://github.com/norvig/pytudes https://github.com/norvig/pytudes

Hex-3-En 9y ago
There's also some (currently) free cloud version by microsoft available on https://notebooks.azure.com https://notebooks.azure.com in a preview state, but works great already. (Tested python3 only)