avatorl / deneb-vega-help

Do you need help with Deneb custom visual for Power BI and/or Vega visualization grammar? Create an issue here to get assistance from Deneb community expert Andrzej Leszkiewicz.

Deneb Vega Help

Do you need help with Deneb custom visual for Power BI and/or Vega visualization grammar?

➡️ Create an issue to get assistance from Deneb community expert Andrzej Leszkiewicz.

How to Get Your Question Answered Fast?

Get familiar with the initiative

Visit Deneb Support page for more details about the Deneb Support initiative and contact information for other Deneb/Vega/Vega-Lite experts.

Do some research

Before creating a new issue, check the Closed Issues to see if someone else has already solved a similar issue.

Don't forget about other ways to find an existing solution (Google it!).

Consider the size of your request

My assistance here is free of charge. However, consider the size of your request. If your requirements are significant, consulting may be more appropriate. If you're unsure whether your inquiry falls under the umbrella of "free assistance," feel free to ask.

Come prepared

Be prepared to clearly describe what you're trying to achieve and the problem; be as descriptive as possible.

Provide

If you have drafted a Vega specification, please provide it (or at least a relevant fragment).

For more complex issues, if you can share a .pbix file that includes your Deneb/Vega visualization, share it. If you can't share a .pbix file, share the Vega specification (.json file) and a data sample (.csv file). If you can't make the files public, email them to me privately at [email protected].

Vega or Vega-Lite?

Vega-Lite is a syntax sugar for Vega. Vega-Lite has somewhat limited capabilities. I do not work with Vega-Lite; I prefer the full functionality of Vega. Feel free to ask any questions regarding Vega.

Vega-Lite compiles its specifications to Vega specifications, so if you have Vega-Lite code but are okay with converting it into Vega code (there is no easy way back from Vega to Vega-Lite), let me know.

Ask other community experts if your question is exclusively about Vega-Lite.

Disclaimer of Warranties and Limitation of Liability

I'm trying to answer as soon as possible, but I'm sorry if there will be any delays in my responses to your requests. I'm dedicating my own time to this project. There are clients, family, and life offline. No promises or guarantees are made. I will do my best to help you, but I am not responsible for the quality, accuracy, reliability, or any other aspect of my help, and I will not be liable for any damages or losses arising from your use or inability to use my assistance.

Sponsorship

If I helped you with what you needed for a commercial projects or if you just want to say thank you, feel free to click the Sponsor button.

---

What can be created using Vega (and Deneb to embed Vega visualizations into Power BI)?

Various charts, based on the existing Deneb Templates

My Github repository of Deneb Vega Templates for FT Visual Vocabulary chart types: https://github.com/avatorl/Deneb-Vega-Templates

Highly customized interactive data visualizations

My web-site with embedded live Vega vsiualizations: https://powerofbi.org/deneb-vega-data-visualization-examples/

My Github repository of Vega visualizations: https://github.com/avatorl/Deneb-Vega

A satic poster

More than 10,000 data points have been encoded into this floral cartogram.

An interactive Power BI report

All the funcionality (slicers/options, cross-highlightig between multiple charts) has been implemented in Vega specification inside of a single instance of Deneb visual (try live report).

An interactive Power BI report

This report exists in mutiple versions (try live report).

Dark Mode version (v.1)

Light Mode version (v.4)

The labels that function as a legend are visible only when the cursor is over the question mark.

---

© Andrzej Leszkiewicz

deneb-vega-help's Issues

Vega - Add link between nodes which are at the same level.

Hi,

I have the visual below:

But i need the visual now to have links between nodes which are at the same level, these would be determined by a column in my dataset. I have gone through the Vega documentation and unable to find a suitable way to get it to work. My desired outcome would look like below, note the additional red links.

Below also is my current vega code, any help or direction is appreciated.

{
"width": 1100,
"height": 600,
"padding": 5,
"signals": [
{
"name": "labels",
"value": true,
"bind": {"input": "checkbox"}
},
{
"name": "layout",
"value": "tidy",
"bind": {
"input": "radio",
"options": ["tidy", "cluster"]
}
},
{
"name": "links",
"value": "diagonal",
"bind": {
"input": "select",
"options": [
"line",
"curve",
"diagonal",
"orthogonal"
]
}
},
{
"name": "separation",
"value": false,
"bind": {"input": "checkbox"}
}
],
"data": [
{
"name": "dataset",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": {
"signal": "layout"
},
"size": [
{"signal": "height"},
{"signal": "width - 100"}
],
"separation": {
"signal": "separation"
},
"as": [
"y",
"x",
"depth",
"children"
]
}
]
},
{
"name": "links",
"source": "dataset",
"transform": [
{"type": "treelinks"},
{
"type": "linkpath",
"orient": "horizontal",
"shape": {"signal": "links"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"range": {"scheme": "lightgreyteal"},
"domain": {"data": "dataset", "field": "depth"},
"zero": true
}
],
"marks": [
{
"type": "path",
"from": {"data": "links"},
"encode": {
"update": {
"path": {"field": "path"},
"stroke": {"value": "#ccc"},
"strokeDash": {"signal": "datum.target.relationship === 'X' ? [5,5] : null"}
}
}
},
{
"type": "symbol",
"from": {"data": "dataset"},
"encode": {
"enter": {
"size": {"value": 1000},
"stroke": {"value": "#fff"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {
"scale": "color",
"field": "depth"
},
"shape": {
"signal": "datum.gender === 'Male' ? 'square' : 'circle'"
}
}
}
},
{
"type": "text",
"from": {"data": "dataset"},
"encode": {
"enter": {
"text": {"field": "name"},
"fontSize": {"value": 12},
"baseline": {"value": "middle"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {"signal": "datum.children ? -20 : 20"},
"align": {"signal": "datum.children ? 'right' : 'left'"},
"opacity": {"signal": "labels ? 1 : 0"}
}
}
}
]
}

VEGA - Formatting of links between nodes

Hi,
I have created a tree visualization in VEGA within the deneb visual, and i am just looking for a little bit of VEGA help as i am currently on the learning curve of from Vega-Lite to Vega. I have attached image of visual.

Now basically what i am trying to achieve is to format the color or the dash of the links between nodes based on a field in my data, the field is called relationship.
For example when the relationship field is X, i need the link between nodes to either be dashed or red.

The Vega code is below.

{
"width": 1100,
"height": 600,
"padding": 5,
"signals": [
{
"name": "labels",
"value": true,
"bind": {"input": "checkbox"}
},
{
"name": "layout",
"value": "tidy",
"bind": {
"input": "radio",
"options": ["tidy", "cluster"]
}
},
{
"name": "links",
"value": "diagonal",
"bind": {
"input": "select",
"options": [
"line",
"curve",
"diagonal",
"orthogonal"
]
}
},
{
"name": "separation",
"value": false,
"bind": {"input": "checkbox"}
}
],
"data": [
{
"name": "dataset",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": {
"signal": "layout"
},
"size": [
{"signal": "height"},
{"signal": "width - 100"}
],
"separation": {
"signal": "separation"
},
"as": [
"y",
"x",
"depth",
"children"
]
}
]
},
{
"name": "links",
"source": "dataset",
"transform": [
{"type": "treelinks"},
{
"type": "linkpath",
"orient": "horizontal",
"shape": {"signal": "links"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"range": {
"scheme": "lightgreyteal"
},
"domain": {
"data": "dataset",
"field": "depth"
},
"zero": true
}
],
"marks": [
{
"type": "path",
"from": {"data": "links"},
"encode": {
"update": {
"path": {"field": "path"},
"stroke": {"value": "#ccc"}
}
}
},
{
"type": "symbol",
"from": {"data": "dataset"},
"encode": {
"enter": {
"size": {"value": 1000},
"stroke": {"value": "#fff"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {
"scale": "color",
"field": "depth"
},
"shape": {
"signal": "datum.gender === 'Male' ? 'square' : 'circle'"
}
}
}
},
{
"type": "text",
"from": {"data": "dataset"},
"encode": {
"enter": {
"text": {"field": "name"},
"fontSize": {"value": 12},
"baseline": {
"value": "middle"
}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {
"signal": "datum.children ? -20 : 20"
},
"align": {
"signal": "datum.children ? 'right' : 'left'"
},
"opacity": {
"signal": "labels ? 1 : 0"
}
}
}
}
]
}

Any help is very much appreciated.

Symbols from latitude longitude table constantly visible in orthographic projection

Good morning,

I have been trying to modify the Vega earthquakes example to use in Deneb, but one issue that I am running into is that using a table with latitude and longitude rather than a geojson results in plotted symbols being constantly visible regardless of map rotation.

In the attached example, the blue dots represent two North American cities, but appear in Europe when the map is rotated. I have tried converting the coordinates to geopoints (attached), plotting the raw lat and long, and converting to geoshapes to plot as shapes (which doesn't work at all).

Submitting in the Deneb forum because ultimately this will be used in Deneb where I don't believe it is possible to use a geojson unless I hardcode values.

earthquakes_example_blue.json

Vega Lite Custom code to change month visual to Quarters and Years based on Selection

Hi Team,

I am using this visual from @datavouge and I need to do some customization for the same. Currently this is a KPI which contains chart by month and I want to change it to Quarters and Years based on slicer selection. Here is the code

{
"description": "Column chart with text updated when hovering over a point. Author: ",
"data": {"name": "dataset"},
"title": "TURNOVER",
"transform": [
{
"joinaggregate": [
{
"op": "max",
"field": "period",
"as": "max_period"
}
]
}
],
"encoding": {
"y": {"type": "quantitative"},
"x": {
"field": "period",
"type": "ordinal",
"axis": {
"format": "%b",
"formatType": "time",
"labelExpr": "datum.label[0]"
}
}
},
"layer": [
{
"description": "sparkline definition",
"mark": {
"type": "bar",
"width": {"band": 0.7}
},
"encoding": {
"y": {"field": "actual"},
"color": {
"condition": {
"param": "hoverPoint",
"empty": false,
"value": "#22A7F0"
},
"value": "#c8c8c8"
}
}
},
{
"description": "points activated by hovering over",
"params": [
{
"name": "hoverPoint",
"select": {
"type": "point",
"on": "pointermove",
"encodings": ["x"],
"clear": "pointerout",
"nearest": true
}
}
],
"encoding": {
"y": {"field": "actual"}
},
"mark": {
"type": "point",
"opacity": 0
}
},
{
"description": "details for hovered point (or the last one)",
"transform": [
{
"calculate": "isDefined(hoverPoint['period']) ? hoverPoint['period'][0] == datum['period'] : datum['period']==datum.max_period",
"as": "displayDetails"
},
{
"filter": "datum.displayDetails"
}
],
"layer": [
{
"mark": {
"type": "text",
"size": 20,
"fontWeight": "normal",
"color": "#1D1F48"
},
"encoding": {
"text": {
"field": "actual",
"aggregate": "sum",
"type": "quantitative",
"format": "#0,,,.##B",
"formatType": "pbiFormat"
},
"x": {"value": 0},
"y": {"value": -50}
}
},
{
"mark": {
"type": "text",
"size": 9,
"fontWeight": "normal",
"color":{
"expr" : "datum['KPI_Turnover__formatted'] >= 0 ? '#63D471':'#FD7369'"
}

      },
      "encoding": {
        "text": {
          "field": "KPI_T"
          
        },
        "x": {"value": 60},
        "y": {"value": -25}
      }
    },
    {
      "mark": {
        "type": "text",
        "size": 13
      },
      "encoding": {
        "text": {
          "field": "period",
          "format": "%b-%Y",
          "formatType": "time"
        },
        "x": {"value": 0},
        "y": {"value": -26}
      }
    }
  ]
}

]
}

IBCS Bar Chart- Text Y Position at max of AC or PY

Hi Andrzej, thank you for creating this resource.

I followed your youtube video on creating the IBCS style bar chart in Vega and used it to enhance one of the dashboards I have been working on in PowerBI.

There is one small change I have been trying to make but I am struggling with the syntax.

I'd like for the text mark that displays the AC value to have it's y-position change depending on whether AC is greater than PY or not (ie, if PY is greater than AC then the text should be at the PY y-position).

I tried:
"y": {"scale": "yscale", "signal": "max(datum.AC,datum.PY)", "offset": -2}
as well as:
"y": {"scale": "yscale", "signal": "(datum.AC>datum.PY?datum.AC:datum.PY)", "offset": -2}
but both appear to return the max for all values instead of evaluating each data point.

Thanks in advance.