Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Observable Notebooks

beta.observablehq.com

Post reply on HN
Print view View original

51–60 of 136 posts

Re: Show HN: Observable Notebooks

#51

Post by _coveredInBees »

cpsempek wrote: post #22

This couldn't have come at a more convenient time for me. After years of telling myself I'd learn D3 I have finally started to as well as use it at work. I was using an extension in Jupyter but it was behaving unpredictably, and not being a frontend engineer by trade I found the process of sublime + browser foreign and cumbersome. As a big fan of jupyter and zeppelin I am stoked to see notebooks entering the js data…

I learned D3 a year back and am reasonably fluent at it now and I'm not sure I would ever pick this platform to learn D3. The easiest way to learn is simply to have a blank HTML file with your D3 code in it. The reason you want to do this is because you want to take advantage of powerful debugging tools that exist within modern browsers (Chrome dev tools, or equivalent from Firefox). ObservableHQ will simply add a layer in between that will make everything more annoying to debug and slow down experimentation.

I think it is really cool, and I have mountains of respect for Mike for his contributions to the field of data visualization/javascript, but my feeling is that this is more suited for sharing "notebooks" that are interactive and also to potentially allow for collaborative notebook building/demos. In essence, this is a giant evolution over his previous work on bl.ocks.org (https://bl.ocks.org/mbostock)

Re: Show HN: Observable Notebooks

#53

Post by krebby »

To me the killer app for this is to empower data scientists to create useful, ad-hoc visualization apps for their results. Right now the html / presentation story for Jupyter notebooks is awful.

Mike, Jeremy, and Tom, this looks awesome. I'm looking forward to put it through the paces.

Re: Show HN: Observable Notebooks

#54

Post by arnioxux »

mbostock wrote: post #16
danso wrote: post #7

Just in case people were wondering, the site seems to have been overwhelmed for the past 10-15 minutes. But there's a YouTube demo of the tech https://news.ycombinator.com/item?id=16275040 I guess an oversimplified description would be that this is like a Jupyter Notebook specifically for JavaScript. Libraries like D3 are pre-loaded and immediately accessible. Am definitely interested in hearing the details about wha…

I wrote more about the motivation for Observable (formerly d3.express) last year: 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…

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-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

Re: Show HN: Observable Notebooks

#55

Post by joshuamorton »

krebby wrote: post #53

To me the killer app for this is to empower data scientists to create useful, ad-hoc visualization apps for their results. Right now the html / presentation story for Jupyter notebooks is awful. Mike, Jeremy, and Tom, this looks awesome. I'm looking forward to put it through the paces.

>Right now the html / presentation story for Jupyter notebooks is awful.

How so?

Ive found it pretty straightforward to convert matplotlib plots to gif/mp4 for presentation (note: this can be done automatically within the notebook), and plotly is pretty good for truly interactive stuff.

Re: Show HN: Observable Notebooks

#57

Post by goatlover »

danso wrote: post #42
goatlover wrote: post #35

Earlier quoted context omitted.

> 3. It runs in the browser so you have direct access to powerful graphics (and GPU computation): Canvas, SVG, WebGL Jupyter is a web server. Notebooks run in the browser. iPython the kernel can run on the command line in addition to the browser. > 1. You don’t have to install anything, so running (or forking) someone else’s notebook is as simple as clicking a link Jupyter lets you clone notebooks with the click of a…

Jupyter Notebooks run in the browser but what examples are there of being able to write Python and have the same kind of access to the DOM and graphics APIs like you have with JavaScript?

ipywidgets for creating interactive html widges & dashboards and Plotly, Bokeh, and nvd3 are 3 examples for visualaition that integrates Python with JS libraries.

Of course JS gives you full flexibility for talking to the DOM and graphics APIs, but web apps are not the main focus of data science. The web is just one possible means to presentation or collaboration.

Re: Show HN: Observable Notebooks

#58

Post by mbostock »

arnioxux wrote: post #54
mbostock wrote: post #16

Earlier quoted context omitted.

I wrote more about the motivation for Observable (formerly d3.express) last year: 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…

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-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; } }…

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

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.

Re: Show HN: Observable Notebooks

#60

Post by goatlover »

tmcw wrote: post #40
goatlover wrote: post #31

Earlier quoted context omitted.

There's a reason why you would want to run Python and that's the huge, well supported scientific computing libraries it has.

Absolutely! We all quite like Python, and there's no denying that JavaScript doesn't have the same caliber and range of scientific code (yet!). I fully expect plenty of people to do some of the data-crunching in Python, Julia, R, and so on, and bring it into Observable to explore and experiment. And I also expect JavaScript's ecosystem to blossom, especially with WebAssembly & WebGL hitting the mainstream.

No doubt you're right, but I don't think JS is well suited for scientific computing. At least Python gives you operator overloading. Julia and R are designed for this field. It's better for JS to remain on the presentation side for anything sophisticated.
Post reply on HN