You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
html\`The color input (viewof colorzzz) is a \${viewof colorzzz.constructor.name}.\`
112
+
viewof colorzzz;
113
+
\`\`\`
114
+
115
+
Welcome! This notebook gives a quick overview of "Observable Markdown" a mashup of the excellent [Observable HQ](https://observablehq.com) + regular Markdown. Here follows a quick introduction to Observable. For a more technical introduction, see [Observable’s not JavaScript](/@observablehq/observables-not-javascript). For hands-on, see our [introductory tutorial series](/collection/@observablehq/introduction). To watch rather than read, see our [short introductory video](https://www.youtube.com/watch?v=uEmDwflQ3xE)!
116
+
117
+
Its also very easy to embed a value: \${i} inside the Markdown!!!
118
+
119
+
Observable Markdown consists of a single markdown document with live "code" sections.
120
+
121
+
\`\`\`
122
+
2 * 3 * 7
123
+
{
124
+
let sum = 0;
125
+
for (let i = 0; i <= 100; ++i) {
126
+
sum += i;
127
+
}
128
+
return sum;
129
+
}
130
+
\`\`\`
131
+
132
+
Cells can have names. This allows a cell’s value to be referenced by other cells.
133
+
134
+
\`\`\`
135
+
color = "red";
136
+
\`My favorite color is \${color}.\`
137
+
\`\`\`
138
+
139
+
A cell referencing another cell is re-evaluated automatically when the referenced value changes. Try editing the definition of color above and shift-return to re-evaluate.
140
+
141
+
Cells can generate DOM (HTML, SVG, Canvas, WebGL, etc.). You can use the standard DOM API like document.createElement, or use the built-in html tagged template literal:
142
+
143
+
\`\`\`
144
+
html\`<span style="background:yellow;">
145
+
My favorite language is <i>HTML</i>.
146
+
</span>\`
147
+
\`\`\`
148
+
149
+
There’s a Markdown tagged template literal, too. (This notebook is written in Markdown.)
150
+
151
+
\`\`\`
152
+
md\`My favorite language is *Markdown*.\`
153
+
\`\`\`
154
+
155
+
DOM can be made reactive simply by referring to other cells. The next cell refers to color. (Try editing the definition of color above.)
156
+
157
+
\`\`\`
158
+
html\`My favorite color is <i style="background:\${color};">\${color}</i>.\`
159
+
\`\`\`
160
+
161
+
Sometimes you need to load data from a remote server, or compute something expensive in a web worker. For that, cells can be defined asynchronously using [promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises):
162
+
163
+
\`\`\`
164
+
status = new Promise(resolve => {
165
+
setTimeout(() => {
166
+
resolve({resolved: new Date});
167
+
}, 2000);
168
+
})
169
+
\`\`\`
170
+
171
+
A cell that refers to a promise cell sees the value when it is resolved; this implicit await means that referencing cells don’t care whether the value is synchronous or not. Edit the status cell above to see the cell below update after two seconds.
172
+
173
+
\`\`\`
174
+
status
175
+
\`\`\`
176
+
177
+
Promises are also useful for loading libraries from npm. Below, require returns a promise that resolves to the d3-fetch library:
178
+
179
+
\`\`\`
180
+
d3 = require("d3-fetch@1")
181
+
\`\`\`
182
+
183
+
If you prefer, you can use async and await explicitly (not this ):
184
+
185
+
\`\`\`
186
+
countries = (await d3.tsv("https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.tsv"))
187
+
.sort((a, b) => b.pop_est - a.pop_est) // Sort by descending estimated population.
188
+
.slice(0, 10) // Take the top ten.
189
+
\`\`\`
190
+
191
+
Cells can be defined as [generators](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators); a value is yielded up to sixty times a second.
192
+
193
+
\`\`\`
194
+
i = {
195
+
let i = 0;
196
+
while (true) {
197
+
yield ++i;
198
+
}
199
+
}
200
+
\`The current value of i is \${i}.\`
201
+
\`\`\`
202
+
203
+
Any cell that refers to a generator cell sees its current value; the referencing cell is re-evaluated whenever the generator yields a new value. As you might guess, a generator can yield promises for [async iteration](https://github.com/tc39/proposal-async-iteration); referencing cells see the current resolved value.
204
+
205
+
\`\`\`
206
+
date = {
207
+
while (true) {
208
+
yield new Promise(resolve => {
209
+
setTimeout(() => resolve(new Date), 1000);
210
+
});
211
+
}
212
+
}
213
+
\`\`\`
214
+
215
+
Combining these primitives—promises, generators and DOM—you can build custom user interfaces. Here’s a slider and a generator that yields the slider’s value:
216
+
217
+
\`\`\`
218
+
slider = html\`<input type=range>\`
219
+
sliderValue = Generators.input(slider)
220
+
\`\`\`
221
+
222
+
Generators.input returns a generator that yields promises. The promise resolves whenever the associated input element emits an input event. You don’t need to implement that generator by hand, though. There’s a builtin viewof operator which exposes the current value of a given input element:
0 commit comments