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

11–20 of 136 posts

Re: Show HN: Observable Notebooks

#11

Post by mbostock »

d--b wrote: post #6
jashkenas wrote: post #5

Earlier quoted context omitted.

And good place to drop few links, if you'd like to cut to the chase. The finished notebook from the screencast (which you can fork): https://beta.observablehq.com/@jashkenas/earthquakes And a fancier version that spins, reuses the canvas element instead of re-rendering it from scratch, projects the quakes as circles on the surface of the sphere, and offers a bunch of other options to configure (like if you'd like to…

Do you guys have a keyboard shortcuts cheatsheet? I can't figure how to move from one cell to another without clicking or creating a new cell.

If you hit the '?' key (when you don’t have a code editor focused), a help modal appears that shows all the keyboard shortcuts. Most of the keyboard shortcuts are also described in the introduction here: https://beta.observablehq.com/@mbostock/introduction-to-note...

You can change which cell is focused using Option-Tab ⌥⇥ and Shift-Option-Tab ⇧⌥⇥. You can also click on the asterisk (*) in the left margin to edit any cell.

Re: Show HN: Observable Notebooks

#12

Post by d--b »

tmcw wrote: post #10
d--b wrote: post #6

Earlier quoted context omitted.

Do you guys have a keyboard shortcuts cheatsheet? I can't figure how to move from one cell to another without clicking or creating a new cell.

Sure thing! When you're on a notebook, click on your user avatar, then help. Walkthrough: https://file-oxhnhlfzte.now.sh/

Most excellent, thanks much

Re: Show HN: Observable Notebooks

#13

Post by simonw »

jashkenas wrote: post #5
rrherr wrote: post #4

Their new screencast is awesome too! "Observable: An Earthquake Globe in Ten Minutes" https://www.youtube.com/watch?v=uEmDwflQ3xE

And good place to drop few links, if you'd like to cut to the chase. The finished notebook from the screencast (which you can fork): https://beta.observablehq.com/@jashkenas/earthquakes And a fancier version that spins, reuses the canvas element instead of re-rendering it from scratch, projects the quakes as circles on the surface of the sphere, and offers a bunch of other options to configure (like if you'd like to…

I didn't know you were involved in this project too. That screencast is astonishing. Congratulations on the launch!

Re: Show HN: Observable Notebooks

#14

Post by sillysaurus3 »

simonw wrote: post #8

The homepage copy didn't quite capture me... until I realized it was the new thing by D3's Mike Bostock! Maybe worth name-dropping that somewhere on that page? Though I don't know how many people would respond to that other than myself (hopefully lots of people).

Eh. I respect people more for not namedropping themselves, but maybe I'm alone in this.

(Are you sure it's a good idea to perpetuate the status quo? It's hard to get anyone to pay attention to what you've made unless you're already known. That seems a bit unfair to the next generation, and rather the opposite of oldschool hacker ethos.)

Re: Show HN: Observable Notebooks

#15

Post by simonw »

sillysaurus3 wrote: post #14
simonw wrote: post #8

The homepage copy didn't quite capture me... until I realized it was the new thing by D3's Mike Bostock! Maybe worth name-dropping that somewhere on that page? Though I don't know how many people would respond to that other than myself (hopefully lots of people).

Eh. I respect people more for not namedropping themselves, but maybe I'm alone in this. (Are you sure it's a good idea to perpetuate the status quo? It's hard to get anyone to pay attention to what you've made unless you're already known. That seems a bit unfair to the next generation, and rather the opposite of oldschool hacker ethos.)

I totally see where you're coming from - name-dropping like that feels really tacky. I'd shy away from that on my own projects.

The challenge is helping people understand what something is and why it is valuable as quickly as possible. In this case, the fact that the team behind this are Mike Bostock (d3), Jeremy Ashkenas (Backbone, CoffeeScript) and Tom MacWright (Mapbox Studio) feels very relevant to getting me excited about the project.

It's such a strong product that I imagine word of mouth (plus how well it demos) will do that job for them though. This was just my first thought on loading up he page in Mobile Safari (and then realizing what it actually was).

Re: Show HN: Observable Notebooks

#16

Post by mbostock »

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 THREE.js, Vega-Lite, Leaflet and other libraries.

Re: Show HN: Observable Notebooks

#17

Post by ryanianian »

This is really cool and would be a great way to introduce programming concepts in an educational setting. Instant-feedback, inline documentation in a narrative style, and running on a browser really lowers the barrier for entry.

I would have loved something like this when I was learning programming in middle-school decades ago.

Since it comes from the guys behind D3 it's not surprising that much of the visuals come from D3. This is really evocative, but it may limit some of the audience for this tool. I would encourage the developers to take some cues from Apple's swift playgrounds and add visuals and sliders for even some of the simpler language constructs like loops and add some "simple" wrapper functions for drawing elementary shapes. This would definitely be a shift from the intended purpose as I see it right now, but it would have the side-benefit of increasing debugability as well.

Great work - look forward to having the occasion to using it.

Re: Show HN: Observable Notebooks

#20

Post by jashkenas »

ryanianian wrote: post #17

This is really cool and would be a great way to introduce programming concepts in an educational setting. Instant-feedback, inline documentation in a narrative style, and running on a browser really lowers the barrier for entry. I would have loved something like this when I was learning programming in middle-school decades ago. Since it comes from the guys behind D3 it's not surprising that much of the visuals come f…

I would have loved something like this while learning to program as well. I mean ... the Ruby REPL was fun, but this sort of thing is just so much more tactile and visual.

We haven't had time to produce as many demo notebooks as we might have liked, but these notebooks really aren't D3-specific in the slightest. They're a reactive flavor of JavaScript, and anything that produces a value or can be rendered to the DOM will work.

For example, here are a whole mess of Plotly charts: https://beta.observablehq.com/@jashkenas/plotly-js

Here are some (wild) WebGL, Three.js and regl sketches: https://beta.observablehq.com/collection/webgl

And here are some simple native inputs you can use to control your sketches: https://beta.observablehq.com/@jashkenas/inputs

Remember — a "slider" here isn't anything special. It's just a chunk of DOM that produces a number as a value. It can be replaced with anything else you can imagine that produces a number as a value. There's no API there ;)

Post reply on HN