The avatar for @dis-2023-fall
DIS-2023-FALL
Public
Thomas Data Wrangling
Edited
Nov 12, 2023
1
Thomas Data Wrangling
Introduction to data wrangling and analysis in JavaScript - Session 4 Follow-along notebookIntroduction to data wrangling and analysis in JavaScript - Session 3 Follow-along NotebookIntroduction to data wrangling and analysis in JavaScript — Session 2 follow-along notebook
Session 1
Insert cell
Insert cell
Insert cell
burrito = ["chicken", 4.2, false, "avocado", 11.99]

Insert cell
burrito[3]

Insert cell
burrito.length
Insert cell
burrito.indexOf("4.2")
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
droids.length
Insert cell
droids[2].height

Insert cell
Object.keys(droids[0])
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
restaurantBills.map((d) => d.bill * d.tipPercent)
Insert cell
Insert cell
nyc_water = FileAttachment("nyc_water.csv").csv({typed: true})
Insert cell
nyc_water
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
nyc_water[2]
Insert cell
nyc_water[8]["Consumption (HCF)"]
Insert cell
nyc_water[99].Location
Insert cell
nyc_water.map(d => d["Current Charges"] / d["Consumption (HCF)"])
Insert cell
Activity 5
Insert cell
Plot.plot({
marks: [
Plot.dot(nyc_water, {
x: "Consumption (HCF)",
y: "Current Charges",
fill: "darkgreen",
opacity: 0.5,
symbol: "circle",
r: "Consumption (HCF)"
})
],
x: { domain: [0, 5e4], grid: true, tickFormat: ".1s" },
marginLeft: 100
})
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