Vega-Lite "table" using text marks - vega-lite

Trying to replicate the example shown here:
https://observablehq.com/#mdeagen/vega-lite-table-using-text-marks#count
However, when I add the vegalite code to the online editor I get an error because of the following line of code:
{"filter": {"field": "row_num", "lte": count}},
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/penguins.json"
},
"transform": [
{"window": [{"op": "row_number", "as": "row_num"}]},
{"filter": {"field": "row_num", "lte": count}},
{"fold": ["Beak Length (mm)", "Beak Depth (mm)", "Flipper Length (mm)", "Body Mass (g)", "Species", "Island", "Sex"]}
],
"mark": "text",
"encoding": {
"y": {"field": "row_num", "type": "ordinal", "axis": null},
"text": {"field": "value", "type": "nominal"},
"x": {"field": "key", "type": "nominal", "axis": {"orient": "top", "labelAngle": 0, "title": null, "domain": false, "ticks": false}, "scale": {"padding": 15}}
}, "config": {"view": {"stroke": null}}
}
Does anyone know a simple fix for this.
Thanks.

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

Vega Lite - Bar Chart - Incorrectly Sorted

I just made a simple bar chart in Vega Lite, which works perfectly here:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Biggest Killers",
"data": {"url": "https://raw.githubusercontent.com/githubuser0099/Assignment2.1/main/Cause_Of_Death_v2.csv"},
"mark": "bar",
"encoding": {
"x": {"field": "Toll", "type": "quantitative", "title": ""},
"y": {"field": "Cause Of Death", "type": "nominal", "title": "", "sort": "-x"}
}
}
However, when I try and add a colour scheme, with the longest bars in darkest red, and shortest bars with lightest red, for some reason part of my sorting breaks:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Biggest Killers",
"data": {"url": "https://raw.githubusercontent.com/githubuser0099/Assignment2.1/main/Cause_Of_Death_v2.csv"},
"mark": "bar",
"encoding": {
"x": {"field": "Toll", "type": "quantitative", "title": ""},
"y": {"field": "Cause Of Death", "type": "nominal", "title": "", "sort": "-x"},
"color": {
"field": "Toll",
"type": "quantitative",
"scale": {"scheme": "reds"}
}
}
}
Any ideas? Any help would be sincerely appreciated.

The reason that your sorting is getting messed is probably because your values for Toll field is in string, so you simply transform that field to number as done below:
"transform": [{"calculate": "toNumber(datum.Toll)", "as": "Toll"}],
Or providing y-axis as sorting descending, also seems to work:
"y": {
"field": "Cause Of Death",
"type": "nominal",
"title": "",
"sort": {"order": "descending"}
},
Below is the snippet for approach 1 and 2:
Approach 1:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Biggest Killers",
"data": {
"url": "https://raw.githubusercontent.com/githubuser0099/Assignment2.1/main/Cause_Of_Death_v2.csv"
},
"mark": "bar",
"transform": [{"calculate": "toNumber(datum.Toll)", "as": "Toll"}],
"encoding": {
"x": {"field": "Toll", "type": "quantitative", "title": ""},
"y": {
"field": "Cause Of Death",
"type": "nominal",
"title": "",
"sort": "-x"
},
"color": {
"field": "Toll",
"type": "quantitative",
"scale": {"scheme": "reds"}
}
}
}
Approach 2:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Biggest Killers",
"data": {
"url": "https://raw.githubusercontent.com/githubuser0099/Assignment2.1/main/Cause_Of_Death_v2.csv"
},
"mark": "bar",
"encoding": {
"x": {"field": "Toll", "type": "quantitative", "title": ""},
"y": {
"field": "Cause Of Death",
"type": "nominal",
"title": "",
"sort": {"order": "descending"}
},
"color": {
"field": "Toll",
"type": "quantitative",
"scale": {"scheme": "reds"}
}
}
}

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.