Platform
Solutions
Resources
Pricing
Sign in
Sign up
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Workspace
Fork
Public
Hands-on Tutorials
By
Paul Buffa
Edited
Aug 21, 2023
54 forks
Importers
112 stars
1
Insert cell
Insert cell
Insert cell
4
Insert cell
Insert cell
myNumber
=
10
*
1000
Insert cell
Insert cell
myString
=
10
*
"JavaScript is cool!"
Insert cell
Insert cell
Insert cell
myObject
=
(
{
name
:
"Paul"
,
age
:
25
}
)
Insert cell
myObject
.
name
Insert cell
Insert cell
Insert cell
myArrayOfObjects
=
[
{
year
:
2022
,
city
:
'New York'
,
population
:
8380000
}
,
{
year
:
2021
,
city
:
'New York'
,
population
:
8419000
}
,
{
year
:
2020
,
city
:
'New York'
,
population
:
8444000
}
,
]
Insert cell
Insert cell
Insert cell
Insert cell
myArrayOfObjects
[
0
]
Insert cell
Insert cell
Insert cell
myNewObject
=
(
{
state
:
'California'
}
)
Insert cell
myNewObject
.
state
Insert cell
Insert cell
Insert cell
Insert cell
[
1
,
2
,
3
,
4
,
5
]
.
filter
(
d
=>
d
<
3
)
Insert cell
Insert cell
Insert cell
myData
=
[
{
name
:
'Paul'
,
city
:
'Denver'
}
,
{
name
:
'Robert'
,
city
:
'Denver'
}
,
{
name
:
'Ian'
,
city
:
'Boston'
}
,
{
name
:
'Cobus'
,
city
:
'Boston'
}
,
{
name
:
'Ayodele'
,
city
:
'New York'
}
,
{
name
:
'Mike'
,
city
:
'New York'
}
,
]
Insert cell
myData
.
filter
(
d
=>
d
.
city
==
'Denver'
)
Insert cell
Insert cell
Insert cell
myNewArray
=
myData
.
map
(
d
=>
d
.
name
)
Insert cell
Insert cell
myNewerArray
=
myData
.
map
(
d
=>
(
{
...
d
,
date
:
new
Date
(
)
}
)
)
Insert cell
Insert cell
Insert cell
Insert cell
1
function
myFunction
(
)
{
return
'This is the output of my function!'
}
Insert cell
Insert cell
myFunction
(
)
Insert cell
Insert cell
function
myFunctionWithParameters
(
firstName
,
lastName
)
{
return
`My first name is ${
firstName
}, and my last name is ${
lastName
}.`
}
Insert cell
myFunctionWithParameters
(
'Dr'
,
'Pepper'
)
Insert cell
Insert cell
Insert cell
Insert cell
myModernFunctionWithParameters
=
(
firstName
,
lastName
)
=>
{
return
`My first name is ${
firstName
}, and my last name is ${
lastName
}.`
}
Insert cell
Insert cell
Insert cell
[
1
,
2
,
3
,
4
,
5
]
.
filter
(
d
=>
d
<
3
)
Insert cell
Insert cell
[
1
,
2
,
3
,
4
,
5
]
.
filter
(
function
(
d
)
{
return
d
<
3
}
)
Insert cell
Insert cell
Insert cell
{
if
(
1
>
2
)
{
return
'Math is broken'
// If this statement is true return this
}
else
{
return
'Math still works!'
// If the first statement was false, return this
}
}
Insert cell
Insert cell
Insert cell
{
if
(
1
>
2
)
{
return
'Math is broken'
// If this statement is true, return this
}
else
if
(
1
==
'1'
)
{
//
return
'Math works?'
// If the second statement is true, return this
}
else
{
return
'Math is an synthetic a priori truth'
// If neither statements were true, return this
}
}
Insert cell
Insert cell
1
==
1
Insert cell
Insert cell
1
==
'1'
Insert cell
1
===
'1'
Insert cell
Insert cell
{
if
(
1
>
2
)
{
// If this statement is true
return
'Math is broken'
// return this
}
else
{
// if the first statement was not true
return
'Math still works!'
// return this
}
}
Insert cell
Insert cell
variableSetToCodeBlock
=
{
const
today
=
new
Date
(
)
;
return
today
.
getFullYear
(
)
}
Insert cell
Insert cell
Insert cell
Insert cell
{
let
string
=
''
for
(
let
i
=
0
;
i
<=
5
;
i
++
)
{
string
+=
i
}
return
string
}
Insert cell
Insert cell
Insert cell
myValues
=
[
1
,
20
,
13
,
4
,
55
,
6
]
Insert cell
{
let
largestNumber
=
0
;
// Declare a variable for the largest number
for
(
let
i
=
0
;
i
<
myValues
.
length
-
1
;
i
++
)
{
// Loop through all the values in my array
if
(
myValues
[
i
]
>
largestNumber
)
{
// Check if the value in the array is larger that the largestNumber
largestNumber
=
myValues
[
i
]
// If so, assign the value as the new largest number
}
}
return
largestNumber
}
Insert cell
Insert cell
d3
.
max
(
myValues
)
Insert cell
Insert cell
Insert cell
{
let
largestNumber
=
0
;
// Create a variable for the largest number
let
i
=
0
;
while
(
i
<
myValues
.
length
-
1
)
{
if
(
myValues
[
i
]
>
largestNumber
)
{
// Check if the value in the array is larger that the largestNumber
largestNumber
=
myValues
[
i
]
// If so, assign the value as the new largest number
}
i
++
;
}
return
largestNumber
}
Insert cell
Insert cell
Insert cell
{
const
width
=
300
;
const
height
=
100
;
const
r
=
30
;
const
svg
=
d3
.
create
(
'svg'
)
.
attr
(
'width'
,
width
)
.
attr
(
'height'
,
height
)
;
const
circle
=
svg
.
append
(
'circle'
)
.
attr
(
'r'
,
r
)
.
attr
(
'cy'
,
height
/
2
)
.
attr
(
'cx'
,
r
)
;
let
cx
=
30
;
while
(
true
)
{
// Loop goes on forever
yield
svg
.
node
(
)
;
await
Promises
.
delay
(
2000
)
;
// This causes the loop to "wait" 2000 milliseconds
cx
==
r
?
cx
=
width
-
r
:
cx
=
r
;
circle
.
transition
(
)
.
duration
(
1500
)
.
attr
(
'cx'
,
cx
)
;
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
One platform
to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Try it for free
Learn more
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Show 4 comments
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myNumber
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
myString
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myObject
Add comment
Copy import
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myArrayOfObjects
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
screenShot20220615At34427Pm
Edit
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myNewObject
Add comment
Copy import
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
Edit
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myData
Add comment
Copy import
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myNewArray
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
myNewerArray
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myFunction
Show 1 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
myFunctionWithParameters
Add comment
Copy import
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myModernFunctionWithParameters
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
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
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
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
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
variableSetToCodeBlock
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
Edit
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myValues
Add comment
Copy import
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
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
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dataTypes
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML