Notebooks 2.0 is here.
Crafting Visual Stories with Data.
Cetaocean: Captured, Born and Rescued
Critique: The bar graph used in the visualization combines captured, born and rescued value of species. The visualization gives combined value and thus identifying individual value requires effort to calculate manually. The new visualization uses the layer format for three values rather than the stacked graph and uses filter and hover interaction .
Data Loading
Link to Pudding URL: https://pudding.cool/2017/07/cetaceans/
OceanUrl = "https://raw.githubusercontent.com/the-pudding/data/master/cetaceans/acquisitions.csv"
OceanRaw = d3.csv(OceanUrl)
OceanRaw1= d3.csv(OceanUrl, d3.autoType)
vegaEmbed = require("vega-embed")
Inputs.table(OceanRaw1)
Convert Data from "Wide" to "Tall" Format
Columns
AcqYear: Year
Species: Categorical (Born, Capture, Rescue)
Count
oceanDB = aq.from(OceanRaw1)
.select("AcqYear", "Born", "Capture", "Rescue")
.fold(["Born", "Capture", "Rescue"], {as: ["status", "count"]})
Inputs.table(oceanDB, {width: 600})
Visualization: Layer 1
// Layer 1(capture)
vegaEmbed({
width:400,
height: 600,
data: { values: OceanRaw1 },
mark: { type: "bar" },
encoding: {
x: { field: "AcqYear", type: "q" },
y: { field: "Capture", type: "q" },
}
})
Visualization: Layers and Base view
// Layer 1+2+3
vegaEmbed({
width: 400,
height: 400,
data: { values: OceanRaw1 },
layer: [
{
mark: { type: "bar", fill: "Yellow" },
encoding:{
x: { field: "AcqYear", type: "q" },
y: { field: "Capture", type: "q" },
}
},
{
mark: { type: "bar", fill: " Green",},
encoding: {
x: { field: "AcqYear", type: "q" },
y: { field: "Born", type: "quantitative" },
}
},
{
mark: { type: "bar", fill: "Blue" },
encoding:{
x: { field: "AcqYear", type: "q" },
y: { field: "Rescue", type: "quantitative" },
}
},
]
})
Tool Tip
// Layer 1+2+3
vegaEmbed({
width: 820,
height: 500,
data: { values: OceanRaw1 },
layer: [
{
mark: { type: "bar", fill: "Pink", "tooltip": true },
encoding:{
x: { field: "AcqYear", type: "n" },
y: { field: "Capture", type: "q" },
size: {type: "quantitative"},
}
},
{
mark: { type: "bar", fill: " lightBlue", "tooltip": true},
encoding: {
x: { field: "AcqYear", type: "n" },
y: { field: "Born", type: "quantitative" },
}
},
{
mark: { type: "bar", fill: "darkOrange", "tooltip": true },
encoding:{
x: { field: "AcqYear", type: "n" },
y: { field: "Rescue", type: "quantitative" },
}
},
]
})
Filter
vegaEmbed({
width: 850,
height: 500,
data: { values: OceanRaw1 },
params: [{
name: "Capture_Born_Rescue",
value: 0,
bind: { input: "range", min: 0, max: 100, step: 5 }
}
],
transform: [{ filter: "datum.Total > Capture_Born_Rescue" }],
layer: [
{
mark: { type: "bar", fill: "Pink",size: 5, "tooltip": true },
encoding:{
x: { field: "AcqYear", type: "n" },
y: { field: "Capture", type: "q" },
size: {type: "quantitative"},
}
},
{
mark: { type: "bar", fill: " lightBlue", size: 5, "tooltip": true },
encoding: {
x: { field: "AcqYear", type: "n" },
y: { field: "Born", type: "quantitative" },
}
},
{
mark: { type: "bar", fill: "darkOrange", size: 5, "tooltip": true },
encoding:{
x: { field: "AcqYear", type: "n" },
y: { field: "Rescue", type: "quantitative" },
}
},
]
})
Filter 2: Radio Button Err
Visualization 1
// Layer 1+2+3
vegaEmbed({
width: 850,
height: 550,
data: { values: OceanRaw1 },
params: [{
name: "Capture_Born_Rescue",
value: 0,
bind: { input: "range", min: 0, max: 100, step: 5 }
},
],
transform: [{ filter: "datum.Total >Capture_Born_Rescue" }],
layer: [
{
mark: { type: "bar", fill: "Pink",size: 5, cornerRadiusEnd: 6, "tooltip": true },
encoding:{
x: { field: "AcqYear", type: "n" },
y: { field: "Capture", type: "q" },
}
},
{
mark: { type: "bar", fill: " lightBlue", size: 5, cornerRadiusEnd: 6, "tooltip": true },
encoding: {
x: { field: "AcqYear", type: "n" },
y: { field: "Born", type: "quantitative" },
}
},
{
mark: { type: "bar", fill: "darkOrange", size: 5, cornerRadiusEnd: 6, "tooltip": true },
encoding:{
x: { field: "AcqYear", type: "n" },
y: { field: "Rescue", type: "quantitative" },
}
},
],
config : {view: {strokeOpacity: 0}}
})
Visualization 2: Survival
The second visualization is about the survival count of cetaocean species for year 2017. The visualization is not created in the article but explained through paras. The dataset for the same is picked from the article.
//Based on the data available
SurvivalUrl = "https://raw.githubusercontent.com/the-pudding/data/master/cetaceans/survivalRates.csv"
SurvivalRaw = d3.csv(SurvivalUrl)
SurvivalRaw1= d3.csv(SurvivalUrl, d3.autoType)
Inputs.table(SurvivalRaw1)
vegaEmbed({
width:600,
height: 200,
data: { values: SurvivalRaw1 },
mark: { type: "bar", size: 20, cornerRadiusEnd: 20, "tooltip": true },
encoding: {
y: { field: "Species", type: "N" },
x: { field: "count", type: "Q" },
color: { field: "Species", type: "n"}
}
})
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.
