Deneb & Vega - 01: Custom Visuals in Power BI

Introduction

Have you ever looked at a Power BI report or dashboard and wondered how some of the visualizations were created? With Power BI’s continuous advancements, many complex visualizations can now be built using native charts, conditional formatting, and DAX measures. However, there are still some charts that simply can’t be created using built-in visuals.

Take, for example, the gradient area chart below. Doesn’t it look amazing? Shouldn’t it be a native chart in Power BI? Yet, as of now, it isn’t.

Or consider this radial chart. It’s another example of something you can’t create with Power BI’s native charts.

Another example is the event calendar below that I created for one of my clients.

While Power BI does offer many custom visuals through the App Store, some are paid while others are free. Among the free ones, Deneb stands out as, in my opinion, the best. Deneb is certified by Microsoft, meaning that it doesn’t access external services or resources and can be exported to PDF or displayed in emails. Pretty cool, right?

Now, plenty of resources explain what Deneb is and how it works, so I won’t go into that. Instead, I want to focus on the language Deneb uses to create these stunning visuals: Vega and Vega-Lite. Think of them as twin sisters—except Vega is more complex to grasp but also offers more customizations. In this series of posts, we will learn about Vega.

What is Vega?

Let’s take a look at the definition of Vega from its official website:

Vega is a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.

Simply put, Vega is a structured way of describing visualizations, much like grammar in a language. Just as grammar defines the rules for adjectives, adverbs, and prepositions, Vega provides a defined set of rules for building charts. Both Vega and Vega-Lite use JSON syntax, which consists of key-value pairs like: "name": "Nazmul" or "date": "2024-08-05". This means that every visualization you create in Vega and Vega-Lite is simply a structured JSON object describing the chart.

Understanding Vega the Right Way

Now comes the real challenge: How do we make sense of this language in a logical and intuitive way?

Surely, learning English grammar wasn’t easy. And unfortunately, most existing resources don’t explain Vega’s syntax in a way that’s beginner-friendly. The Official Documentation is comprehensive, but if you jump straight into it—like I did—you’ll feel like you’re reading Martian. So, Should You Give Up?

Absolutely not! That’s where this series comes in.

In this series of posts, I’ll break down the logical structure of Vega in an easy-to-understand way. I’ll not only explain the concepts but also provide plenty of examples to reinforce them.

What You Should Know Before We Start

1. Progressive Learning – Each post builds on the previous ones. I’ll assume you’ve read the earlier posts and won’t repeat concepts unnecessarily. So, make sure you follow along from the beginning to get the most out of this series.

2. Power BI vs. Vega – Vega is a standalone visualization language, while Deneb is its Power BI implementation. There are some Power BI-specific features in Deneb that don’t exist in standard Vega. For now, we’ll mainly focus Vega, and once we understand it well, we’ll explore how it works inside Power BI.

What’s Next?

In the next post, we’ll explore the online Vega editor and the code editor of Deneb. These tools have some features that will help us understand and debug our code easily.

So, are you ready to master Vega? Let’s get started!