Published
Edited
Feb 25, 2019
6 stars
Insert cell
Insert cell
Insert cell
Insert cell
viewof view1 = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": w,
"data": {"name": name, "url": url},
"mark": "bar",
"encoding": {
"x": {
"field": "Time",
"type": "quantitative",
},
"y": {"field": "Activity", "type": "nominal"}
},
})
Insert cell
Insert cell
table(view1.data(name))
Insert cell
Insert cell
viewof view2 = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": w,
"data": {"name": name, "url": url},
"transform": [
// 1. Filter null entries
{"filter": "datum.Activity != null && datum.Time != null"},
],
"mark": "bar",
"encoding": {
"x": {
"field": "Time",
"type": "quantitative",
},
"y": {"field": "Activity", "type": "nominal"}
},
})
Insert cell
Insert cell
table(view2.data(name))
Insert cell
Insert cell
Insert cell
viewof view3 = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": w,
"data": {"name": name, "url": url},
"transform": [
// 1. Filter null entries
{"filter": "datum.Activity != null && datum.Time != null"},
// 2. Calculate global sum
{
"window": [{
"op": "sum",
"field": "Time",
"as": "TotalTime"
}],
"frame": [null, null]
},
// {"joinaggregate": [{"op": "sum", "field": "Time", "as": "TotalTime"}]}
],
"mark": "bar",
"encoding": {
"x": {
"field": "TotalTime", // Change from Time
"type": "quantitative",
},
"y": {"field": "Activity", "type": "nominal"}
},
})
Insert cell
Insert cell
table(view3.data(name))
Insert cell
Insert cell
viewof view4 = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": w,
"data": {"name": name, "url": url},
"transform": [
// 1. Filter null entries
{"filter": "datum.Activity != null && datum.Time != null"},
// 2. Calculate global sum
{
"window": [{
"op": "sum",
"field": "Time",
"as": "TotalTime"
}],
"frame": [null, null]
},
// 3. Calculate percent total
{
"calculate": "datum.Time/datum.TotalTime * 100",
"as": "PercentOfTotal"
}
],
"mark": "bar",
"encoding": {
"x": {
"field": "PercentOfTotal", // Change from TotalTime
"type": "quantitative",
"axis": {
"title": "% of total Time"
}
},
"y": {"field": "Activity", "type": "nominal"}
},
})
Insert cell
Insert cell
table(view4.data(name))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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