{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Adding Interactive Widgets To Visuals Using Deneb in Power BI\n", "> Deneb custom visual can be used to create interactive, composite visuals that are highly responsive and are customizable\n", "\n", "- toc: true \n", "- badges: true\n", "- comments: true\n", "- categories: [Power BI, deneb, custom visual, altair, python]\n", "- hide: false" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Deneb" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Deneb is a free Microsoft certified custom visual available in the Apps gallery. Unlike many other custom visuals, it's highly customizable and fairly easy to setup. It uses JSON syntax of the Vega/Vega-Lite languages to create visuals. You can read more about it on it's [official site](https://deneb-viz.github.io/). Kudos to its creator [Daniel Marsh-Patrick](https://twitter.com/the_d_mp) for open-sourcing it. Please support his efforts [here](https://www.buymeacoffee.com/dmp). Also check out some awesome visuals created by [Kerry Kolosko](https://kerrykolosko.com/visualisations/) using Deneb.\n", "\n", "As I have mentioned before on my blog, I use Python & Power BI together in my workflow. Since Deneb uses Vega-Lite, I can use any other Vega-Lite library to develop the visuals and use them in Power BI with Deneb. While you can build Deneb visuals using JSON, I like using [Altair](https://altair-viz.github.io/index.html) to create the visuals and then use that JSON in Deneb. I have already created a video on how you can do that. Please watch it to learn more, I won't cover it here again. \n", "\n", "The goal of this blog is to show you three things that are not possible in native Power BI visuals:\n", "\n", "- Adding interactive widgets that are bound to a visual\n", "- Creating data-driven conditional labels\n", "- Creating composite visuals by layering and adding visuals to each other to build more complex visuals\n", "\n", "Be sure read my [other blog](https://pawarbi.github.io/blog/powerbi/dataviz/eda/2021/09/03/color-transperancy-powerbi.html) on changing color transperancy using native Power BI visuals. You can achieve similar effect in Power BI but it's not as responsive and has limitations." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ ">youtube:https://youtu.be/gR5RpQtIwHs" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Adding Interactive Widgets" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You can think of widgets as the slicers that are bound to a visual and can be used by the user to control various formatting options of the visual. This can be used to personalize the visual, as well help in exploring the data interactively. These widgets can be slicers, radio buttons, dropdowns etc. Unlike the Power BI slicer, since these are bound to the visual, they are very responsive. I will show couple of example of how you can use Altair to first build the visual and then use the JSON to re-create it in Power BI.\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Create Widget Using Altair" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "To build the visual, we don't really need data from Power BI. We can use some dummy data to build the visual, which can then be transferred to Deneb. I will use Pandas for creating the dataframe. " ] }, { "cell_type": "code", "execution_count": 44, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Altair version: 4.1.0\n" ] } ], "source": [ "import pandas as pd\n", "import altair as alt\n", "import numpy as np\n", "\n", "print(\"Altair version:\",alt.__version__)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Creating a dummy dataframe with X, Y, Z columns with 50 observations." ] }, { "cell_type": "code", "execution_count": 45, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", " | X | \n", "Y | \n", "Z | \n", "
---|---|---|---|
0 | \n", "0 | \n", "1.0 | \n", "60.0 | \n", "
1 | \n", "1 | \n", "1.0 | \n", "19.0 | \n", "
2 | \n", "2 | \n", "1.0 | \n", "77.0 | \n", "
3 | \n", "3 | \n", "2.0 | \n", "31.0 | \n", "
4 | \n", "4 | \n", "3.0 | \n", "51.0 | \n", "