Could someone please show me how to create a simple Progress Bar in vega-lite using the following data? Thanks in advance.
SEGMENT
ACHIEVED
REMAINING
Enterprise
73.1%
26.9%
If I'm understanding your question correctly, you can do something like this (view in editor):
{
"data": {
"values": [{"segment": "Enterprise", "achieved": 0.731, "remaining": 0.269}]
},
"transform": [
{"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
],
"mark": "bar",
"encoding": {
"y": {"field": "segment", "type": "nominal"},
"x": {
"field": "percentage",
"type": "quantitative",
"axis": {"format": ".0%"}
},
"color": {"field": "label", "type": "nominal"}
}
}
Related
I've been trying to edit my legend on a line chart to use different symbols for each field in the series. My output on the actual chart is showing correctly, where each series had a different symbol, but my legend duplicates the series, one showing the original shapes with the correct colors, the other showing the correct shapes with the wrong color (just black). Am I missing something about how these properties need to be combined so it's not duplicated? Thanks in advance for the help. Link to online editor
Doubled Legend Series Image
(also how do I get images to just show up in the post??)
Thanks,
Bryan
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/barley.json"},
"layer": [
{
"mark": {"type": "line", "tooltip": true, "interpolate": "linear"},
"encoding": {
"stroke": {"field": "site", "type": "nominal", "legend": null},
"opacity": {
"condition": {
"test": {"field": "__selected__", "equal": "false"},
"value": 0.3
},
"value": 1
}
}
},
{
"mark": {"type": "point"},
"encoding": {
"shape": {"field": "site", "type": "nominal"},
"color": {"field": "site", "type": "nominal"},
"opacity": {
"condition": {
"test": {"field": "__selected__", "equal": "false"},
"value": 0.3
},
"value": 1
}
}
}
],
"encoding": {
"y": {
"field": "variety",
"type": "nominal",
"axis": {"grid": true},
"sort": {
"op": "average",
"field": "All Except Difference",
"order": "descending"
}
},
"x": {
"field": "yield",
"type": "quantitative",
"sort": {
"op": "average",
"field": "All Except Difference",
"order": "descending"
},
"scale": {"zero": false}
}
}
}
My vega lite json: Open the Chart in the Vega Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"layer": [
{
"data": {"url": "data/cars.json"},
"params": [
{
"name": "grid",
"select": "interval",
"bind": "scales"
}
],
"mark": "circle",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {
"field": "Horsepower",
"type": "quantitative",
"scale": {
"range": ["blue", "blue"]
}
}
}
},
{
"data": {"url": "data/cars.json"},
"mark": "circle",
"encoding": {
"x": {"field": "Miles_per_Gallon", "type": "quantitative"},
"y": {"field": "Acceleration", "type": "quantitative"},
"color": {
"field": "Displacement",
"type": "quantitative",
"scale": {
"range": ["black", "black"]
}
}
}
}
]
}
I'm displaying 2 layers of scratter plot, so I want it to have 2 legend color bars.
When I use "color", the second legend is merged, and overriden by the first one.
When I change to use "fill", I manage to have 2 different color bars. But what if I have 4 layers, how to do it?
You need to add the resolve property.
"resolve": {"legend":{"color": "independent"}, "scale": {"color": "independent"} }
Sample on vega editor:
Open the Chart in the Vega Editor
For a Stacked Bar Chart, can you sort the bars by the size of one of the segments?
E.g., take this Stacked Bar Chart from the examples (Open Editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/barley.json"},
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield"},
"y": {"field": "variety"},
"color": {"field": "site"}
}
}
Now I would like to sort the y-axis based on the yield in Crookston. Is that possible?
Sorting by the total of another field is relatively easy; you can do so with the "sort" entry of the desired encoding (sort docs):
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/barley.json"},
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield"},
"y": {"field": "variety", "sort": {"op": "sum", "field": "yield"}},
"color": {"field": "site"}
}
}
If you want to sort just by the value when site == "Crookston", you can do so by first applying a calculate transform to select just that value:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/barley.json"},
"transform": [
{
"calculate": "datum.site == 'Crookston' ? datum.yield : 0",
"as": "crookston"
}
],
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield"},
"y": {"field": "variety", "sort": {"op": "sum", "field": "crookston"}},
"color": {"field": "site"}
}
}
I am a newbie to Vega-Lite and I am trying to replicate a chart similar to this
Following is my code and it does not generate what I need.
{
"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
"width":800,
"height":600,
"autosize":{
"type":"fit",
"contains":"padding"
},
"data":{
"url":"data/cars.json"
},
"mark":{
"type":"rect",
"tooltip":true,
"strokeWidth":0.1,
"stroke":"white"
},
"encoding":{
"x":{
"field":"Horsepower",
"type":"quantitative",
"bin":{
"maxbins":100
},
"axis":{
"labelAngle":0
}
},
"y":{
"aggregate":"count",
"field":"Horsepower",
"type":"quantitative"
}
}
}
Here is what it does
What do I need to do to be able to get my desired output? There is a question here already asked on the topic How to reproduce the Unsub histogram in Altair? but it was done in python altair, which I am not trying to do. I want to generate that using solely Vega-Lite.
Thank you in advance.
You can use a bin transform followed by a window transform to generate the fields required to create this kind of chart. For example (open in editor):
{
"data": {"url": "data/cars.json"},
"transform": [
{"bin": {"maxbins": 50}, "field": "Horsepower", "as": "Horsepower"},
{"window": [{"op": "count", "as": "index"}], "groupby": ["Horsepower"]}
],
"mark": {
"type": "rect",
"tooltip": true,
"strokeWidth": 0.3,
"stroke": "white"
},
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative", "bin": "binned"},
"x2": {"field": "Horsepower_end"},
"y": {
"field": "index",
"type": "ordinal",
"scale": {"reverse": true},
"title": "count"
}
},
"width": 400,
"height": 300
}
I am working on a layered chart where I have both bars and rule lines. The issue I'm having is that on the x-axis, the tick marks and tick labels only appear under the bars and do not span the entire axis, making it so that there are no tick marks and labels underneath where the rule lines are located. Here is an example of what I'm seeing (link to Vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/movies.json"},
"transform": [
{"calculate": "2*datum.IMDB_Rating", "as": "UpperLimit"}
],
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {"aggregate": "count", "type": "quantitative"}
}
},
{
"mark": "rule",
"encoding": {
"x": {
"aggregate": "max",
"field": "UpperLimit",
"type": "quantitative"
},
"color": {"value": "red"},
"size": {"value": 5}
}
}
]
}
Image of issue
How do I get the tick marks and labels to span the entire axis? Thanks in advance for the help!
When you use a bin transform within an encoding, Vega-Lite adjusts the default axis properties to match the binning. You can re-adjust these manually via the encoding's scale and axis properties, but I think a simpler way is to move the bin transform to the chart's transform specification. Here is an example (Vega Editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/movies.json"},
"transform": [
{"calculate": "2*datum.IMDB_Rating", "as": "UpperLimit"},
{
"bin": true,
"field": "IMDB_Rating",
"as": ["IMDB_Rating_0", "IMDB_Rating_1"]
}
],
"layer": [
{
"mark": "bar",
"encoding": {
"x": {
"field": "IMDB_Rating_0",
"type": "quantitative",
"bin": "binned"
},
"x2": {"field": "IMDB_Rating_1"},
"y": {"aggregate": "count", "type": "quantitative"}
}
},
{
"mark": "rule",
"encoding": {
"x": {
"aggregate": "max",
"field": "UpperLimit",
"type": "quantitative"
},
"color": {"value": "red"},
"size": {"value": 5}
}
}
]
}