Minimum value for y-axis in Vega lite - vega-lite

I have a line chart with stock ticks based on this examples: https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html
I'm trying to set a min. val. for the y-axis and have tried the below:
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "price",
"type": "quantitative",
"scale": {"domain": [150,350]},
},
},
This works with negative values like -150 but not positive. Also my tooltip disappears when setting the y variables..

Setting the scale domain appears to work with the example you linked to (editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/stocks.csv"},
"width": 400,
"height": 300,
"encoding": {"x": {"field": "date", "type": "temporal"}},
"layer": [
{
"encoding": {
"color": {"field": "symbol", "type": "nominal"},
"y": {
"field": "price",
"type": "quantitative",
"scale": {"domain": [100, 500]}
}
},
"layer": [
{"mark": {"type": "line", "clip": true}},
{
"transform": [{"filter": {"selection": "hover"}}],
"mark": {"type": "point", "clip": true}
}
]
},
{
"transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
"mark": "rule",
"encoding": {
"opacity": {
"condition": {"value": 0.3, "selection": "hover"},
"value": 0
},
"tooltip": [
{"field": "AAPL", "type": "quantitative"},
{"field": "AMZN", "type": "quantitative"},
{"field": "GOOG", "type": "quantitative"},
{"field": "IBM", "type": "quantitative"},
{"field": "MSFT", "type": "quantitative"}
]
},
"selection": {
"hover": {
"type": "single",
"fields": ["date"],
"nearest": true,
"on": "mouseover",
"empty": "none",
"clear": "mouseout"
}
}
}
]
}
Note that I also set the clip mark property to hide marks outside the axis boundaries.

Related

Does anyone have an explanation as to why this graph is being made on vega?

Am trying to make a graph in vegalite whereby i show the evolution of stock prices overtime. Intuitively this should be very easy however for some reason only two lines seem to get output and they aren't reflective of the stock prices at all. Is there something wrong with my data or am i missing something quite basic?
{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "Cases: UK nations",
"subtitle": [
"New cases by publish date, rolling rate"
],
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"background": "whitesmoke",
"width": 800,
"height": 600,
"data": {
"url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/graph1megasheet.csv",
"format": {"type": "csv"}},
"layer": [
{
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Open", "type": "quantitative"},
"color": {
"field":"Stockname",
"type": "nominal"
}
},
"layer": [
{"mark": "line"},
{
"params": [
{
"name": "label",
"select": {
"type": "point",
"encodings": ["x"],
"nearest": true,
"on": "mouseover"
}
}
],
"mark": "point",
"encoding": {
"opacity": {
"condition": {"param": "label", "empty": false, "value": 1},
"value": 0
}
}
}
]
},
{
"transform": [{"filter": {"param": "label", "empty": true}}],
"layer": [
{
"mark": {"type": "rule", "color": "grey"},
"encoding": {
"x": {"type": "temporal", "field": "Date", "aggregate": "min"}
}
},
{
"encoding": {
"text": {"type": "quantitative", "field": "Open"},
"x": {"type": "temporal", "field": "Date", "title": "Month"},
"y": {
"type": "quantitative",
"field": "Open",
"title": "Price"
}
},
"layer": [
{
"mark": {
"type": "text",
"stroke": "white",
"strokeWidth": 0.5,
"align": "left",
"dx": 5,
"dy": -5
}
},
{
"mark": {"type": "text", "align": "left", "dx": 5, "dy": -5},
"encoding": {"color": {"type": "quantitative"}}
}
]
}
]
}
],
"config": {}
}
Four of your stocks have identical data, so the lines are hidden below the last one drawn. You can see this by faceting your dataset:
{
"data": {
"url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/graph1megasheet.csv",
"format": {"type": "csv", "parse": {"Date": "date:'%d/%m/%Y'"}}
},
"mark": "line",
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Open", "type": "quantitative"},
"facet": {"field": "Stockname", "type": "nominal", "columns": 3}
}
}
Notice the parse argument to the data format; this is required for correct parsing of your date entries (as mentioned in https://stackoverflow.com/a/70658380/2937831).

Only negative error bars are shown on vega-lite graph

I am trying to add error bars to my vega-lite graph and already have them calculated in a csv. When I try to add them as symmetric bars, only the negative error bars show up in the graph. I copied the method for this kind of error bar from the vega-lite documentation so I am pretty lost on where I went wrong.
I have attached my code and pictures below.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "data/Fisher_location137_test.csv"
},
"spacing": 15,
"hconcat": [{"layer":[
{"width": 750,
"height": 400,
"mark": {"type": "bar", "cursor": "pointer"},
"encoding": {
"color": {
"title": "Total (PPA)",
"field": "Total",
"type": "quantitative",
"scale": {"range": ["#FFCC66", "#09bc8a", "#023057"]}
},
"x": {
"field": "Variable",
"type": "nominal",
"axis": {"labelAngle": -45, "title": "Element",
"grid": false}
},
"y": {
"title": "Total (PPA)",
"field": "Total",
"type": "quantitative"
},
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.25
},
"tooltip": [
{"field": "Variable", "type": "nominal"},
{"field": "Total", "type": "quantitative"},
]
},
"selection": {"select": {"encodings": ["x"], "type": "single", "value": null}},
},
{
"mark": {
"type": "errorbar",
"ticks": {"color": "black"}
},
"encoding": {
"y": {"field": "Total", "type": "quantitative", "scale": {"zero": false}},
"yError": {"field": "stdev"},
"x":{"field": "Variable", "type": "nominal" }
}},
{ "mark": "bar",
"transform": [
{"filter": "datum.Total >= 100"},
{"calculate": "100", "as": "baseline"}
],
"encoding": {
"x": {"field": "Variable", "type": "ordinal"},
"y": {"field": "baseline", "type": "quantitative", "title": "Total (PPA)"},
"y2": {"field": "Total"},
"color": {"value": "#e45755"},
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.25
},
}
},
{"data": {
"values": [{}]
},
"layer":[{
"mark": "rule",
"encoding": {
"y": {"datum": 100}
},
}, {
"mark": {
"type": "text",
"align": "right",
"baseline": "bottom",
"dx": -2,
"dy": -2,
"x": "width",
"text": "Threshold"
},
"encoding": {
"y": {"datum": 100}
}
}]}
]},
{"layer":[
{
"mark": "bar",
"encoding": {
"color": {
"condition": {
"selection": "click",
"field": "Sex",
"type": "nominal",
"scale": {"range": ["#7a003c", "#FFCC66", "#5b6770"]}
},
"value": "lightgray"
},
"y": {"field": "Concentration", "type": "quantitative", "title": "Concentration (ug/g)", "aggregate": "mean", "axis": {"orient": "left"}},
"x": {"title": "Sex", "field": "Sex", "type": "nominal"},
"tooltip": [
{"field": "Sex", "type": "nominal"},
{"field": "Concentration", "type": "quantitative", "aggregate": "mean"},
{"field": "Count", "type": "quantitative", "aggregate": "sum"}
]
},
"selection": {"click": {"encodings": ["color"], "type": "multi"}},
"transform": [{"filter": {"selection": "select"}}]},
{
"mark": "rule",
"encoding":{
"y": {
"aggregate": "mean",
"field": "Reference",
"type": "quantitative",
},
"color": {"value": "black"},
"size": {"value": 3}
},
"transform": [{"filter": {"selection": "select"}}]},
{
"mark": "rule",
"encoding":{
"y": {
"aggregate": "mean",
"field": "Min",
"type": "quantitative",
},
"color": {"value": "Blue"},
"size": {"value": 2}
},
"transform": [{"filter": {"selection": "select"}}]},
{
"mark": "rule",
"encoding":{
"y": {
"aggregate": "mean",
"field": "Max",
"type": "quantitative",
},
"color": {"value": "Red"},
"size": {"value": 2}
},
"transform": [{"filter": {"selection": "select"}}]}
],
"width": 150,
"height": 400,
}]
};

How do I align each text mark in a layered stacked bar charts?

I tried adjusting the encoding for each text mark with the color encoding or the x encoding, but could never get the label to be in the correct segment. I must have misunderstood some encoding due to the unconventional layer I am trying to achieve.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"hconcat": [
{
"transform": [{"filter": {"field": "sentiment", "equal": "negative"}}],
"encoding": {
"y": {"field": "type", "title": null, "axis": null},
"x": {
"field": "sentiment",
"aggregate": "count",
"axis": null,
"sort": "descending"
},
"color": {"field": "channel"}
},
"layer": [
{"mark": "bar"},
{
"mark": {"type": "text", "fill": "white"},
"encoding": {"text": {"field": "sentiment", "aggregate": "count"}}
}
]
},
{
"width": 20,
"mark": {"type": "text", "align": "center", "fontWeight": 400},
"encoding": {
"y": {"field": "type", "axis": null},
"text": {"field": "type"}
}
},
{
"transform": [{"filter": {"field": "sentiment", "equal": "positive"}}],
"encoding": {
"color": {"field": "channel"},
"y": {"field": "type", "axis": null},
"x": {"field": "sentiment", "aggregate": "count", "axis": null}
},
"layer": [
{"mark": "bar"},
{
"mark": {"type": "text", "fill": "white"},
"encoding": {"text": {"field": "sentiment", "aggregate": "count"}}
}
]
}
],
"config": {"view": {"stroke": null}, "axis": {"grid": false}},
"data": {
"values": [
{"id": 1, "type": "shops", "channel": "line man", "sentiment": "negative"}
]
}
}
I got it working now. All I had to do was add a stack property with the value of zero to the x encoding for both bar charts.

Stacked bar chart is created even though aggregation function is non-summative

I have a concatenated graph which features a main line graph which has a brush selection tool allowing the user to pan across the lines and points and change the data on 4 other graphs. For one of the other graphs, I have attempted to take the average of line graph data but it doesn't work. Instead of giving me a singular bar, I get stacked bars and the error: "Stacking is applied even though the aggregate function is non-summative ("mean")".
Here is my code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "This is kinda sick yo",
"data": {
"url": "data/test3.csv"
},
"hconcat": [
{
"encoding": {
"color": {
"condition": {
"selection": "brush",
"title": "Species",
"field": "Species",
"type": "nominal",
"scale": {"range": ["green", "#FFFF00", "red"]}
},
"value": "lightgray"
},
"x": {
"field": "Variable",
"type": "nominal",
"axis": {"labelAngle": -45, "title": "Element",
"grid": false}
},
"y": {
"title": "Total",
"field": "Total",
"type": "quantitative"
},
"tooltip": [
{"field": "Variable", "type": "nominal"},
{"field": "Total", "type": "quantitative"},
]
},
"width": 550,
"height": 300,
"mark": {"type": "line", "point": "true"},
"selection": {"brush": {"encodings": ["x"], "type": "interval"}},
"transform": [{"filter": {"selection": "click"}}]
},
{
"encoding": {
"color": {
"condition": {
"selection": "click",
"field": "Total",
"type": "quantitative",
"scale": {"range": ["green", "#FFFF00", "red"]}
},
"value": "lightgray"
},
"y": {"field": "Total", "aggregate": "average"},
"x": {"title": "Species", "field": "Species", "type": "nominal"},
"tooltip": [
{"field": "Species", "type": "nominal"},
{"field": "Total", "type": "quantitative", "aggregate": "average"},
{"field": "Variable", "type": "nominal"}
]
},
"height": 300,
"width": 80,
"mark": "bar",
"selection": {"click": {"encodings": ["color"], "type": "multi"}},
"transform": [{"filter": {"selection": "brush"}}, ]
},
{
"encoding": {
"color": {
"condition": {
"selection": "click",
"field": "Sex",
"type": "nominal",
"scale": {"range": ["#993162", "#75b0a2", "grey"]},
"legend": null
},
"value": "lightgray"
},
"y": {"field": "Fisher Sex Value", "type": "quantitative", "aggregate": "mean"},
"x": {"title": "Sex", "field": "Sex", "type": "nominal"},
"tooltip": [
{"field": "Sex", "type": "nominal"},
{"field": "Fisher Sex Value", "type": "quantitative", "aggregate": "mean"},
]
},
"height": 300,
"width": 75,
"mark": "bar",
"selection": {"click": {"encodings": ["color"], "type": "multi"}},
"transform": [{"filter": {"selection": "brush"}}]
},
{
"encoding": {
"color": {
"condition": {
"selection": "click",
"field": "Sex",
"type": "nominal",
"scale": {"range": ["#993162", "#75b0a2", "grey"]},
"legend": null
},
"value": "lightgray"
},
"y": {"field": "Mink Sex Value", "type": "quantitative", "aggregate": "mean"},
"x": {"title": "Sex", "field": "Sex", "type": "nominal"},
"tooltip": [
{"field": "Sex", "type": "nominal"},
{"field": "Mink Sex Value", "type": "quantitative", "aggregate": "mean"},
]
},
"height": 300,
"width": 75,
"mark": "bar",
"selection": {"click": {"encodings": ["color"], "type": "multi"}},
"transform": [{"filter": {"selection": "brush"}}]
},
{
"encoding": {
"color": {
"condition": {
"selection": "click",
"field": "Sex",
"type": "nominal",
"scale": {"range": ["#993162", "#75b0a2", "grey"]}
},
"value": "lightgray"
},
"y": {"field": "Otter Sex Value", "type": "quantitative", "aggregate": "mean"},
"x": {"title": "Sex", "field": "Sex", "type": "nominal"},
"tooltip": [
{"field": "Sex", "type": "nominal"},
{"field": "Otter Sex Value", "type": "quantitative", "aggregate": "mean"},
]
},
"height": 300,
"width": 75,
"mark": "bar",
"selection": {"click": {"encodings": ["color"], "type": "multi"}},
"transform": [{"filter": {"selection": "brush"}}]
}
]
}
The first graph is the line graph and the second graph is the one where aggregation fails and I get stacks.Here is an image of what the graph looks like currently. Any help would be much appreciated.
Vega-Lite's encoding aggregations will implicitly group by unaggregated fields you specify in a set of encodings. A simplified version of the second chart's encoding looks like this:
{
"encoding": {
"color": {"field": "Total"},
"y": {"field": "Total", "aggregate": "average"},
"x": {"field": "Species"},
"tooltip": [
{"field": "Species"},
{"field": "Total", "aggregate": "average"},
{"field": "Variable"}
]
The unaggregated encodings are ["Total", "Species", "Variable"], so the operation will group-by these before computing the average of Total within each group. Grouping by unique values of Total before taking the mean of Total in each group is probably not what you were hoping for.
Perhaps removing the color encoding from that chart will give you more meaningful results.

Brush zooming in X and Y in Vega-lite

In Vega-lite, is it possible to zoom in to a plot with a brush in the X and Y direction at the same time?
Using this example as a base:
https://vega.github.io/vega-lite/examples/interactive_overview_detail.html
I tried encoding the Y, but I'm not sure how to point "scale": {"domain": {"selection": "brush"}} in the Y axis direction.
unexpected result
If not, is it possible to achieve similar results with the "bind": "scales"? The goal is to have a "key-map" of the chart with a zoom-in, and a small box showing where the zoom is on the broader time-series.
Code I've been trying with that example:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/sp500.csv"},
"vconcat": [{
"width": 480,
"mark": "area",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {"domain": {"selection": "brush"}},
"axis": {"title": ""}
},
"y": {"field": "price",
"type": "quantitative",
"scale": {"domain": {"selection": "brush"}}
}
}
}, {
"width": 480,
"height": 60,
"mark": "area",
"selection": {
"brush": {"type": "interval", "encodings": ["x","y"]}
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "price",
"type": "quantitative",
"axis": {"tickCount": 3, "grid": false}
}
}
}]
}`
You can do this by specifying the field or the encoding within the domain; for example:
"domain": {"selection": "brush", "encoding": "y"}
Putting this into your example looks like this (view live):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/sp500.csv"},
"vconcat": [
{
"width": 480,
"mark": "area",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {"domain": {"selection": "brush", "encoding": "x"}},
"axis": {"title": ""}
},
"y": {
"field": "price",
"type": "quantitative",
"scale": {"domain": {"selection": "brush", "encoding": "y"}}
}
}
},
{
"width": 480,
"height": 60,
"mark": "area",
"selection": {"brush": {"type": "interval", "encodings": ["x", "y"]}},
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {
"field": "price",
"type": "quantitative",
"axis": {"tickCount": 3, "grid": false}
}
}
}
]
}