Observable Story

I tried creating a story of sorts using observable and had 2 questions. Here is the story:

Two issues:

  1. When loaded, the page goes to the end, whereas I need the page to be loaded at the start of the story. Is there a workaround to launch this page at the top?
  2. In the last processing sketch (at the very end), I tried coding this directly in observable but it was very slow: https://observablehq.com/@metaphorz/face-circles/2 If you wait long enough, the code will work. I finally gave up and used an “

The last sentence is supposed to be “iframe” but I used angle brackets in the sentence so it tried encoding this.

hi @metaphorz

here are some performance suggestions

You can use direct links to images, no need for iframes

html `<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Serpiente_alquimica.jpg" />`

this iframe loads a very resource intense page, so it takes a couple of seconds

html`<iframe src="https://voyant-tools.org/?corpus=4c0474bf021a755dcd5c947757d83d8a" style="width:900px; height:600px;"></iframe>`

The last cell with an iframe to Openprocessing also is unnecessary, you can use p5js direct on Observable, however the image processing by p5js is very slow, if the original image is resized the sketch is faster. Also no need to have it in a draw loop as you processed it once.


This is really useful. Thanks. I went in and changed the iframes to image html and also for the last sketch (circular pixelization of the snake) I attached a file (of the image) rather than trying to load it over the net. This is much faster.

Although, I still have the problem that when I load the notebook, the notebook web page scrolls to the end. But I’d like to have the story start at the beginning when the notebook is loaded. How do I achieve this? I am guessing that the browser is going to the last asset loaded (that snake image).

I guess the openprocessing Iframe is causing the scroll behavior issue. You can transfer that p5js code to Observable as I’ve shown on my example.


You are right—that did the trick. Good to know for future issues in

web loading. I guess iframe, as you suggested, changed the web page

scrolled location.


Paul Fishwick, PhD
Distinguished University Chair of Arts, Technology, and Emerging Communication
Professor of Computer Science
Director, Creative Automata Laboratory
The University of Texas at Dallas
Arts & Technology
800 West Campbell Road, AT10
Richardson, TX 75080-3021
Home: utdallas.edu/atec/fishwick
Media: medium.com/@metaphorz
Modeling: digest.sigsim.org
Twitter: @PaulFishwick

ONLINE: Webex,Collaborate, TEAMS, Zoom, Skype, Hangout