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
Related
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}
}
}
}
]
}
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 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 drawing a horizontal stacked bar-plot involving many datasets and want to add a vertical scrollbar because displaying all at once is not space efficient. I am drawing it using vegalite in observable notebook. So, I am wondering how to include scrollbar in vegalite?
You can create the same bar chart or a simple bar chart in hconcat having all the data but with a selection interval params. Then use the same param name to change the scales of original chart. So initially all the data will be visible but when you perform a selection on your simple bar chart it will give the effect of scrolling of bar chart.
Below is the sample code or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/sp500.csv"},
"hconcat": [
{
"height": 400,
"width": 50,
"mark": {"type": "bar", "fill": "lightgray"},
"params": [
{"name": "brush", "select": {"type": "interval", "encodings": ["y"]}}
],
"encoding": {
"y": {"field": "date", "type": "temporal", "sort": "-x"},
"x": {
"field": "price",
"type": "quantitative",
"axis": {"tickCount": 3, "grid": false}
}
}
},
{
"height": 400,
"width": 480,
"mark": "bar",
"encoding": {
"y": {
"field": "date",
"type": "temporal",
"scale": {"domain": {"param": "brush"}},
"axis": {"title": ""}
},
"x": {"field": "price", "type": "quantitative"}
}
}
]
}
Other way to add a basic scrollbar by giving max-height and overflow scroll to a div in which the chart is embedded.
Below is the snippet or refer fiddle:
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "https://vega.github.io/editor/data/sp500.csv"},
"hconcat": [
{
"height": 1400,
"width": 300,
"mark": "bar",
"encoding": {
"y": {
"field": "date",
"type": "temporal",
"axis": {"title": ""}
},
"x": {"field": "price", "type": "quantitative"}
}
}
]
}
vegaEmbed("#vis", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
.vegaDiv{
max-height: 300px;
overflow: scroll;
}
<script src="https://cdn.jsdelivr.net/npm/vega#5.20.2/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#5.0.0/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.17.0/build/vega-embed.min.js"></script>
<div class="vegaDiv" id="vis"></div>
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}
}
}
]
}