topic Re: Making Deneb dynamic in Custom Visuals Development Discussion

Making Deneb dynamic

Anonymous — Thu, 25 Apr 2024 13:57:11 GMT

Hello everyone,

I found a really nice Deneb visual online. However, this visual is using a static number. I want to connect it with my measure, named _Percentage. I thought I needed to replace "85" with my measure (at row 13), but it wasn't so simple. How can the measure by added, so that it responds dynamically? The Deneb code is as follows:

{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 400,
"padding": 50,
"background": "#222431",
"signals": [
{
"name": "textGradient",
"update": "{gradient: 'linear', stops: [{offset: 0, color: '#14d8cc'}, {offset: 1, color: '#4c8bee'}]}"
},

{"name": "percent", "update": "85"}],
"data": [
{
"name": "back",
"values": [],
"transform": [
{"type": "sequence", "start": 0, "stop": 100, "step": 1, "as": "val"},
{"type": "formula", "expr": "1", "as": "t"},
{
"type": "pie",
"field": "t",
"startAngle": {"signal": "0"},
"endAngle": {"signal": "2*PI"}
}
]
},
{
"name": "front",
"values": [],
"transform": [
{
"type": "sequence",
"start": 0,
"stop": {"signal": "percent"},
"step": 1,
"as": "val"
},
{"type": "formula", "expr": "1", "as": "t"},
{
"type": "pie",
"field": "t",
"startAngle": {"signal": "0"},
"endAngle": {"signal": "((2*PI)/100)*percent"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"domain": {"data": "back", "field": "val"},
"range": ["#14d8cc", "#4c8bee", "#6567ee", "#b533d2","#b533d2"]
}
],
"marks": [
{
"type": "arc",
"from": {"data": "back"},
"encode": {
"enter": {
"fill": {"value": "#3f424e"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"padAngle": {"signal": "0.015"},
"innerRadius": {"signal": "(width / 2)-15"},
"outerRadius": {"signal": "width / 2"}
}
}
},
{
"type": "arc",
"from": {"data": "front"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "val"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"padAngle": {"signal": "0.015"},
"innerRadius": {"signal": "(width / 2)-15"},
"outerRadius": {"signal": "width / 2"}
}
}
},
{
"type": "arc",
"data": [{"a": 1}],
"encode": {
"enter": {
"fill": {"value": "#3f424e"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"signal": "0"},
"endAngle": {"signal": "2*PI"},
"innerRadius": {"signal": "(width / 2)-25"},
"outerRadius": {"signal": "(width / 2)-20"}
}
}
},
{
"type": "text",
"data": [{}],
"encode": {
"update": {
"text": {"signal": "percent + '%'"},
"align": {"value": "center"},
"fontWeight": {"value": "bold"},
"fill": {"signal": "textGradient"},
"x": {"signal": "width /2"},
"y": {"signal": "width /2"},
"dy": {"value":10},
"fontSize": {"value": 70}
}
}
}
,

{
"type": "text",
"data": [{}],
"encode": {
"update": {
"text": {"value": "on target"},
"align": {"value": "center"},
"fontWeight": {"value": "bold"},
"fill": {
"value": "#9092a1" },
"x": {"signal": "width /2"},
"y": {"signal": "width /2"},
"dy": {"value":40},
"fontSize": {"value": 30}
}
}
}

]
}

Re: Making Deneb dynamic

lbendlin — Fri, 26 Apr 2024 11:42:49 GMT

to get your data from Power BI you need to use

"data": {"name": "dataset"}

Please provide sample data.

Re: Making Deneb dynamic

dm-p — Sat, 27 Apr 2024 09:24:50 GMT

Hi @Anonymous,

Replace line 13 with the following:

{ "name": "percent", "update": "data('dataset')[0]['_Percentage']" }

This requests the value of the _Percentage measure in the first row of the dataset that Deneb creates.
Ref: Vega data() function
Ref: how Deneb assigns the internal dataset
Regards,
Daniel

Re: Making Deneb dynamic

Anonymous — Wed, 01 May 2024 15:13:15 GMT

Hi @dm-p and @lbendlin,

thanks for your replies! I tried to implement the steps, in several ways. I didn't get it to work unfortunately.

The sample data is simple, because I created some dummy data.

I have a table with a column called Percentage. It has the following data (see below).

The measure, which I added to the Deneb visual is

_Percentage = AVERAGE(Percentage[Percentage])

I hope you guys can help me further! I really want this visual to work.

0,01

0,1

0,25

0,5

0,75

0,99

Re: Making Deneb dynamic

dm-p — Thu, 02 May 2024 05:19:56 GMT

I added the data to the model and set it as a percentage type. The same with the measure.

The key thing is that percentages will be added to a Deneb visual as a decimal value, so to make this work with the template, you will need to:

Modify my suggestion to multiply by 100 to get a number between 1 and 100 rather than 0 and 1, e.g.:
```
{
    "name": "percent",
    "update": "data('dataset')[0]['_Percentage'] * 100"
}
```

Because this might result in a floating point value with many decimal places, modify the text mark's text property to use a format function call to fix it to 2 decimal places, e.g.:

{
    "type": "text",
    "data": [{}],
    "encode": {
        "update": {
            "text": {
                "signal": "format(percent, '.2f') + '%'"
            },
            ...
        }

Note that these are minimal changes against the original template. If you have a format string against your model, you could probably use the technique in step 1 to get the _Percentage__format field that Deneb creates for measures into an additional signal and substitute that into step 2 rather than do the formating work manually, or use the pbiFormat function in Deneb to use a Power BI format string. However the above approach will work as you intend it to:

I've added this to a report and attached it so you can confirm it works and investigate the solution yourself. Changes are on lines 14 and 175 of the specification.

Regards,

Daniel

Re: Making Deneb dynamic

Anonymous — Thu, 02 May 2024 06:34:26 GMT

@dm-p

thank you so much!! I really appreciate your help!