Deneb Example - Gauges

Deneb Showcase
1

Deneb/Vega-Lite can be used to create custom gauge visuals. This exercise explores 4 different options (2 linear gauges and 2 circular gauges), each of which display the percentage in a different manner. As well, the 2nd and 4th visuals display data-driven colour ranges.

These examples illustrate a number of Deneb/Vega-Lite features, including:

1-Linear Gauge (gradient):

  • use of three overlapping (layered) marks (2x bar [background & foreground] and 1x text [data value])
  • use of rounded corners on the bar marks
  • use of transparent-to-blue gradient colours for the foreground bar

2-Linear Gauge (scale):

  • use of four overlapping (layered) marks (bar, text [range], point [inverted triangle symbol], text [data value])
  • use of a “transform” block to extend the dataset with in-visual calculations of the range mid points
  • use of data values for the range colours
  • use of black border and white fill for the “pointer” symbol

3-Circular Gauge (radial):

  • use of a “transform” block to extend the dataset with in-visual calculations of the start-and-end degrees and radians for the background and foreground arc marks
  • use of a “params” block to enhance the visual with configuration settings and calculations for arc position and size
  • use of three overlapping (layered) marks (2x bar [background & foreground] and 1x text [data value])
  • use of transparent-to-blue gradient colours for the foreground bar

4-Circular Gauge (speedometer):

  • use of a “transform” block to extend the dataset with in-visual calculations of the start-and-end degrees and radians for the scale size and needle position
  • use of a “params” block to enhance the visual with configuration settings and calculations for scale position and size
  • use of five overlapping (layered) marks (2x arc [background & scale], 1x point [pointer; shape=wedge], 1x circle [black border and white fill], and 1x text [data value])
  • use of data values for the scale sizes and colours

The intent of this example is not to provide a finished visual, but rather to serve as a starting point for further custom visual development.

Also included is the sample PBIX using a sample data for linear and circular ranges.

This example is provided as-is for information purposes only, and its use is solely at the discretion of the end user; no responsibility is assumed by the author.

Greg
Deneb Examples - Gauges.pbix (1.4 MB)

8 Likes
2

marking as solved

3

Hi @Greg, Thanks for this exercice.
I’ve coded a “param” section to define the colors of the linear gauge (again). It works perfectly with the back colour but when I want to do so with the gradiant, it won’t work…
May you enlight me ? Thank in advance

My modifications

I have replaced in the “stops” section :

“color” : “transparent”
by
“color” : { “expr” : “_start_grad_colour” }

AND
“color” : “#0F4C81”
by
“color” : { “expr” : “_end_grad_colour” }

General Specification

{
“params”: [
{
“name”: “_negative_colour”,
“expr”: “pbiColor(‘negative’)”
},
{
“name”: “_gauge_back_colour”,
“value”: “#E3E3E3”
},
{
“name”: “_start_grad_colour”,
“value”: “transparent”
},
{
“name”: “_end_grad_colour”,
“value”: “#0F4C81”
}
],
“data”: {“name”: “dataset”},
“transform”: [
{
“calculate”: “100 * 1”,
“as”: “_100”
},
{
“calculate”: “datum[‘% Deneb’]100",
“as”: “Tx_Percent”
}
],
“layer”: [
{
“name”: “1-LINEAR_GAUGE_PERCENT”,
“width”: 400,
“title”: {
“text”: “1-Linear Gauge (gradient)”,
“anchor”: “start”,
“align”: “left”,
“fontSize”: 16,
“color”: {
“expr”: “_negative_colour”
}
},
“layer”: [
{
“name”: "** 100_PERCENT_BAR ",
“mark”: {
“type”: “bar”,
“height”: 20,
“cornerRadius”: 10,
“color”: {
“expr”: “_gauge_back_colour”
}
},
“encoding”: {
“y”: {
“field”: “y”,
“type”: “nominal”,
“axis”: null
},
“x”: {
“field”: “_100”,
“type”: “quantitative”,
“axis”: null
}
}
},
{
“name”: " PERCENT_BAR *",
“mark”: {
“type”: “bar”,
“height”: 20,
“cornerRadius”: 10,
“color”: {
“x1”: 0,
“y1”: 1,
“x2”: 1,
“y2”: 1,
“gradient”: “linear”,
“stops”: [
{
“offset”: 0,
“color”: “transparent”
},
{
“offset”: 1,
“color”: “#0F4C81”
}
]
}
},
“encoding”: {
“y”: {
“field”: “y”,
“type”: “nominal”,
“axis”: null
},
“x”: {
“field”: “Tx_Percent”,
“type”: “quantitative”,
“axis”: null
}
}
},
{
“name”: " PERCENT_TEXT **”,
“mark”: {
“type”: “text”,
“color”: “white”,
“xOffset”: -20,
“fontSize”: 14,
“fontWeight”: “bold”
},
“encoding”: {
“text”: {
“field”: “Tx_Percent”,
“type”: “quantitative”,
“format”: “.1f”
},
“x”: {
“field”: “Tx_Percent”,
“type”: “quantitative”,
“axis”: null
}
}
}
]
}
]
}

4

Hi @stevann.sevellec. I’ve not seen (nor had any success) with using parameters with a gradient … to me it appears that the Vega-Lite spec only permits hard-coded colours for gradients.
Greg

5

Thanks ! Then, I’ll leave it that way waiting for future improvements ! :grinning: