jsonchartsvisualizationvega
How to change width of bar chart by slider in Vega
I have a Vega chart for which I need to change bar width of rectangle based on triangle slider.
The code :
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 400,
"height": 50,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"x": "Download data (.csv)", "c": "case1", "y": 20},
{"x": "Download data (.csv)", "c": "case2", "y": 20},
{"x": "Download data (.csv)", "c": "case3", "y": 20},
{"x": "Download data (.csv)", "c": "case4", "y": 20},
{"x": "Download data (.csv)", "c": "case5", "y":20}
]
},
{
"name": "filtered-table",
"source": "table",
"transform": [{"type": "stack", "groupby": ["x"], "field": "y"}]
}
],
"signals": [
{
"name": "dragging",
"value": false,
"on": [
{"events": "@handle:mousedown", "update": "true"},
{"events": "window:mouseup", "update": "false"}
]
},
{
"name": "handleYear",
"value": 20,
"on": [
{
"events": "[@handle:mousedown, window:mouseup] > window:mousemove!",
"update": "invert('x', clamp(x(), 0, width))"
}
]
},
{"name": "currentYear", "update": "clamp(handleYear, 0, 40)"}
],
"scales": [
{
"name": "y",
"type": "band",
"range": "height",
"domain": {"data": "filtered-table", "field": "x"}
},
{
"name": "x",
"type": "linear",
"range": "width",
"domain": {"data": "filtered-table", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": ["darkblue", "orange", "lightgrey", "red", "green"],
"domain": {"data": "filtered-table", "field": "c"}
}
],
"axes": [{"orient": "left", "scale": "y", "ticks": false, "labelPadding": 5},
{"orient": "bottom", "scale": "x", "ticks": false, "labelPadding": 5}],
"marks": [
{
"type": "rect",
"from": {"data": "filtered-table"},
"encode": {
"enter": {
"y": {"scale": "y", "field": "x"},
"height": {"scale": "y", "band": 1, "offset": -1},
"x": {"scale": "x", "field": "y0"},
"x2": {"scale": "x", "field": "y1"},
"fill": {"scale": "color", "field": "c"}
},
"update": {"fillOpacity": {"value": 1}},
"hover": {"fillOpacity": {"value": 0.5}}
}
},
{
"name": "handle",
"type": "symbol",
"encode": {
"enter": {
"y": {"scale": "x", "value":0, "offset": -7},
"shape": {"value": "triangle-down"},
"size": {"value": 400},
"stroke": {"value": "#000"},
"strokeWidth": {"value": 0.5}
},
"update": {
"x": {"scale": "x", "signal": "currentYear"},
"fill": {"signal": "dragging ? 'lemonchiffon' : '#fff'"}
},
"hover": {
"fill": {"value": "lemonchiffon"},
"cursor": {"value": "pointer"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -20},
"x": {"value": 25},
"fontSize": {"value": 32},
"fontWeight": {"value": "bold"},
"fill": {"value": "steelblue"}
},
"update": {"text": {"signal": "currentYear"}}
}
}
]
}
The triangle slider is positioned on x-axis with value 20 and the slider range is (0-40), so the slider can not be moved outside this range .
The expected result I want is : when the triangle slider is moved for example to 30 value on x-axis, the blue rectangle should be updated from (0-30) and the orange rectangle should be updated to (31-40) .
The expected result :
Solution
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 400,
"height": 50,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"x": "Download data (.csv)", "c": "case1", "y": 20},
{"x": "Download data (.csv)", "c": "case2", "y": 20},
{"x": "Download data (.csv)", "c": "case3", "y": 20},
{"x": "Download data (.csv)", "c": "case4", "y": 20},
{"x": "Download data (.csv)", "c": "case5", "y":20}
]
},
{
"name": "filtered-table",
"source": "table",
"transform": [
{"type": "formula", "as": "y", "expr": "datum.c=='case1'?currentYear:datum.c=='case2'?40-currentYear:datum.y"},
{"type": "stack", "groupby": ["x"], "field": "y"}
]
}
],
"signals": [
{
"name": "dragging",
"value": false,
"on": [
{"events": "@handle:mousedown", "update": "true"},
{"events": "window:mouseup", "update": "false"}
]
},
{
"name": "handleYear",
"value": 20,
"on": [
{
"events": "[@handle:mousedown, window:mouseup] > window:mousemove!",
"update": "invert('x', clamp(x(), 0, width))"
}
]
},
{"name": "currentYear", "update": "clamp(handleYear, 0, 40)"}
],
"scales": [
{
"name": "y",
"type": "band",
"range": "height",
"domain": {"data": "filtered-table", "field": "x"}
},
{
"name": "x",
"type": "linear",
"range": "width",
"domain": {"data": "filtered-table", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": ["darkblue", "orange", "lightgrey", "red", "green"],
"domain": {"data": "filtered-table", "field": "c"}
}
],
"axes": [{"orient": "left", "scale": "y", "ticks": false, "labelPadding": 5},
{"orient": "bottom", "scale": "x", "ticks": false, "labelPadding": 5}],
"marks": [
{
"type": "rect",
"from": {"data": "filtered-table"},
"encode": {
"update": {
"y": {"scale": "y", "field": "x"},
"height": {"scale": "y", "band": 1, "offset": -1},
"x": {"scale": "x", "field": "y0"},
"x2": {"scale": "x", "field": "y1"},
"fill": {"scale": "color", "field": "c"}
,"fillOpacity": {"value": 1}},
"hover": {"fillOpacity": {"value": 0.5}}
}
},
{
"name": "handle",
"type": "symbol",
"encode": {
"enter": {
"y": {"scale": "x", "value":0, "offset": -7},
"shape": {"value": "triangle-down"},
"size": {"value": 400},
"stroke": {"value": "#000"},
"strokeWidth": {"value": 0.5}
},
"update": {
"x": {"scale": "x", "signal": "currentYear"},
"fill": {"signal": "dragging ? 'lemonchiffon' : '#fff'"}
},
"hover": {
"fill": {"value": "lemonchiffon"},
"cursor": {"value": "pointer"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"value": -20},
"x": {"value": 25},
"fontSize": {"value": 32},
"fontWeight": {"value": "bold"},
"fill": {"value": "steelblue"}
},
"update": {"text": {"signal": "currentYear"}}
}
}
]
}
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices