Public
Edited
Nov 11, 2021
Insert cell
Insert cell
Insert cell
// Url from Pudding Data Github
peopleUrl = "https://raw.githubusercontent.com/the-pudding/wiki-death-data/master/web-data/people.csv"
Insert cell
peopleRaw = aq.loadCSV(peopleUrl)
Insert cell
Inputs.table(peopleRaw.objects())
Insert cell
Insert cell
Insert cell
Insert cell
people = peopleRaw.select(
"name",
"year_of_death",
"date_of_death",
"death_views_adjusted_1",
"industry",
"cause",
"thumbnail_source",
"extract"
)
Insert cell
Insert cell
peopleStep1 = people.derive({
combined_date: (d) =>
d.date_of_death + ", " + d.year_of_death + " 00:00:00 GMT"
})
Insert cell
Insert cell
peopleStep2 = peopleStep1.derive({
death_date: (d) => aq.op.parse_date(d.combined_date)
})
Insert cell
Inputs.table(peopleStep2)
Insert cell
Insert cell
peopleData = peopleRaw
.select(
"name",
"year_of_death",
"date_of_death",
"death_views_adjusted_1",
"industry",
"cause",
"thumbnail_source",
"extract"
)
.derive({
combined_date: (d) =>
d.date_of_death + ", " + d.year_of_death + " 00:00:00 GMT"
})
.derive({
death_date: (d) => aq.op.parse_date(d.combined_date)
})
.derive({
status: (d) => "dead"
})
.concat(livingTable)
.objects()
Insert cell
Date.parse("July 31, 2015")
Insert cell
FIX the Date Transformation
Insert cell
Inputs.table(peopleData)
Insert cell
Insert cell
vegaEmbed = require("vega-embed@6")
Insert cell
Insert cell
vegaEmbed({
width: 600,
height: 500,
data: { values: peopleData },
mark: { type: "circle" },
encoding: {
x: { field: "death_date", type: "temporal" },
y: { field: "death_views_adjusted_1", type: "quantitative" },
size: {
field: "death_views_adjusted_1",
type: "quantitative",
legend: null
},
color: { value: "grey" }
}
})
Insert cell
Insert cell
vegaEmbed({
width: 600,
height: 500,
params: [
{ name: "hover", select: { type: "point", on: "mouseover", nearest: true } }
],
data: { values: peopleData },
mark: { type: "circle", tooltip: true },
encoding: {
x: { field: "death_date", type: "temporal" },
y: { field: "death_views_adjusted_1", type: "quantitative" },
size: {
field: "death_views_adjusted_1",
type: "quantitative",
legend: null
},
color: {
condition: { param: "hover", empty: false, value: "purple" },
value: "grey"
},
tooltip: [
{ field: "name", type: "nominal" },
{ field: "cause", type: "nominal" },
{ field: "death_date", type: "temporal" },
{ field: "extract", type: "nominal" }
]
}
})
Insert cell
Insert cell
vegaEmbed({
width: 600,
height: 500,
padding: 20,
params: [
{
name: "hover",
select: { type: "point", on: "mouseover", nearest: true }
},
{
name: "widget",
select: { type: "point", fields: ["cause"] },
bind: {
input: "radio",
options: ["Cancer", "Heart Failure", "Illness", "Heart Failure"],
name: "Causes"
}
}
],
data: { values: peopleData },
mark: { type: "circle", tooltip: true },
encoding: {
x: { field: "death_date", type: "temporal" },
y: { field: "death_views_adjusted_1", type: "quantitative" },
size: {
field: "death_views_adjusted_1",
type: "quantitative",
legend: null
},
color: {
condition: { param: "hover", empty: false, value: "purple" },
value: "grey"
},
tooltip: [
{ field: "name", type: "nominal" },
{ field: "cause", type: "nominal" },
{ field: "death_date", type: "temporal" },
{ field: "extract", type: "nominal" }
],
opacity: {
condition: { param: "widget", value: 1 },
value: 0.3
}
}
})
Insert cell
Insert cell
vegaEmbed({
width: 600,
height: 500,
padding: 20,
params: [
{
name: "hover",
select: { type: "point", on: "mouseover", nearest: true }
},
{
name: "widget",
select: { type: "point", fields: ["cause"] },
bind: {
input: "radio",
options: ["Cancer", "Heart Failure", "Illness", "Heart Failure"],
name: "Causes"
}
}
],
data: { values: peopleData },
mark: { type: "circle", tooltip: true },
encoding: {
x: { field: "death_date", type: "temporal" },
y: { field: "death_views_adjusted_1", type: "quantitative" },
size: {
field: "death_views_adjusted_1",
type: "quantitative",
legend: null
},
fill: {
condition: { param: "hover", empty: false, value: "purple" },
value: "grey"
},
stroke: {
field: "status",
type: "nominal",
scale: { range: ["white", "purple"] }
},
tooltip: [
{ field: "name", type: "nominal" },
{ field: "cause", type: "nominal" },
{ field: "death_date", type: "temporal" },
{ field: "extract", type: "nominal" }
],
opacity: {
condition: { param: "widget", value: 1 },
value: 0.3
}
}
})
Insert cell
vegaEmbed({
data: { values: peopleData },
transform: [{ filter: { field: "status", equal: "living" } }],
mark: { type: "circle", fill: "white", stroke: "purple" },
encoding: {
x: { field: "death_date", type: "temporal" },
y: { field: "death_views_adjusted_1", type: "quantitative" },
size: {
field: "death_views_adjusted_1",
type: "quantitative",
legend: null
}
}
})
Insert cell
Insert cell
Insert cell
Inputs.table(peopleAllData)
Insert cell
peopleAllData = aq
.from(peopleData)
.derive({
status: (d) => "dead"
})
.concat(livingTable)
Insert cell
living = ({
name: ["LeBron James", "Donald Trump", "Meghan Markle"],
year_of_death: [null, null, null],
date_of_death: [null, null, null],
death_views_adjusted_1: [
1363350.048212315,
3398734.175728988,
4278378.087589942
],
industry: [null, null, null],
cause: [null, null, null],
thubmnail_image: [null, null, null],
extract: [null, null, null],
combined_date: [null, null, null],
death_date: [
new Date(2016, 5, 20),
new Date(2017, 0, 20),
new Date(2018, 4, 19)
],
status: ["living", "living", "living"]
})
Insert cell
livingTable = aq.table(living)
Insert cell
Inputs.table(livingTable)
Insert cell
combinedTable = peopleAllData.concat(livingTable)
Insert cell
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