I am trying to create simple stacked bar chart and for some reason sorting on color is messed up .
Here what i am getting
But what i need is d and r should be switched - so d in middle and green color, r is last and orange. I tried sorting on each layer, but still not desired result
here is a code:
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 657,
"height": 65,
"data": {
"values": [
{"name":"t", "value":50},
{"name":"d", "value":25},
{"name":"r", "value":25}
]
},
"encoding": {
"x": {
"field": "value",
"type": "quantitative",
"sort":"descending",
"stack":"normalize",
"axis": {
"grid": false,
"ticks": false,
"labels": false,
"title": null
}},
"color":{"field":"name", "legend":null,"sort":{"field":"name"},"scale":{"domain":["t","d","r"],
"range":["blue","green","orange"]
}},
"text": {"field":"name", "type":"nominal"}},
"layer": [
{"mark": "bar"},
{ "mark": { "type":"text", "dy": -45, "align":"right"}}
],
}```
Related
Here's my wandb vega. The problem is, right now, it is very hard to mouse over my line and get the tooltip to show. It is like you must hover over the exact pixel of the line with your mouse. How do I make the activation radius larger, so my tooltip shows up if I am approximately on top of the point of my line?
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A plot for an arbitrary number of lines",
"data": {
"name": "wandb"
},
"transform": [
{"filter": {"field": "${field:lineVal}", "valid": true}},
{"filter": {"field": "${field:step}", "valid": true}}
],
"title": "${string:title}",
"layer": [
{
"selection": {
"grid": {
"type": "interval",
"bind": "scales"
}
},
"mark": {"type": "line", "strokeWidth": 5, "interpolate": "linear", "tooltip": true},
"encoding": {
"x":{
"field": "${field:step}",
"type": "quantitative",
"title": "${string:xname}"
},
"y": {
"field": "${field:lineVal}",
"title": "y",
"type": "quantitative"
},
"color": {
"type": "nominal",
"field": "${field:lineKey}"
},
"strokeDash": {
"type": "nominal",
"field": "name"
}
}
}
]
}
You haven't provided the data along with your schema so it is difficult to answer your specific case. However, you should be able to adapt the example code from https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html to achieve what you want.
I'm looking for a vega-lite configuration to show small multiples (using the facet operator row or column) with all other data points greyed out in the background.
Here is an example plot using the facet-operator:
facet plot
in vega-editor
"facet": {
"row": {
"field": "group",
"type": "nominal"
}
},
And here is an example using multiple charts with the concat operator and color channel to grey out other groups:
concat-plot
in vega-editor
"color": {"condition": {"test": "datum['group'] != 1", "value": "grey"}, "value": "red"}
I was wondering if there is a combination of transforms and repeat commands to achieve this for an unknown number of groups.
Here is one possible solution:
create an additional layer with new data
"facet": {"row": {"field": "group"}},
"spec": {
"layer": [
{
"data": {"name": "main"},
"mark": "circle",
"encoding": {
"y": {
"field": "y",
"type": "ordinal"
},
"x": {
"field": "x",
"type": "ordinal"
},
"color": {"value": "grey"}
},
"params": []
},
{
"mark": {"type": "circle", "opacity": 1, "color": "red"},
"encoding": {
"y": {
"field": "y",
"type": "ordinal"
},
"x": {
"field": "x",
"type": "ordinal"
}
}
}
]
}
full example in vega editor
I have 2 charts which might have been created using hconcat. The first spec contains only an y-axis which is going to be fixed and it will act as a locked axis for my 2nd chart. If I scroll horizontally, it should only scroll the 2nd chart and my 1st y-axis chart should remain as it is, so it becomes easier to read the measures.
Below is an reproducible example or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/cars.json"},
"hconcat": [
{
"mark": "text",
"encoding": {"y": {"field": "Displacement", "type": "quantitative"}}
},
{
"hconcat": [
{
"width": 800,
"mark": "line",
"params": [
{
"name": "brush",
"select": {"type": "interval", "encodings": ["x"]}
}
],
"encoding": {
"x": {"field": "Year", "type": "temporal"},
"y": {
"field": "Cylinders",
"type": "quantitative",
"axis": {"grid": false}
}
}
}
]
}
]
}
This image contains Y-axis on left side
This contains only x-axis,Y-axis disappeared
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 want to add vertical Rule lines to my chart as date milestone indicators (like the red line in image).
X axis is dates (temportal), and y axis values are numbers.
In image is the closest I could get using explicit values for data property in Rule layer:
{
"mark": "rule",
"data": {
"values": [
"{\"x\":\"2020/04/10\"}"
]
},
"encoding": {
"x": {
"field": "x",
"type": "ordinal",
},
"color": {
"value": "red"
},
"size": {
"value": 1
}
}
}
I have also tried types: "type": "temportal", and "type": "quantitative", "aggregate": "distinct" with no luck.
My goal is to be able to add multiple red vertical Rule lines with explicit/constant x values to the chart.
Datum is meant for specifying literal fixed values. You can add several rules by layering them together with your main data. This approach works with quantitative data encoded in the x channel:
"layer": [
{
"mark": { "type": "line" },
"encoding": { "y": {...}, },
},
{
"mark": { "type": "rule", "color": "red", "size": 1, },
"encoding": {"x": {"datum": 42}},
},
{
"mark": { "type": "rule", "color": "blue", "size": 1, },
"encoding": {"x": {"datum": 100}},
},
]
For dealing with temporal data, you additionally have to specify how it should be parsed. This approach works for me:
"layer": [
{
// First layer: spec of your main linear plot.
},
{
// Second layer: spec of the vertical rulers.
"mark": { "type": "rule", "color": "red", "size": 2, },
"encoding": {
"x": { "field": "date", "type": "temporal", },
},
"data": {
"values": [
{"date": "25 May 2020 14:15:00"},
{"date": "25 May 2020 14:20:59"},
],
"format": {
"parse": {"date": "utc:'%d %b %Y %H:%M:%S'"}
}
},
},
]