On Observable, each cell is a unit that can be evaluated independently, with two sides to it — you have the source code editor, and you have the rendered display (either a chunk of DOM or canvas that you’ve drawn, or an interactive inspector for JS values).
Now, the important thing is that the code half of the cell is often collapsed. You navigate around the notebook, toggling open and closed the code editors, and typing into them. If the code is on top, the entire cell jumps when it opens and closes, pushing the rendered display up and down. If the code is on the bottom, it emerges from the half of the cell that is always there, and the display is stable.
Ultimately, that’s why each cell has content before source code — the content is always there, and the code may or may not be visible, so working with the notebook as a whole feels much more stable and less jumpy with the rendered value as primary and the source code as secondary.
On Observable, each cell is a unit that can be evaluated independently, with two sides to it — you have the source code editor, and you have the rendered display (either a chunk of DOM or canvas that you’ve drawn, or an interactive inspector for JS values).
Now, the important thing is that the code half of the cell is often collapsed. You navigate around the notebook, toggling open and closed the code editors, and typing into them. If the code is on top, the entire cell jumps when it opens and closes, pushing the rendered display up and down. If the code is on the bottom, it emerges from the half of the cell that is always there, and the display is stable.
Ultimately, that’s why each cell has content before source code — the content is always there, and the code may or may not be visible, so working with the notebook as a whole feels much more stable and less jumpy with the rendered value as primary and the source code as secondary.