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
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}
}
}
}
I would like to have an interval selection in a Vega-lite in which other data is filtered in response to the selection, but only after the user releases the mouse. For instance, consider this example where the user can filter the dates in a time series plot by selecting a range on another chart. As the user drags the selection in the bottom chart the top chart filters in real-time. What I would like to do is instead have the top chart only filter once the user has updated the selection in the bottom chart and released the mouse button.
Try this. It seems a bit awkward to me but does what you ask.
Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/sp500.csv"},
"vconcat": [
{
"width": 480,
"mark": "area",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {"domain": {"param": "brush"}},
"axis": {"title": ""}
},
"y": {"field": "price", "type": "quantitative"}
}
},
{
"width": 480,
"height": 60,
"mark": "area",
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"encodings": ["x"],
"on": {
"type": "mousemove",
"between": [{"type": "mouseup"}, {"type": "mousedown"}]
}
}
}
],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {
"field": "price",
"type": "quantitative",
"axis": {"tickCount": 3, "grid": false}
}
}
}
]
}
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"}
}
}
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}
}
}
]
}
I'm trying to build something like this:
example histogram with multiple independent series
I have 2 independent y-axis with orient left and right.
All series/layers using "orient":"right" should be sharing the same scale and all series/layers using "orient":"left" should be sharing the same scale.
I know of the "resolve" option as documented here but having read this How do I add a secondary Y axis to my vega-lite chart? and a bunch of other questions I couldn't find my particular use case.
My futile attempt so far looks like this:
example in online editor
example screenshot
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/movies.json"},
"transform":[
{"calculate":"datum.Production_Budget * 0.5","as":"y2"}
],
"layer":[
{
"mark": "bar",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"axis":{"orient":"left","title":"# of movies","grid":false},
"aggregate": "count",
"type": "quantitative"
}
}},
{
"mark": "line",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"field":"Production_Budget",
"aggregate": "average",
"type": "quantitative",
"axis":{"orient":"right","format":"s","title":"avg production budget in $"}
}
}
},
{
"mark": "line",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"field":"y2",
"aggregate": "average",
"type": "quantitative",
"axis":{"orient":"right","format":"s","title":"avg production budget in $"}
}
}
}
]
,"resolve": {
"scale":{"y":"independent"}
}
}
I've tried playing with the resolve option:
"resolve": {
"scale":{"axisLeft":"independent"}
}
"resolve": {
"axisLeft":{"y":"independent"}
}
"resolve": {
"axis":{"left":"independent"}
}
but none of them work.
You can do this by creating a layer within a layer: the two orient: "right" charts in a single layer with a shared axis, and the orient: "left" chart with an independent scale:
vega editor link
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/movies.json"},
"transform": [{"calculate": "datum.Production_Budget * 0.5", "as": "y2"}],
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"axis": {"orient": "left", "title": "# of movies", "grid": false},
"aggregate": "count",
"type": "quantitative"
}
}
},
{
"layer": [
{
"mark": "line",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"field": "Production_Budget",
"aggregate": "average",
"type": "quantitative",
"axis": {
"orient": "right",
"format": "s",
"title": "avg production budget in $"
}
}
}
},
{
"mark": "line",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"field": "y2",
"aggregate": "average",
"type": "quantitative",
"axis": {
"orient": "right",
"format": "s",
"title": "avg production budget in $"
}
}
}
}
]
}
],
"resolve": {"scale": {"y": "independent"}}
}