How can I set a line color stocked in a data field ?
In Vega I did :
marks :[
{
encode: {
enter: {
...
stroke: {field: "color"}
}
}
}
]
Is there a similar way in Vega-Lite ?
You can use the color encoding with the line mark. There are a few examples on the vega-lite website; one relevant one is the Multi Series Line Chart:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "Stock prices of 5 Tech Companies over Time.",
"data": {"url": "data/stocks.csv"},
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
}
Related
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
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 have a concat view in vega-lite (kibana) where the first bar plot serves as a selection for the other plots. So if I click in one bar of the bar plot, all other visualizations change accordingly.I also have a dropdown with the same goal.
I would like to have a dynamic title (or text mark) that shows the y label of the bar that I just clicked (or the name in the dropdown). So far I managed to do so, however if there are no selections for the bar, all labels will appear in the same title, which is not great.
I thought that maybe initializing the parameter with a certain value would solve the issue, but if I click in between bars, all values appear and I have the same issue with the title. Furthermore, I would like all bars to be always visible, and just change the opacity of the bar that is clicked.
Below you can find a simplified version of what I mean,
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
"data": {"url": "data/weather.csv"},
"hconcat": [
{
"mark": "bar",
"encoding": {
"y": {"field": "location", "type": "nominal"},
"x": {"aggregate": "mean", "field": "precipitation"},
"opacity":{"condition":{"param":"click","value":0.2},"value":0.7}
},
"params":[{
"name":"click",
"select":{"type":"point","encodings":["y"], "on":"click"},
"bind":{"input":"select","options":["New York", "Seattle"]},
"value":{"y":"Seattle"}
},
{
"name":"highlight",
"select":{"type":"point"}
}
],
"transform":[{"filter":{"param":"click"}}]
},
{"layer":[{
"transform":[{"filter":{"param":"click"}}],
"mark":"bar",
"mark":{"type":"text","dy":-50, "dx":30, "fontSize":20},
"encoding":{"text":{"field":"location","type":"nominal"}}
}]},
{
"mark": "point",
"encoding": {
"x": {"field": "temp_min", "bin": true},
"y": {"field": "temp_max", "bin": true},
"size": {"aggregate": "count"}
},
"transform":[{"filter":{"param":"click"}}]
}
]
}
vega editor
As usual, any help will be more than welcome!
Following are the changes required:
To show both the bars, remove the filter transform from bar chart.
Added some changes in click params like if someone clicks on empty space, then nearest bar will be selected and changed values for opacity.
Refer the editor or the below code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
"data": {"url": "data/weather.csv"},
"hconcat": [
{
"mark": "bar",
"encoding": {
"y": {"field": "location", "type": "nominal"},
"x": {"aggregate": "mean", "field": "precipitation"},
"opacity": {
"condition": {"param": "click", "value": 0.7, "empty": false},
"value": 0.2
}
},
"params": [
{
"name": "click",
"select": {
"type": "point",
"encodings": ["y"],
"on": "click",
"clear": false,
"nearest": true
},
"bind": {"input": "select", "options": ["New York", "Seattle"]},
"value": "Seattle"
},
{"name": "highlight", "select": {"type": "point"}}
]
},
{
"mark": "point",
"title": {"text": {"expr": "click_location"}},
"encoding": {
"x": {"field": "temp_min", "bin": true},
"y": {"field": "temp_max", "bin": true},
"size": {"aggregate": "count"}
},
"transform": [{"filter": {"param": "click"}}]
}
]
}
I am struggling to understand why a layer spec like the below:
"layer": [
{"encoding": {
"facet": {"field": "FEATURE_VALUE"},
"x": {
"field": "DATE",
"type": "temporal"
},
"y": {
"field": "VALUE",
"type": "quantitative"
}
},
"mark": {
"type": "line"
}}
]
Throws an error to the effect of: Cannot read property 'push' of undefined
Meanwhile, the unit spec:
"encoding": {
"facet": {"field": "FEATURE_VALUE"},
"x": {
"field": "DATE",
"type": "temporal"
},
"y": {
"field": "VALUE",
"type": "quantitative"
}
},
"mark": {
"type": "line"
}
}
works just fine.
I can tell this has something to do with: Altair: Can't facet layered plots
However, can't quite seem to answer the principle question: can I have a trellis plot using facet as well as have layers on top of that (for say tooltips, rulers, etc.)
Thank you!
Vega-Lite provides two ways to specify facets: as an encoding (See Facet, Row, and Column Encoding Channels) and as an operator (See Facet Operator).
A layer chart is not allowed to contain a facet encoding, however a facet operator can contain a layer chart (the reason for this is that the semantics of layers containing incompatible facets is unclear).
So, instead of something like this:
"layer": [
{"encoding": {
"facet": {"field": "FEATURE_VALUE"},
"x": {
"field": "DATE",
"type": "temporal"
},
"y": {
"field": "VALUE",
"type": "quantitative"
}
},
"mark": {
"type": "line"
}}
]
you can do something like this:
"facet": {"field": "FEATURE_VALUE"},
"spec": {
"layer": [
{"encoding": {
"x": {
"field": "DATE",
"type": "temporal"
},
"y": {
"field": "VALUE",
"type": "quantitative"
}
},
"mark": {
"type": "line"
}}
]
}
I am using this example named "Line Chart with Point Markers" as reference, but not see other example or any clues about conditional or "selected by symbol" points.
The illustration shows a typical case (see also SPC) where I need only the blue central line with dots.
You can do this by layering filtered versions of the dataset. Modifying the example you linked to, it might look something like this (vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Stock prices of 5 Tech Companies over Time.",
"data": {"url": "data/stocks.csv"},
"encoding": {
"x": {"timeUnit": "year", "field": "date", "type": "temporal"},
"y": {"aggregate": "mean", "field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
},
"layer": [
{
"mark": {"type": "line", "point": true},
"transform": [{"filter": "datum.symbol == 'GOOG'"}]
},
{
"mark": {"type": "line"},
"transform": [{"filter": "datum.symbol != 'GOOG'"}]
}
]
}