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"}
}
}
}
]
}

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.

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.

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

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}
      }
    }
  ]
}

]
}