Platform
Resources
Pricing
Sign in
Get started
Lars Schöbitz
Workspace
Fork
Public
Introduction to data wrangling and analysis in JavaScript
By
Lars Schöbitz
Edited
May 1, 2023
Introduction to data wrangling and analysis in JavaScript
Session 3 Follow-along Notebook
Session 4 Follow-along notebook
Introduction to data wrangling and analysis in JavaScript — Session 2 follow-along notebook
Introduction to data wrangling and analysis in JavaScript — Session 1 Follow-along version
Insert cell
Insert cell
Insert cell
Insert cell
penguinData
Filter
Columns
Sort
Slice
Save
Type Table, then Shift-Enter. Ctrl-space for more options.
Insert cell
Insert cell
// Add your code here to do the wrangling steps above!
penguinData
.
map
(
(
d
)
=>
(
{
species
:
d
.
species
,
massKilograms
:
d
.
body_mass_g
/
1000
,
billRatio
:
d
.
culmen_length_mm
/
d
.
culmen_depth_mm
}
)
)
.
filter
(
(
d
)
=>
d
.
billRatio
>
3.5
)
Insert cell
Insert cell
Insert cell
Insert cell
// Find the minimum culmen length in penguinData:
d3
.
min
(
penguinData
,
(
d
)
=>
d
.
culmen_length_mm
)
Insert cell
Insert cell
// Find the range of culmen lengths in penguinData:
d3
.
extent
(
penguinData
,
(
d
)
=>
d
.
culmen_length_mm
)
// watch out, it's not d3.range()
Insert cell
Insert cell
// Mean of all body mass (grams) values in penguinData:
d3
.
mean
(
penguinData
,
(
d
)
=>
d
.
body_mass_g
)
Insert cell
Insert cell
// Alternatively:
Insert cell
// Standard deviation of culmen depth:
d3
.
deviation
(
penguinData
,
(
d
)
=>
d
.
culmen_depth_mm
)
Insert cell
Insert cell
// Count of flipper length values:
d3
.
count
(
penguinData
,
(
d
)
=>
d
.
flipper_length_mm
)
Insert cell
Insert cell
penguinData
Filter
2
Columns
Sort
1
Slice
Save
Type Table, then Shift-Enter. Ctrl-space for more options.
Insert cell
penguinData
SELECT * FROM "penguinData"
WHERE "island" IN (${"Torgersen"})
AND "species" IN (${"Adelie"})
ORDER BY "culmen_length_mm" DESC
Insert cell
Insert cell
Insert cell
// Group penguinData by species (store Map as groupSpecies):
groupSpecies
=
d3
.
group
(
penguinData
,
(
d
)
=>
d
.
species
)
Insert cell
Insert cell
// Then get just the Adelies:
groupSpecies
.
get
(
"Adelie"
)
Insert cell
Insert cell
// Group penguinData by species and island (store as groupSpeciesIsland):
groupSpeciesIsland
=
d3
.
group
(
penguinData
,
(
d
)
=>
d
.
species
,
(
d
)
=>
d
.
island
)
Insert cell
Insert cell
// Get observations for Adelie penguins on Dream Island:
groupSpeciesIsland
.
get
(
"Adelie"
)
.
get
(
"Dream"
)
Insert cell
groupSpeciesIsland
.
get
(
"Chinstrap"
)
.
get
(
"Dream"
)
Insert cell
Insert cell
Insert cell
Insert cell
// Find the mean body mass by penguin species:
d3
.
rollup
(
penguinData
,
(
v
)
=>
d3
.
mean
(
v
,
(
d
)
=>
d
.
body_mass_g
)
,
(
d
)
=>
d
.
species
)
.
get
(
"Adelie"
)
// if I just want one pengui
Insert cell
// The same with flatrollup
d3
.
flatRollup
(
penguinData
,
(
v
)
=>
d3
.
mean
(
v
,
(
d
)
=>
d
.
body_mass_g
)
,
(
d
)
=>
d
.
species
)
Insert cell
Insert cell
// Find the mean flipper length by penguin species and sex:
d3
.
rollup
(
penguinData
,
(
v
)
=>
d3
.
mean
(
v
,
(
d
)
=>
d
.
flipper_length_mm
)
,
(
d
)
=>
d
.
species
,
(
d
)
=>
d
.
sex
)
Insert cell
Insert cell
// do the same with Arquero
penguinTable
=
aq
.
from
(
penguinData
)
Insert cell
penguinTable
.
groupby
(
"species"
)
.
rollup
(
{
mean_mass
:
(
d
)
=>
d3
.
mean
(
d
.
body_mass_g
)
,
median_mass
:
(
d
)
=>
d3
.
median
(
d
.
body_mass_g
)
,
min_mass
:
(
d
)
=>
d3
.
min
(
d
.
body_mass_g
)
,
max_mass
:
(
d
)
=>
d3
.
max
(
d
.
body_mass_g
)
}
)
.
view
(
)
Insert cell
penguinTable
.
groupby
(
"species"
)
.
rollup
(
{
mean_mass
:
(
d
)
=>
op
.
mean
(
d
.
body_mass_g
)
,
sd_mass
:
(
d
)
=>
op
.
stdev
(
d
.
body_mass_g
)
}
)
.
view
(
)
Insert cell
Insert cell
Insert cell
arrayOfArrays
=
[
[
1
,
2
]
,
[
3
,
4
]
]
Insert cell
Insert cell
arrayOfArrays
.
map
(
(
[
firstNumber
,
secondNumber
]
)
=>
(
{
firstNumber
,
secondNumber
}
)
)
Insert cell
// Use flatRollup to find mean body mass by penguin species, then map to get an array of objects:
d3
.
flatRollup
(
penguinData
,
(
v
)
=>
d3
.
mean
(
v
,
(
d
)
=>
d
.
body_mass_g
)
,
(
d
)
=>
d
.
species
)
.
map
(
(
[
species
,
meanMass
]
)
=>
(
{
species
,
meanMass
}
)
)
Insert cell
Insert cell
Insert cell
Insert cell
// Create a new bar chart with Observable Plot to visualize mean body mass by species:
Plot
.
plot
(
{
marks
:
[
Plot
.
barY
(
penguinData
,
Plot
.
groupX
(
{
y
:
"mean"
}
,
{
y
:
"body_mass_g"
,
x
:
"species"
,
sort
:
{
x
:
"y"
,
reverse
:
true
}
}
)
)
]
}
)
Insert cell
Insert cell
Insert cell
Insert cell
import
{
showMe
}
from
"@observablehq/show-me"
Insert cell
import
{
aq
,
op
}
from
"@uwdata/arquero"
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
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
Cells
penguinData
File attachments
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
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
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
Cells
penguinData
File attachments
Databases
Filter
island
Operator
species
Operator
Column
Operator
Columns
Sort
culmen_length_mm
Descending
Descending
Ascending
Column
Direction
Descending
Ascending
Slice
From
Start
To
End
Add comment
Select
Duplicate
Copy link
Embed
Delete
Cells
penguinData
File attachments
Databases
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
groupSpecies
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
groupSpeciesIsland
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
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
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
penguinTable
Add comment
Copy import
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
arrayOfArrays
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
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
penguinData
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML