<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@5.22.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.8"></script>
</head>
<body>
<div id="vis"/>
<script>
const spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"name": "source_0",
"data": {
"values": [
{"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21"},
{"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21"},
{"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21"},
{"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21"},
{"Items": "8", "Items_Rate": "0.45", "Month": "May-21"},
{"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21"},
{"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21"},
{"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21"},
{"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21"},
{"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21"},
{"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21"},
{"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21"}
]
},
"vconcat": [
{
"width": 850,
"height": 250,
"layer": [
{
"mark": {"type": "bar", "size": 50, "tooltip": true},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "ordinal",
"sort": null,
"scale": {"domain": {"param": "brush"}, "zero": true},
"axis": {
"title": "",
"labelAngle": 360,
"tickSize": 20,
"position": 0
}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {"tickMinStep": 1}
},
"color": {
"datum": "No. of Items",
"scale": {"range": ["#0065ad"]}
},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{
"field": "Items",
"type": "quantitative",
"title": "No. of Items"
}
]
}
},
{
"mark": {
"type": "line",
"point": {"shape": "square", "size": "50"},
"size": "2",
"tooltip": true
},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"title": "",
"sort": null,
"scale": {"domain": {"param": "brush"}}
},
"y": {
"field": "Items_Rate",
"type": "quantitative",
"title": "Items",
"scale": {"zero": false},
"sort": null
},
"color": {
"datum": "Items Rate",
"scale": {"range": ["black"]},
"legend": {"symbolType": "square"}
},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{
"field": "Items_Rate",
"type": "quantitative",
"title": "Rate"
}
]
}
}
],
"resolve": {
"scale": {
"y": "independent",
"shape": "independent",
"color": "independent",
"size": "independent"
}
}
},
{
"width": "850",
"height": 100,
"mark": "bar",
"params": [
{
"name": "brush",
"select": {"type": "interval", "encodings": ["x"], "translate": true}
}
],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"sort": null,
"axis": {"title": "", "labels": false, "ticks": false}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false,
"title": "",
"labels": false,
"ticks": false
}
},
"color": {"value": "#0065ad"}
}
}
],
"config": {
"axisY": {"minExtent": 40},
"legend": {
"orient": "top",
"layout": {"top": {"anchor": "middle"}},
"labelFont": "arial",
"titleFont": "arial"
}
}
};
vegaEmbed("#vis", spec, {mode: "vega-lite"}).then(console.log).catch(console.warn);
</script>
</body>
</html>It can also be viewed in Vega lite editor here:
https://vega.github.io/editor/#/gist/da859f07e288d51da47a309ef2718ab2/responsive_chart.json
My query is that when I select 4 or more graphs and scroll forwards, everything is working properly. However when I scroll the same backwards, the line graphs becomes incorrect.
Instead of the nearest point creating a line to join the newly visible point, the farthest or the second-last visible graph now is joining the points.
How could I change the code to have only the nearest point join with the new point and not the order of how they became visible?
For example, in the screenshot below, the Sept-21 point should join the Aug-21 point and NOT Nov-21 when I take the scroll backwards.
Thank you for the help.