Crafting Visual Stories with Data.
Public
Edited
Jul 22
4 forks
Importers
character_list5.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
meta_data7.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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) })
// DERIVE
.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() })
Inputs.table(data)
dialogue - final.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
theChart = Plot.plot({
width: width,
color: {
type: "sequential",
domain: [0, 0.5, 1],
range: ["blue", "white", "red"]
},
marks: [
Plot.circle(dialogueFinal, {
x: "gender split",
y: "rank",
fill: "gender split",
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
})
Interaction Pattern
Select - Mark something interesting (e.g.On Hover show tool tip)
theChartwithTip = Plot.plot({
width: width,
color: {
type: "sequential",
domain: [0, 0.5, 1],
range: ["blue", "white", "red"]
},
marks: [
Plot.circle(dialogueFinal, {
x: "gender split",
y: "rank",
fill: "gender split",
tip: true,
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
})
movieNames = dialogueFinal.map((d) => d.title)
viewof movieHighlight = Inputs.select(movieNames, { label: "Select one" })
highlightTable = dialogueFinal.filter((d) => d.title === movieHighlight)
theChartwithHighlight = Plot.plot({
width: width,
color: {
type: "sequential",
domain: [0, 0.5, 1],
range: ["blue", "white", "red"]
},
marks: [
Plot.circle(dialogueFinal, {
x: "gender split",
y: "rank",
fill: "gender split",
sort: { x: "y", reverse: true }
}),
Plot.circle(highlightTable, {
x: "gender split",
y: "rank",
fill: "#fe34db",
r: 10,
tip: true,
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
})
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.
