Does Vega support signals in Gradient stop offset property - dynamic

I have a situation, where a Gradient Stop objects offset value, like this...
{"offset": 0.3, "color": "hsl(140,100%,42%)"},
Needs to be set dynamically. I have tried setting the offset to be { "signal": "0.3" }, like this...
{"offset": {"signal": "0.3"}, "color": "hsl(140,100%,42%)"},
and Vega seems to be interpretting this value as undefined/falsy i.e. as ZERO.
Am I stuck, or is there a way to update this value whilst the chart data changes?
Why do I need to do this? Well, we have data which has GOOD/OK/BAD thresholds, and because of this, we need to color our line charts line to indicate WHERE these thresholds lie. We are using a Gradient to color the line to match these thresholds. We have many data, so these thresholds are not fixed, so we need to update the Gradient, based on the LIVE data. Sadly, it appears Vega is not doing this.
I have tested this in full fat Vega, but no joy. Any help appreciated.

According to jheer, "Gradient definitions do not support the use of signals inside of them when provided as a value in an encoding. However, you can define gradients separately as signal values, which in turn can reference other signals."
Here is an example I mocked up.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 200,
"height": 200,
"padding": 5,
"signals": [
{
"name": "test",
"update": "{gradient: 'radial', stops: [{offset: 0, color: 'white'}, {offset: 0.2, color: 'blue'}, {offset: 1, color: 'white'}]}"
}
],
"marks": [
{
"type": "rect",
"encode": {
"enter": {
"x": {"value": 0},
"x2": {"value": 100},
"y": {"value": 0},
"y2": {"value": 400},
"fill": {"signal": "test"}
}
}
}
]
}

Related

How do I format currency in Vega-Lite?

I'm trying to format values as currency in the Vega-Lite editor. I'm attempting to copy the docs but I'm getting a weird error. The Y axis is a numerical value. Passing in a formatting string gives "value expected".
Here's the json:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Protocol Chart",
"width": 500,
"height": 225,
"data": {
"values": [
{
"asset": "eth",
"time": "2021-06-15T00:00:00Z",
"ReferenceRateUSD": "2577.04473863238"
},
{
"asset": "eth",
"time": "2021-06-16T00:00:00Z",
"ReferenceRateUSD": "2552.74103641146"
},
{
"asset": "eth",
"time": "2021-06-17T00:00:00Z",
"ReferenceRateUSD": "2360.99938690824"
}
]
},
"config": {
"view": {
"stroke": "transparent"
}
},
"mark": "line",
"encoding": {
"x": {
"axis": {
"domainColor": "#DDD",
"grid": false,
"labelColor": "#AEAEAE",
"ticks": false,
"labelPadding": 10
},
"field": "time",
"type": "temporal",
"title": ""
},
"y": {
"axis": {
"labelOffset": 2,
"domainColor": "white",
"labelColor": "#AEAEAE",
"ticks": false,
"labelPadding": 10,
"format": '$.2f'
},
"field": "ReferenceRateUSD",
"type": "quantitative",
"title": "",
"scale": {
"zero": false
}
},
"color": {
"field": "doesntmatter",
"type": "nominal",
"legend": null,
"scale": {
"range": ["#91DB97"]
}
}
}
}
What am I missing here? How do I get it to accept my formatting string?
"$.2f" looks like a the correct d3-format string for currency, but note that this is only valid if the associated formatType is "number" (see axis label docs).
Since you did not include a full reproducible example of the problem you're seeing, I can only venture a guess that your data type is not numeric, and this is why the formatting is failing. If that's not the case, I'd suggest editing your question to provide a complete example of the error you're seeing.
Edit: your full example appears to work correctly with the current version of vega/vega-lite (view in editor):
Perhaps you need to update your vega/vega-lite libraries?

What is this part of the chart called in Vega-Lite?

I'm trying to get rid of the right side of the box of a chart in Vega-Lite. I assume I can just set the color to white once I figure out what it's called. It's not the domain or the grid, what is it? For bonus points, what do I need to do to make it go away? Thanks.
The line which you have highlighted is called stroke, you will find it in view config as it is a part of your chart view and provide the value as white or transparent.
Refer the below snippet or editor reference:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Google's stock price over time.",
"data": {"url": "data/stocks.csv"},
"transform": [{"filter": "datum.symbol==='GOOG'"}],
"mark": "line",
"config": {"view": {"stroke": "transparent"}},
"encoding": {
"x": {"field": "date", "type": "temporal", "axis": {"grid": false}},
"y": {"field": "price", "type": "quantitative", "axis": {"domain": false}}
}
}

Vega Zoom Circle Packing Chart

I'm somewhat lost. I try to realize zoom in a circle packing chart but I don't know how to do it. There are two examples zoomable-scatter-plot zoomable-world-map but both approaches doesn't seem too fit for my chart type.
Any pointers/examples would be greatly appreciated.
Disclaimer: I still haven't had much time to get into Vega but I found a solution for this particular problem. I guess it is still not technical mature but it works.
The basic idea is to scale the circles and then move them into the middle of the graphic. To achieve this I added these signals:
"signals": [
{
"name": "scaleX",
"value": 1,
"on": [{"events": "click", "update": "(width/2)/datum.r"}]
},
{
"name": "scaleY",
"value": 1,
"on": [{"events": "click", "update": "(height/2)/datum.r"}]
},
{
"name": "xTranslation",
"value": 0,
"on": [{"events": "click", "update": "(width/2) - datum.x * scaleX"}]
},
{
"name": "yTranslation",
"value": 0,
"on": [{"events": "click", "update": "(height/2) - datum.y * scaleY"}]
}
]
and use them inside the mark encoding:
"update": {
"x": {"signal": "datum.x * scaleX + xTranslation"},
"y": {"signal": "datum.y * scaleY + yTranslation"},
"size": {"signal": "4 * datum.r * datum.r * scaleX * scaleY"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 0.5}
}
Full example in Vega-Editor

Legend overlaps with donut chart vega

I'm creating a donut chart using Vega and the legend overlaps the chart despite everything I've tried.
Using orient: bottom-right: https://imgur.com/RZ2msqF
I've also tried to finagle the image into the empty space using legendX, legendY but the text cuts off.
Increasing width of the specification would work except it auto-centers the visualization, and I'm trying to avoid any more empty space than necessary.
I'm looking for a way to align the chart to the left instead of auto-centering, or anything else you guys can think of. Thanks!
You can set the outerRadius of each arc "slice of pie" in the marks section of the spec.json file, it is divided by width so increasing the default to 2.5 or 3 worked for me.
"marks": [
{
"type": "arc",
"from": {
"data": "table"
},
"encode": {
"enter": {
"fill": {
"scale": "color",
"field": "id"
},
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height / 2"
}
},
"update": {
"startAngle": {
"field": "startAngle"
},
"endAngle": {
"field": "endAngle"
},
"padAngle": {
"signal": "padAngle"
},
"innerRadius": {
"signal": "width / 4"
},
"outerRadius": {
"signal": "width / 2.5"
},
"cornerRadius": {
"signal": "cornerRadius"
}
}
}
}
]

How to create a stacked bar chart with values in Vega?

I'm creating a custom visualization in Vega for Kibana. It should display vertical stacked bars and their values in numbers.
The "y" axis is the doc count and the "x" axis a time scale.
I'm not familiar with Vega and I first tried to display numbers on simple bars. I copy/pasted, tweeked some parameters and had this version :
"marks": [
{
"type": "group",
"marks": [
{
"type": "rect",
"name": "bars",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xbars", "field": "key"},
"width": {"scale": "xbars", "band": 1},
"y": {"scale": "yscale", "field": "doc_count"},
"y2": {"scale": "yscale", "value": 0}
}
}
},
{
"type": "text",
"from": {"data": "bars"},
"align": "center",
"encode": {
"enter": {
"y": {"field": "y", "offset": -5},
"x": {"field": "x", "offset": 0},
"text": {"field": "datum.doc_count"}
}
}
}
]
}
]
The result displays simple bars, numbers, the time format is good.
I used a "y"and a "y2" to be able to display both bars and text, but I can't add anymore "y" axis ("y3", "y4"...).
Idon't even know if it's possible to do what I want.
It want the chart to look like this example but with numbers :
https://vega.github.io/vega/examples/stacked-bar-chart/