The avatar for @dgwyer
David Gwyer
I've been developing with WordPress since 2006, and love to code and write about it. My main development work focuses on custom themes and plugins.
Public
Edited
Jun 17, 2023
Fork of Introduction to data wrangling and analysis in JavaScript — Session 2 follow-along notebook
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
biking = [
{ day: "Monday", miles: 6.2, time_hr: 0.53 },
{ day: "Tuesday", miles: 10.0, time_hr: 1.02 },
{ day: "Wednesday", miles: 4.9, time_hr: 0.48 },
{ day: "Thursday", miles: 0, time_hr: 0 },
{ day: "Friday", miles: 18.5, time_hr: 1.59 },
{ day: "Saturday", miles: 7.3, time_hr: 0.86 },
{ day: "Sunday", miles: 0, time_hr: 0 }
]
Insert cell
Insert cell
biking
Insert cell
// Find the miles biked on Friday:

milesFriday1 = biking[biking.map(d => d.day).indexOf("Friday")].miles


Insert cell
milesFriday2 = biking.filter(d => d.day === "Friday")[0].miles
Insert cell
Insert cell
// For each day, find the average biking speed.
avgSpeed = biking.map(d => ({
day: d.day,
avg: d.time_hr === 0 ? 0 : `${(d.miles/d.time_hr).toFixed(2)} mph`,
}))
Insert cell
Insert cell
Insert cell
Insert cell
// Only keep objects (rows) where miles is greater than 10:
biking.filter(d => d.miles > 10)
Insert cell
Insert cell
// Keep rows for Saturday and Monday:
biking.filter(d => d.day === "Saturday" || d.day === "Monday")
Insert cell
Insert cell
// Keep rows where miles is less than 10 AND time_hr is less than 0.5:
biking.filter(d => d.miles < 10 && d.time_hr < 0.5)
Insert cell
Insert cell
// Keep rows *except* for Thursday:
biking.filter(d => d.day !== "Thursday")
Insert cell
Insert cell
Insert cell
// Keep all existing properties; add a new one named 'km' with miles converted to kilometers;

biking.map(d => ({
...d,
km: parseFloat((d.miles * 1.61).toFixed(3))
}))
Insert cell
Insert cell
Insert cell
carData
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
carTable = aq.from(carData)
Insert cell
Insert cell
// Add your data wrangling (using Arquero) here:
carTable
.select("name", "economy (mpg)", "cylinders", "weight (lb)")
.filter((d) => d.cylinders >= 5)
.view()
Insert cell
Insert cell
Insert cell
Insert cell
world_bank_data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
wb
Insert cell
// Use Array map and filter to do the wrangling steps above, storing the output as wb2019:
wb2019 = wb
.map(({ country, year, co2, region }) => ({
country,
year,
co2,
region,
co2_thousands: co2 / 1000
}))
.filter((d) => d.year === 2019)
Insert cell
Insert cell
Insert cell
wbTable = aq.from(wb)
Insert cell
Insert cell
// Use Arquero verbs to do the same wrangling steps:
wbTable.view()
Insert cell
wbEAPArquero = wbTable
.select("country", "year", "co2", "region")
.derive({ co2_thousands: (d) => d.co2 / 1000 })
.filter((d) => d.year == 2019)
.view()
Insert cell
Insert cell
Insert cell
wb2019
Insert cell
// Create a chart of the top 10 CO2 emitting countries in 2019 (using the wb2019 array created above)
Plot.plot({
marginLeft: 200,
marks: [
Plot.barX(wb2019, {
x: (d) => d.co2 / 1e6,
y: "country",
fill: "blueviolet",
stroke: "gray",
sort: { y: "x", _reverse: true, limit: 680 }
})
]
})
Insert cell
Plot.plot({
marginLeft: 200,
x: { domain: [0, 12], grid: true, label: "CO2" },
marks: [
Plot.barX(wb2019, {
x: (d) => d.co2 / 1e6,
y: "country",
fill: "blueviolet",
stroke: "gray",
sort: { y: "x", reverse: true, limit: 10 }
}),
Plot.text(wb2019, {
x: (d) => d.co2 / 1e6,
y: "country",
text: (d) => d.co2 / 1e6,
dx: 2,
textAnchor: "start"
}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
carData = cars
Insert cell
import {aq, op} from "@uwdata/arquero"
Insert cell
import { showMe } from "@observablehq/show-me"
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.
Learn more