Crafting Visual Stories with Data.
Public
Edited
Nov 21, 2021
2 forks
Importers
5 stars
vegaEmbed(customTooltipSpec, { tooltip: { theme: "card" } })
tooltipFields = [
{ field: "title", type: "nominal" },
{ field: "image", type: "nominal" },
{ field: "extract", type: "nominal", title: "About" },
{ field: "industry", type: "nominal", title: "Industry" },
{ field: "cause", type: "nominal", title: "Cause of Death" }
]
// Add tooltip field and Change the title of the Spec
basicTooltipSpec = {
let spec = _.cloneDeep(baseSpec);
spec.encoding.tooltip = tooltipFields;
spec.title = "Basic Tooltip";
return spec;
}
vegaEmbed(basicTooltipSpec)
<style>
/* Create a two column flex layout
100px 200px
Image Table
Title Table
*/
.card-theme {
width: 320px;
height: 150px;
display: flex;
flex-flow: column wrap;
gap: 10px;
z-index: 10;
}
/* Single Line Title */
.card-theme > h2 {
order: 2;
max-width: 110px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Image Thumbnail as 100x100 */
.card-theme > img {
order: 1;
padding-top: 5px;
object-fit: cover;
object-position: center;
height: 110px;
width: 110px;
}
/* Table Width of 200px */
.card-theme > table {
order: 3;
padding-left: 10px;
max-width: 200px;
}
.card-theme > table > tbody > tr:nth-child(2),
.card-theme > table > tbody > tr:nth-child(3) {
font-style: italic;
text-align: end;
}
/* Remove the Keys */
.card-theme > table > tbody > tr > .key {
display: none;
}
</style>
// Change the title of the Spec
customTooltipSpec = {
let spec = _.cloneDeep(basicTooltipSpec);
spec.title = "Custom CSS Tooltip";
spec.padding = { bottom: 150, top: 10 };
return spec;
}
vegaEmbed(customTooltipSpec, {
tooltip: { theme: "card" }
})
vegaEmbed(baseSpec)
baseSpec = ({
width: 600,
height: 100,
padding: { bottom: 20, top: 20 },
title: "No Tooltip",
mark: { type: "circle" },
transform: [
{
window: [{ op: "row_number", as: "unit" }],
sort: [{ field: "profession" }]
},
{ calculate: "ceil(datum.unit/ 4)", as: "unitX" },
{ calculate: "datum.unit - (datum.unitX - 1) * 4", as: "unitY" }
],
encoding: {
x: { field: "unitX", type: "nominal", axis: null },
y: { field: "unitY", type: "nominal", axis: null },
color: { field: "profession", legend: null },
opacity: { value: 0.7 },
size: { value: 600 }
},
config: { view: { stroke: null }, title: { offset: 20 } },
data: { values: peopleData }
})
Inputs.table(peopleData)
peopleData = peopleRawData
.select(
"name",
"death_views_adjusted_1",
"industry",
"cause",
"thumbnail_source",
"extract"
)
.rename({
death_views_adjusted_1: "views",
thumbnail_source: "image"
})
.derive({
title: (d) => aq.op.upper(d.name),
profession: (d) => aq.op.split(d.industry, ",", 1)
})
.objects()
peopleRawData = aq.loadCSV(peopleUrl)
peopleUrl = "https://raw.githubusercontent.com/the-pudding/wiki-death-data/master/web-data/people.csv"
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.
