Platform
Solutions
Resources
Pricing
Sign in
Sign up
David Maynard
Retired Computer Scientist: SRI-ARC (Engelbart), Xerox PARC, Xerox SDS, Electronic Arts, SGI, Google, Box
Workspace
Fork
Public
By
David Maynard
Edited
Apr 19, 2023
1 fork
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
burrito
=
[
"chicken"
,
4.2
,
false
,
"avocado"
,
11.99
,
"beans"
]
Insert cell
Insert cell
// Access the fourth element in burrito:
burrito
[
3
]
Insert cell
Insert cell
// Find the length of the burrito array:
burrito
.
length
Insert cell
Insert cell
// Find the index (position) of the value 4.2 in burrito:
burrito
.
indexOf
(
4.2
)
Insert cell
Insert cell
Insert cell
Insert cell
droids
=
[
{
name
:
"C-3PO"
,
color
:
"gold"
,
height
:
167
}
,
{
name
:
"R2D2"
,
color
:
"white/blue"
,
height
:
96
}
,
{
name
:
"BB-8"
,
color
:
"white/orange"
,
height
:
26.4
}
]
Insert cell
Insert cell
// Find the length of the droids array:
droids
.
length
Insert cell
Insert cell
// Find the value of "height" for the third element in droids (BB-8's height):
droids
[
2
]
.
height
Insert cell
Insert cell
// Find the keys of the first element in the droids array:
droids
[
0
]
Insert cell
Insert cell
Insert cell
Insert cell
restaurantBills
=
[
{
bill
:
49.51
,
tipPercent
:
0.15
}
,
{
bill
:
112.40
,
tipPercent
:
0.22
}
,
{
bill
:
68.25
,
tipPercent
:
0.18
}
,
{
bill
:
27.37
,
tipPercent
:
0.12
}
,
{
bill
:
50.18
,
tipPercent
:
0.17
}
]
Insert cell
Insert cell
// Calculate tips for each bill here:
restaurantBills
.
map
(
(
d
)
=>
d
.
bill
*
d
.
tipPercent
)
Insert cell
Insert cell
Insert cell
Insert cell
nyc_water
=
FileAttachment
(
"nyc_water.csv"
)
.
csv
(
{
typed
:
true
}
)
Insert cell
nyc_water
Filter
Columns
Sort
Slice
Save
Type Table, then Shift-Enter. Ctrl-space for more options.
Insert cell
Insert cell
// Access the third element in the array:
nyc_water
[
2
]
Insert cell
Insert cell
// Access Consumption (HCF) from the ninth element in the array:
nyc_water
[
8
]
[
"Consumption (HCF)"
]
Insert cell
Insert cell
// Access Location from the 100th element in the array:
nyc_water
[
99
]
.
Location
Insert cell
Insert cell
// Use Array.map and an arrow array to return and array with the ratio of Current Charges to Consumption (HCF):
ratios
=
nyc_water
.
map
(
(
d
)
=>
d
[
"Current Charges"
]
/
d
[
"Consumption (HCF)"
]
)
Insert cell
Insert cell
Insert cell
Insert cell
Plot
.
plot
(
{
marks
:
[
Plot
.
dot
(
nyc_water
,
{
x
:
"Consumption (HCF)"
,
y
:
"Current Charges"
,
fill
:
"purple"
,
opacity
:
0.5
,
symbol
:
"star"
,
r
:
"Consumption (HCF)"
}
)
]
,
x
:
{
domain
:
[
0
,
5e4
]
,
grid
:
true
,
tickFormat
:
".1s"
}
,
marginLeft
:
100
}
)
Insert cell
// Create and customize a scatterplot of Consumption (HCF) and Current Charges from the nyc_water data:
Insert cell
Insert cell
import
{
showMe
}
from
"@observablehq/show-me"
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
burrito
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
droids
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
restaurantBills
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
nyc_water
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
Cells
nyc_water
File attachments
nyc_water.csv
CSV
Databases
Filter
Column
Operator
Columns
Sort
Column
Direction
Descending
Ascending
Slice
From
Start
To
End
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
ratios
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
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
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML