What is observable?
Observable makes working with data more visible, approachable, interactive, transparent and shareable. If you’ve ever seen New York Time’s interactive map, flow chart and graph, those can be found on Observable because Mike Bostock built those.
Observable is the best place to learn D3 because of the supportive community and learning resources. User can write a notebook, which has reactive cells. so you can implement D3 in the same page with less code.
Don’t get intimidated because it’s a new language to learn. It’s extremely special. It’s also a live editor and a collaboration platform. It will excite you as you learn more about it because it’s clever.
If you are looking to quickly copy and paste D3 code into your project, this is a good source. However, Observable is such a cool tool. If you are digging deeper with the data visualization, you will come back to Observable.
“You can download the vanilla JavaScript for any notebook by clicking Download Code in the notebook menu. (See Downloading and Embedding 22 for details.) This code can be self-hosted so you can run whatever you create in Observable anywhere. And our embeds are much more powerful than iframes, allowing deep integration (e.g., with React 6). We’re making this easier; see Jeremy’s Handy Embed Code Generator 12 for a start. This transpiled code isn’t intended to be edited directly; we recommend you edit on Observable.” — Mike Bostock
LET’S GET INTO THE OBSERVABLE
- Notebook, Cells, Reactive Markdown & HTML
md`# HTML, MD, Learning Observable`
First go to `+new` to create a new notebook to learn how it works. md stands for mark down. with the backtick, ` , string interpolation and #, you can create a header. When you enter shift + enter, you create a new header cell.
md`## Tasting wine
## is level 2 header in the notebook, just like <h2> in html.
bullet points
- *italic* or **bold** text
- [websites](https://observablehq.com)
- the number ${ 4 + 5}
You can also use asterisk * to make the text italic or bold. When you want to link, use the square bracket and parenthesis. If you use template literal, dollar sign and the curly braces, it will process everything between the tags.
Observable turns md text into html element in the behind the scene and you can also implement html directly into the notebook.
html`<h2> heading </h2>`
Observable magic: Live reactive updates. You can include values from other cells from the note book within the html and it updates dynamically.
fav = html `<p> My favorite color is <span style = “font-weight:bold; color : ${color}”> this </span></p>`
color = “purple”
2. Reactive Dataflow
Code runs Reactive non-linear way in Observable. In the notebook, the visual order doesn’t matter so all the cells can be in any order because observable looks for source code that’s needed. One cool feature Observable has is that there’s a data relationship map on the top right of the notebook.
You can use this notebook visualizer to see the relationship between the data in one notebook.
3. How to capture User Input and Interactivity? use VIEWOF
It behaves very similar to JS template literal but if you use viewof it prints what the user sees. So user don’t have to put ${yourName.value}
viewof yourName = html
<imput type = text>html
<h2> Hello, ${yourName}!</h2>
will print whatever is listed in the input box.
Styling
viewof yourName = html
<imput type = text>html
<h2 style = 'color:${yourColor}'> Hello, ${yourName}!</h2>
This will let the user chose whatever color they select in the observable notebook.
Inputs
This article has a lot of input forms that user can interact with your notebook. Let’s make a bar chart! More detail please click this link to my notebook.
4. JavaScript and Observable
5. Imports & Remixing Cells
The best thing about observable is the community encourages you to NOT build data visualization from the scratch because that’s just waste of time. They encourage you to steal already written code, copy and past it with the proper attribution and credit, then manipulate the data. This honestly have been the best way to learn how to code from me. Learn from the best and create your own. Go to mBostock’s Phases of the moon then click the cell and figure out what’s the cell is called.
import { cellName } from
pathToTheNoteBook
you would import the name of the cell from the path. The example is below.
import { chart } from ‘@mbostock/phases-of-the-moon’
then you can just type `chart` and the actual chart will appear in your noteBook. Now you successfully stole the chart but it’s not interactive! So what do we do? We add the input forms.
import { chart, viewof year } from ‘@mbostock/phases-of-the-moon’
add year in the curly braces.
6. Getting Data into a Notebook
7. Sharing, publishing & embedding
Observable playlist
