Vega-Lite templates for Deneb

This page contains some vega-lite templates you can use for Deneb in Power BI. I do not post them in GitHub because I hate GitHub and it is too far down my list of things I have time to learn. If you have the burning desire to post them on a Deneb GitHub repo, feel free to do so, but please credit me.

I will most likely create a video as to how you can use these templates. When it is done, you will find the link here.

Matrix with defined height. Values formatted to two decimal places. Will respond to click by highlighting clicked dimension with a colour and making unselected values less opaque.  This Template features a fold, for which I used 6 metrics, you can of course use more or fewer.

To create this visual you must paste the first block into the ‘Specification’ of Deneb. The Second box is to be pasted in ‘Config’.

{
"data": {"name": "dataset"},
"height": {"step": 35},
"transform": [
{
"fold": [
"Metric1",
"Metric2",
"Metric3",
"Metric4",
"Metric5",
"Metric6"
],
"as": ["metrics", "Number"]
}
],
"layer": [
{
"mark": {"type": "rect"},
"encoding": {
"color": {
"condition": {
"test": {
"field": "__selected__",
"equal": "on"
},
"value": "#7c5071"
},
"value": "#e3e3e3"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.4
},
"value": 1
}
}
},
{
"mark": {
"type": "text",
"color": "black"
},
"encoding": {
"text": {
"field": "Number",
"format": ".2f"
},
"color": {
"condition": {
"test": {
"field": "__selected__",
"equal": "on"
},
"value": "white"
},
"value": "black"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.2
},
"value": 1
}
}
}
],
"encoding": {
"x": {
"field": "metrics",
"scale": {"padding": 0.05},
"title": null
},
"y": {
"field": "Dimension",
"sort": {
"field": "5",
"order": "descending"
},
"title": null
}
}
}
{
"autosize": {"contains": "padding"},
"view": {"stroke": "transparent"},
"font": "Segoe UI",
"arc": {},
"area": {
"line": true,
"opacity": 0.4
},
"bar": {},
"line": {
"strokeWidth": 2,
"strokeCap": "round",
"strokeJoin": "round"
},
"path": {},
"point": {"filled": true, "size": 75},
"rect": {},
"shape": {},
"symbol": {
"strokeWidth": 1.5,
"size": 50
},
"text": {
"font": "Segoe UI",
"fontSize": 12,
"fill": "#605E5C"
},
"axis": {
"ticks": false,
"grid": false,
"domain": false,
"labelAngle": 0,
"labelColor": "#605E5C",
"labelFontSize": 12,
"titleFont": "wf_standard-font, helvetica, arial, sans-serif",
"titleColor": "#252423",
"titleFontSize": 16,
"titleFontWeight": "normal"
},
"axisQuantitative": {
"tickCount": 3,
"grid": true,
"gridColor": "#C8C6C4",
"gridDash": [1, 5],
"labelFlush": false
},
"axisBand": {"tickExtra": true},
"axisX": {
"labelPadding": 5,
"orient": "top",
"title": null,
"titlePadding": -10
},
"axisY": {"labelPadding": 10},
"header": {
"titleFont": "wf_standard-font, helvetica, arial, sans-serif",
"titleFontSize": 16,
"titleColor": "#252423",
"labelFont": "Segoe UI",
"labelFontSize": 13.333333333333332,
"labelColor": "#605E5C"
},
"legend": {
"titleFont": "Segoe UI",
"titleFontWeight": "bold",
"titleColor": "#605E5C",
"labelFont": "Segoe UI",
"labelFontSize": 13.333333333333332,
"labelColor": "#605E5C",
"symbolType": "circle",
"symbolSize": 75
}
}

Click responsive Bar Chart with data labels and cross highlighting

{"height": {"step": 35},
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "bar",
"opacity": 0.6,
"color": "#e3e3e3",
"tooltip": true
},
"encoding": {
"x": {
"field": "__1__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.1
},
"value": 1
},
"color": {
"condition": {
"test": {
"field": "__selected__",
"equal": "on"
},
"value": "#917182"
},
"value": "#917182"
},
"x": {
"field": "__1____highlight",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "text",
"tooltip": true,
"xOffset": 20
},
"encoding": {
"text": {
"field": "__1____highlight"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
},
"value": 1
},
"color": {
"condition": {
"test": {
"field": "__selected__",
"equal": "on"
},
"value": "#917182"
},
"value": "grey"
},
"x": {
"field": "__1____highlight",
"type": "quantitative"
}
}
}
],
"encoding": {
"y": {
"field": "__0__",
"title": null,
"sort": {
"field": "__1__",
"op": "sum",
"order": "descending"
}
}
}
}

Trail visual in small multiples with data labels and Independent X and Y axis

{
  
  "data": {"name": "dataset"},
  "columns": 1,
  "facet": {
    "field": "__0__",
    "title": null,
    "type": "ordinal",
    "sort": {
      "op": "sum",
      "field": "__0__"
    }
  },
  "spec": {
    "encoding": {
      "x": {
        "field": "__1__",
        "type": "ordinal",
        "title": null
      },
      "y": {
        "field": "__2__",
        "type": "quantitative",
        "title": null,
        "axis": null
      }
    },
    "layer": [
      {
        "mark": {"type": "trail"},
        "height": 100,
        "width": 400,
        "encoding": {
          "color": {"value": "#7c5071"},
          "size": {
            "field": "__2__",
            "legend": null
          }
        }
      },
      {
        "mark": {
          "type": "text",
          "dy": -10,
          "size": 10
        },
        "encoding": {
          "text": {"field": "__2__"}
        }
      }
    ]
  },
  "resolve": {
    "scale": {
      "x": "independent",
      "y": "independent",
      "size": "independent"
    }
  }
}