Platform
Resources
Pricing
Sign in
Contact us
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Workspace
Fork
Public
JavaScript in Observable
Edited
Jan 25, 2023
3 forks
99 stars
JavaScript in Observable
Introduction to generators
Invalidation
Introduction to promises
Introduction to require
Introduction to mutable state
Insert cell
Insert cell
data
=
d3
.
csv
(
"https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv"
)
Insert cell
Insert cell
data
.
map
(
d
=>
+
d
.
Year
)
Insert cell
Insert cell
Promises
Insert cell
Insert cell
Promises
.
delay
(
3000
,
"Hello, world!"
)
Insert cell
Insert cell
{
let
i
=
0
;
while
(
true
)
{
yield
Promises
.
tick
(
1000
,
++
i
)
;
}
}
Insert cell
Insert cell
{
let
promise
=
Promises
.
delay
(
3000
,
"Hello, "
)
;
return
promise
+
"world!"
;
// 💥 Oops!
}
Insert cell
Insert cell
{
let
greeting
=
await
Promises
.
delay
(
3000
,
"Hello, "
)
;
return
greeting
+
"world!"
;
}
Insert cell
Insert cell
Promises
.
delay
(
3000
,
"Hello, "
)
.
then
(
greeting
=>
greeting
+
"world!"
)
Insert cell
Insert cell
d3
=
require
(
"d3-fetch@1"
)
Insert cell
Insert cell
new
Promise
(
(
resolve
,
reject
)
=>
{
setTimeout
(
(
)
=>
{
resolve
(
"Time’s up!"
)
;
}
,
5000
)
;
}
)
Insert cell
Insert cell
new
Promise
(
(
resolve
,
reject
)
=>
{
setTimeout
(
(
)
=>
{
reject
(
new
Error
(
"😱"
)
)
}
,
1000
)
;
}
)
.
catch
(
e
=>
"caught the error! "
+
e
.
message
)
Insert cell
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Try it for free
Learn more
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML