Only negative error bars are shown on vega-lite graph - vega-lite

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

Related

How can I add a year slider to this Ranged Dot Plot in Vega Lite?

I have a dataset with relevant values from 2000-2019, and when I load up the graph with this specification:
"data": {
"name": "chart6",
"url": "https://raw.githubusercontent.com/sebaconstable/sebaconstable.github.io/main/chart6data.csv"
},
"height": 300,
"width": 450,
"encoding": {
"x": {
"field": "average years in school",
"type": "quantitative",
"scale": {"domain": [0, 20]},
"title": "Average Years in School"
},
"y": {
"field": "Country",
"type": "nominal",
"axis": {"offset": 5, "ticks": false, "minExtent": 70, "domain": false}
}
},
"layer": [
{
"mark": "line",
"encoding": {
"detail": {"field": "Country", "type": "nominal"},
"color": {"value": "#BBBBBB"}
}
},
{
"mark": {"type": "point", "filled": true},
"encoding": {
"tooltip": [
{"field": "Country", "type": "nominal", "title": "Country"},
{"field": "QuintGap", "type": "quantitative", "title": "Difference between richest and poorest quintile"},
{"field": "Median % Pop", "type": "nominal", "title": "Median % of population in CCT programmes (2000-2019)"}
],
"color": {
"field": "Quintile",
"type": "nominal",
"title": null,
"scale": {"scheme": "inferno"}
},
"size": {
"field": "Median % Pop",
"type": "quantitative",
"legend":null,
"scale": {"range": [10, 100]}
},
"opacity": {"value": 1}
}
}
]
}
The points for every year appear on each country. I want to make it so it has a year slider and then only the two points for the selected year show.
I have tried many things. I added:
"transform": [
{"filter": {"field": "Quintile", "oneOf": ["Poorest Quintile", "Richest Quintile"]}},
{"filter": "datum.Year==selecta"}
],
"params": [
{
"name": "selecta",
"value": [{"year":2019}],
"bind": {
"input": "range",
"min": 2000,
"max": 2019,
"step": 1,
"name": "Select year:"
}
}
],
this code above the first encoding, and that successfully creates a slider (which filters to the relevant data correctly) however the rest of the chart disappears. I also tried adding a filter to "oneOf" the 20 years, however this made the visualisation dissapear.
I feel that I'm quite close to the solution but after several hours can't quite figure it out. Any help is much appreciated!
Here you go.
{
"data": {
"name": "chart6",
"url": "https://raw.githubusercontent.com/sebaconstable/sebaconstable.github.io/main/chart6data.csv"
},
"transform": [{"filter": "datum.Year==selecta"}],
"params": [
{
"name": "selecta",
"value": [2019],
"bind": {
"input": "range",
"min": 2000,
"max": 2019,
"step": 1,
"name": "Select year:"
}
}
],
"height": 300,
"width": 450,
"encoding": {
"x": {
"field": "average years in school",
"type": "quantitative",
"scale": {"domain": [0, 20]},
"title": "Average Years in School"
},
"y": {
"field": "Country",
"type": "nominal",
"axis": {"offset": 5, "ticks": false, "minExtent": 70, "domain": false}
}
},
"layer": [
{
"mark": "line",
"encoding": {
"detail": {"field": "Country", "type": "nominal"},
"color": {"value": "#BBBBBB"}
}
},
{
"mark": {"type": "point", "filled": true},
"encoding": {
"tooltip": [
{"field": "Country", "type": "nominal", "title": "Country"},
{
"field": "QuintGap",
"type": "quantitative",
"title": "Difference between richest and poorest quintile"
},
{
"field": "Median % Pop",
"type": "nominal",
"title": "Median % of population in CCT programmes (2000-2019)"
}
],
"color": {
"field": "Quintile",
"type": "nominal",
"title": null,
"scale": {"scheme": "inferno"}
},
"size": {
"field": "Median % Pop",
"type": "quantitative",
"legend": null,
"scale": {"range": [10, 100]}
},
"opacity": {"value": 1}
}
}
]
}

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).

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.

Minimum value for y-axis in 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.