embed = require("vega-embed@6")
viewof view = embed({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"title": "Demonstration of Pyramid Plot",
"height": 250,
"padding": 50,
"signals": [
{"name": "chartWidth", "value": 300},
{"name": "chartPad", "value": 80},
{"name": "width", "update": "2 * chartWidth + chartPad"}
],
"data": [
{
"name": "dummy",
"values": [
{"project": "a", "count": 17, "expectRev": 80, "status": 0},
{"project": "a", "count": 10, "expectRev": 135, "status": 1},
{"project": "b", "count": 14, "expectRev": 92, "status": 0},
{"project": "b", "count": 7, "expectRev": 41, "status": 1},
{"project": "c", "count": 8, "expectRev": 123, "status": 0},
{"project": "c", "count": 20, "expectRev": 12, "status": 1},
{"project": "d", "count": 4, "expectRev": 130, "status": 0},
{"project": "d", "count": 3, "expectRev": 23, "status": 1},
{"project": "e", "count": 13, "expectRev": 47, "status": 0},
{"project": "e", "count": 2, "expectRev": 119, "status": 1},
{"project": "f", "count": 11, "expectRev": 82, "status": 0},
{"project": "f", "count": 6, "expectRev": 59, "status": 1},
{"project": "g", "count": 9, "expectRev": 12, "status": 0},
{"project": "g", "count": 1, "expectRev": 148, "status": 1},
{"project": "h", "count": 18, "expectRev": 56, "status": 0},
{"project": "h", "count": 9, "expectRev": 134, "status": 1}
]
},
{
"name": "land",
"source": "dummy",
"transform": [{"type": "filter", "expr": "datum.status == 1"}]
},
{
"name": "ongoing",
"source": "dummy",
"transform": [{"type": "filter", "expr": "datum.status == 0"}]
}
],
"scales": [
{
"name": "yNew",
"type": "band",
"range": [{"signal": "height"}, 0],
"round": true,
"domain": {"data": "dummy", "field": "project"}
},
{
"name": "color",
"type": "ordinal",
"domain": [1, 0],
"range": ["LightCoral", "deepskyblue"]
}
],
"marks": [
{
"type": "text",
"interactive": false,
"from": {"data": "dummy"},
"encode": {
"enter": {
"x": {"signal": "chartWidth + chartPad / 2"},
"y": {"scale": "yNew", "field": "project", "band": 0.6},
"text": {"field": "project"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000"}
}
}
},
{
"type": "group",
"encode": {"update": {"x": {"value": 0}, "height": {"signal": "height"}}},
"scales": [
{
"name": "x",
"type": "linear",
"range": [{"signal": "chartWidth"}, 0],
"nice": true,
"zero": true,
"domain": {"data": "dummy", "field": "expectRev"}
}
],
"axes": [
{
"orient": "top",
"scale": "x",
"format": "s",
"title": "Ongoing projects",
"ticks": false,
"labels": false,
"domain": false,
"titleY": -10
}
],
"marks": [
{
"type": "rect",
"from": {"data": "ongoing"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "expectRev"},
"x2": {"scale": "x", "value": 0},
"y": {"scale": "yNew", "field": "project"},
"height": {"scale": "yNew", "band": 1, "offset": -1},
"fillOpacity": {"value": 0.6},
"fill": {"scale": "color", "field": "status"}
}
}
},
{
"type": "text",
"from": {"data": "ongoing"},
"encode": {
"enter": {
"x": {"signal": "chartWidth/2 +10"},
"y": {"scale": "yNew", "field": "project", "band": 0.5},
"text": {"signal": "format(datum.expectRev, 'd')"},
"baseline": {"value": "middle"},
"align": {"value": "right"},
"fill": {"value": "#000"}
}
}
}
]
},
{
"type": "group",
"encode": {
"update": {
"x": {"signal": "chartWidth + chartPad"},
"height": {"signal": "height"}
}
},
"scales": [
{
"name": "x",
"type": "linear",
"range": [0, {"signal": "chartWidth"}],
"nice": true,
"zero": true,
"domain": {"data": "dummy", "field": "expectRev"}
}
],
"axes": [
{
"orient": "top",
"scale": "x",
"format": "s",
"title": "Landed projects",
"ticks": false,
"labels": false,
"domain": false,
"titleY": -10
}
],
"marks": [
{
"type": "rect",
"from": {"data": "land"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "expectRev"},
"x2": {"scale": "x", "value": 0},
"y": {"scale": "yNew", "field": "project"},
"height": {"scale": "yNew", "band": 1, "offset": -1},
"fillOpacity": {"value": 1},
"fill": {"scale": "color", "field": "status"}
}
}
},
{
"type": "text",
"from": {"data": "land"},
"encode": {
"enter": {
"x": {"signal": "chartWidth/2 +10"},
"y": {"scale": "yNew", "field": "project", "band": 0.5},
"text": {"signal": "format(datum.expectRev, 'd')"},
"baseline": {"value": "middle"},
"align": {"value": "right"},
"fill": {"value": "#000"}
}
}
}
]
},
{
"type": "group",
"encode": {
"update": {
"x": {"signal": "chartWidth * 2 + chartPad + 30"},
"height": {"signal": "height"}
}
},
"marks": [
{
"type": "symbol",
"from": {"data": "land"},
"encode": {
"enter": {
"x": {"value": -10},
"y": {"scale": "yNew", "field": "project", "band": 0.5},
"size": {"field": "count", "mult": 20},
"shape": {"value": "circle"},
"fill": {"value": "teal"},
"opacity": {"value": 1}
}
}
},
{
"type": "text",
"from": {"data": "land"},
"encode": {
"enter": {
"x": {"signal": "30"},
"y": {"scale": "yNew", "field": "project", "band": 0.5},
"text": {"signal": "format(datum.count, 'd')"},
"baseline": {"value": "middle"},
"align": {"value": "right"},
"fill": {"value": "#000"}
}
}
}
]
},
{
"type": "group",
"encode": {
"update": {"x": {"signal": "-20"}, "height": {"signal": "height"}}
},
"marks": [
{
"type": "symbol",
"from": {"data": "ongoing"},
"encode": {
"enter": {
"x": {"value": 0},
"y": {"scale": "yNew", "field": "project", "band": 0.5},
"size": {"field": "count", "mult": 20},
"shape": {"value": "circle"},
"fill": {"value": "teal"},
"opacity": {"value": 1}
}
}
},
{
"type": "text",
"from": {"data": "ongoing"},
"encode": {
"enter": {
"x": {"signal": "-30"},
"y": {"scale": "yNew", "field": "project", "band": 0.5},
"text": {"signal": "format(datum.count, 'd')"},
"baseline": {"value": "middle"},
"align": {"value": "right"},
"fill": {"value": "#000"}
}
}
}
]
}
],
"config": {}
})
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.
