Public
Edited
Feb 15, 2024
Insert cell
Insert cell
character_url = "https://pudding.cool/2017/03/film-dialogue/character_list5.csv"
Insert cell
## Data Transformation

Arquero as the library for data manipulation
1. Documentation - https://uwdata.github.io/arquero/
2. Illustration - https://observablehq.com/@uwdata/an-illustrated-guide-to-arquero-verbs
Insert cell
character = d3.csv(character_url, d3.autoType)
Insert cell
Inputs.table(character)
Insert cell
Insert cell
data = aq
.from(character)
// Select the three columns
.select("script_id", "gender", "words")
// Group By
.groupby("script_id", "gender")
// Rollup and Sum words
.rollup({ totalwords: aq.op.sum("words") })
// Group by script_id
.groupby("script_id")
// // PIVOT with key = gender and value = totalwords
.pivot("gender", "totalwords")
// DERIVE
.derive({ gRatio: (d) => d.f / (d.f + d.m) })
Insert cell
Inputs.table(data, { width: 500 })
Insert cell
Insert cell
Plot.frame()
Insert cell
Plot.plot({
height: 200,
marks: [Plot.dot(data, { x: "gRatio", opacity: 0.05, r: 20 })]
})
Insert cell
Plot.plot({
height: 500,
marks: [
Plot.dot(
data,
Plot.dodgeY({ x: "gRatio", fill: "gRatio", r: 2.5, anchor: "top" })
)
]
})
Insert cell
## Data Transfromation 2

- **DERIVE** a column `gratio2` with rounded `gRatio`
- **GROUP BY** by `gRatio2`
- **DERIVE** a new column with the **OP** "Rank"
Insert cell
data2 = aq
.from(data)
// Derive the rounded gRatio
.derive({ gRatio2: (d) => aq.op.round(d.gRatio * 100) / 100 })
// GROUP BY gRatio2
.groupby("gRatio2")
// DERIVE a column with rank within the group
.derive({ rRank: aq.op.rank() })
Insert cell
Inputs.table(data2, { width: 500 })
Insert cell
Insert cell
Plot.plot({
title: "Filmy Dialogues are too Male",
width: width,
height: 500,
y: { reverse: true, axis: null },
//color: { scheme: "BuRd", type: "diverging", pivot: 0.5 },
color: { range: ["blue", "white", "red"], type: "diverging", pivot: 0.5 },
marks: [Plot.dot(data2, { x: "gRatio2", fill: "gRatio2", y: "rRank" })]
})
Insert cell
Insert cell
Plot.plot({
title: "Filmy Dialogues are too Male",
width: width,
height: 500,
y: { reverse: true, axis: null },
//color: { scheme: "BuRd", type: "diverging", pivot: 0.5 },
color: { range: ["blue", "white", "red"], type: "diverging", pivot: 0.5 },
marks: [
Plot.dot(data2, { x: "gRatio2", fill: "gRatio2", y: "rRank" }),
Plot.dot(
data2,
Plot.pointer({ x: "gRatio2", y: "rRank", fill: "red", r: 4 })
),
Plot.tip(
data2,
Plot.pointer({
x: "gRatio2",
y: "rRank",
channels: { movie: "script_id" }
})
)
]
})
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