2022 Week 42 | Power BI: Deneb Custom Visuals

Introduction

I was recently asked by Rob Saunders if I would like to assist with a #WorkoutWednesday PowerBI challenge. To be seen in the same crowd with Kerry, Shannon, Meagan, Spencer, and Rob is such an honour. Cue the onset of imposter syndrome.

After that feeling passed, Rob and I decided to continue with the Deneb challenge that Spencer started in Week 37. (https://workout-wednesday.com/pbi-2022-w37/)

For this challenge, we will be creating the following charts:

  • Chart 4: A vertical bar chart
  • Chart 5: A vertical bar chart with labels
  • Chart 6: A horizontal lollipop chart
  • Chart 7: An overlapping bar chart

Requirements

Preparation
  1. Continue from the week 37 challenge or download the PBIX file here.
  2. Add Deneb Custom Visual
Chart 4: Vertical Bar Chart
  • Copy and paste chart 2 and select edit from the ellipses on your copied Deneb visual.
    • To change the chart from a horizontal to vertical chart, we swap the x and y encoding channels.
    • Advanced: Move the y-axis title by applying the necessary formats to the axis property of the y encoding channel.
      "axis": {
          "titleAngle": 0,
          "titleY": 0,
          "titleX": -20
      }

 

Chart 5: Vertical Bar Chart with Data Labels

The power of Deneb is in the layering of different marks on top of each other to create a more elaborate visual.
For the next chart we will layer a text mark on top of our vertical bar chart (created above).
The code structure for layers can be viewed at the following location: https://vega.github.io/vega-lite/docs/layer.html

    • Copy and paste chart 4 and select edit from the ellipses on your copied Deneb visual
    • Using chart 4 as the bottom layer we will be adding a text mark on top of the bar layer.
    • The layer structure we will introduce is the following:
      "layer":[
          {"mark":"bar"},
          {"mark":"text"}
      ]
    • If both mark objects share the same encoding information, we move the encoding information before the layer, but only if they share the same information, like in this chart.
    • Our structure will therefore be:
      ...
      "encoding": {
          "x":{...},
          "y":{...}
      },
      "layer":[
          {"mark":"bar"},
          {"mark":"text"}
      ]...
    • To move the text mark across the x and y-axis, we use the “dx” and “dy” properties in definition of the text mark
      (see https://vega.github.io/vega-lite/docs/text.html#properties)

 

Chart 6: Horizontal Lollipop Chart

Once we have grasped the concept of layering, it is easy to break down charts into the different marks.

A lollipop chart is just one of the following: 

    • a rule and a point mark or
    • a thin bar mark and a filled circle mark or
    • a line mark and a text mark where the text is set as “●”.

You can use any of the options above, but we will be using a rule and point mark to create our lollipop chart. To learn more about the rule and point mark, please read through the following documentation:

Once you are familiar with the properties available for each mark, you can continue to create the lollipop chart as follows:

    • As we are doing a horizontal lollipop chart, copy and paste Chart 2 and select edit from the ellipses on your copied Deneb visual.
    • The layer structure we will introduce is the following:
      "layer":[
          {"mark":"rule"},
          {"mark":"point"}
      ]
    • As we are doing a horizontal lollipop chart, copy and paste Chart 2 and select edit from the ellipses on your copied Deneb visual.
    • Our final code structure would be something like this:
      {
          "data": {"name":"dataset"},
          "encoding": {
              "x": {Code Here},
              "y": {Code Here}
          },
          "layer": [
            {
              "mark": {Code Here}
            },
            {
              "mark": {Code Here}
            }
          ]
      }
    • Advanced: Try and do a horizontal and vertical lollipop chart.

 

Chart 7: Two bar charts, on top of one another:

Now that we understand multiple layers, for our next chart we will introduce a constant value. Remember we said that if the encoding for both layers are the same, we only have to show the encoding for both channels once.
For our new chart, we want to add a different encoding for one mark. Let’s add a constant value to our chart to mark a 20% margin. You can use either DAX to create a measure, or a Vega-Lite constant (see https://vega.github.io/vega-lite/docs/datum.html)

  • Once again copy and paste Chart 2 and select edit from the ellipses on your copied Deneb visual.
  • As we are introducing a new value for one of the marks our final code layout will be similar to the below:
    {
        "data": {"name":"dataset"},
        "layer": [
          {
            "mark": {Code Here},
            "encoding": {
              "x": {Code Here},
            }
          },
          {
            "mark": {Code Here},
            "encoding": {
              "x": {Code Here},
            }
          }
        ],
        "encoding": {
            "y": {Code Here}
        }
    }
  • Create a bar chart with light grey color that will show the target margin (color that I’ve used #dfdfdf)
  • For my first mark, I used a bar. You can play around with the height (or width if you are doing a vertical bar chart), to see which one is working the best for you.
  • For the second mark, I used a rule, but instead of the normal stroke width of 1, I used a stroke width of 5, which creates the “bullet chart” effect.

 

Challenge Notes:

Dataset

This week’s dataset is available here.

Share

After you finish your workout, share on Twitter using the hashtags #WOW2022 and #PowerBI, and tag @JSBaucke@MMarie, @shan_gsd, @KerryKolosko@NerdyWithData and @ThysvdW. Also make sure to fill out the Submission Tracker so that we can count you as a participant this week in order to track our participation throughout the year. 

Solution

Scroll to Top