I have been trying to add a legend to the following example in Vega-lite. The visualization has a facet and each bar has independent axis. Each bar has different segments with different colors. When I tried to add a legend, it changes the color defined in each mark to the first mark and the legend overlap.
This is the example without changes:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"title":"Revenue", "subtitle":"US$, in thousands", "ranges":[150,225,300],"measures":[220,270],"markers":[250]},
{"title":"Profit", "subtitle":"%", "ranges":[20,25,30],"measures":[21,23],"markers":[26]},
{"title":"Order Size", "subtitle":"US$, average", "ranges":[350,500,600],"measures":[100,320],"markers":[550]},
{"title":"New Customers", "subtitle":"count", "ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
{"title":"Satisfaction", "subtitle":"out of 5", "ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
]
},
"facet": {
"row": {
"field": "title", "type": "ordinal",
"header": {"labelAngle": 0, "title": ""}
}
},
"spacing": 10,
"spec": {
"encoding": {
"x": {
"type": "quantitative",
"scale": {"nice": false},
"title": null
}
},
"layer": [{
"mark": {"type": "bar", "color": "#eee"},
"encoding": {"x": {"field": "ranges[2]"}}
},{
"mark": {"type": "bar", "color": "#ddd"},
"encoding": {"x": {"field": "ranges[1]"}}
},{
"mark": {"type": "bar", "color": "#ccc"},
"encoding": {"x": {"field": "ranges[0]"}}
},{
"mark": {"type": "bar", "color": "lightsteelblue", "size": 10},
"encoding": {"x": {"field": "measures[1]"}}
},{
"mark": {"type": "bar", "color": "steelblue", "size": 10},
"encoding": {"x": {"field": "measures[0]"}}
},{
"mark": {"type": "tick", "color": "black"},
"encoding": {"x": {"field": "markers[0]"}}
}]
},
"resolve": {"scale": {"x": "independent"}},
"config": {"tick": {"thickness": 2}}
}
Here the changes I did without success because it change the color defined in the first 2 mark rather than having two separate scales for each mark
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"title":"Revenue", "subtitle":"US$, in thousands", "ranges":[150,225,300],"measures":[220,270],"markers":[250]},
{"title":"Profit", "subtitle":"%", "ranges":[20,25,30],"measures":[21,23],"markers":[26]},
{"title":"Order Size", "subtitle":"US$, average", "ranges":[350,500,600],"measures":[100,320],"markers":[550]},
{"title":"New Customers", "subtitle":"count", "ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
{"title":"Satisfaction", "subtitle":"out of 5", "ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
]
},
"facet": {
"row": {
"field": "title", "type": "ordinal",
"header": {"labelAngle": 0, "title": ""}
}
},
"spacing": 10,
"spec": {
"encoding": {
"x": {
"type": "quantitative",
"scale": {"nice": false},
"title": null
}
},
"layer": [{
"mark": {"type": "bar", "color": "#eee"},
"encoding": {
"x": {"field": "ranges[2]"},
"color":{
"field":"ranges[2]",
"type":"quantitative",
"legend":{
"orient": "right"
}
}
}
},{
"mark": {"type": "bar", "color": "#ddd"},
"encoding": {
"x": {"field": "ranges[1]"},
"color":{
"field":"ranges[1]",
"type":"quantitative",
"legend":{
"orient": "right"
}
}
}
},{
"mark": {"type": "bar", "color": "#ccc"},
"encoding": {"x": {"field": "ranges[0]"}}
},{
"mark": {"type": "bar", "color": "lightsteelblue", "size": 10},
"encoding": {"x": {"field": "measures[1]"}}
},{
"mark": {"type": "bar", "color": "steelblue", "size": 10},
"encoding": {"x": {"field": "measures[0]"}}
},{
"mark": {"type": "tick", "color": "black"},
"encoding": {"x": {"field": "markers[0]"}}
}]
},
"resolve": {"scale": {"x": "independent"}},
"config": {"tick": {"thickness": 2}}
}
Anyone has experience creating this type of legend
Thanks
I have added a color and legend to each mark to make the point that the gradient displayed is not related to the marks defined in the visualization
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"title": "Revenue",
"subtitle": "US$, in thousands",
"ranges": [150, 225, 300],
"measures": [220, 270],
"markers": [250]
},
{
"title": "Profit",
"subtitle": "%",
"ranges": [20, 25, 30],
"measures": [21, 23],
"markers": [26]
},
{
"title": "Order Size",
"subtitle": "US$, average",
"ranges": [350, 500, 600],
"measures": [100, 320],
"markers": [550]
},
{
"title": "New Customers",
"subtitle": "count",
"ranges": [1400, 2000, 2500],
"measures": [1000, 1650],
"markers": [2100]
},
{
"title": "Satisfaction",
"subtitle": "out of 5",
"ranges": [3.5, 4.25, 5],
"measures": [3.2, 4.7],
"markers": [4.4]
}
]
},
"facet": {
"row": {
"field": "title",
"type": "ordinal",
"header": {"labelAngle": 0, "title": ""}
}
},
"spacing": 10,
"spec": {
"encoding": {
"x": {"type": "quantitative", "scale": {"nice": false}, "title": null}
},
"layer": [
{
"mark": {"type": "bar", "fill": "red"},
"encoding": {
"x": {"field": "ranges[2]"},
"color": {
"field": "ranges[2]",
"type": "quantitative",
"legend": {"orient": "right"}
}
}
},
{
"mark": {"type": "bar", "fill": "green"},
"encoding": {
"x": {"field": "ranges[1]"},
"color": {
"field": "ranges[1]",
"type": "quantitative",
"legend": {"orient": "right"}
}
}
},
{
"mark": {"type": "bar", "fill": "yellow"},
"encoding": {
"x": {"field": "ranges[0]"},
"color": {
"field": "ranges[0]",
"type": "quantitative",
"legend": {"orient": "right"}
}
}
},
{
"mark": {"type": "bar", "fill": "blue", "size": 10},
"encoding": {
"x": {"field": "measures[1]"},
"color": {
"field": "measures[1]",
"type": "quantitative",
"legend": {"orient": "right"}
}
}
},
{
"mark": {"type": "bar", "fill": "violet", "size": 10},
"encoding": {
"x": {"field": "measures[0]"},
"color": {
"field": "measures[0]",
"type": "quantitative",
"legend": {"orient": "right"}
}
}
},
{
"mark": {"type": "tick", "fill": "black"},
"encoding": {"x": {"field": "markers[0]"}}
}
]
},
"resolve": {"scale": {"x": "independent"}},
"config": {"tick": {"thickness": 2}}
}
I have changed the color given in mark to fill which seemed to resolve the issue.
Below is the config or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"title": "Revenue",
"subtitle": "US$, in thousands",
"ranges": [150, 225, 300],
"measures": [220, 270],
"markers": [250]
},
{
"title": "Profit",
"subtitle": "%",
"ranges": [20, 25, 30],
"measures": [21, 23],
"markers": [26]
},
{
"title": "Order Size",
"subtitle": "US$, average",
"ranges": [350, 500, 600],
"measures": [100, 320],
"markers": [550]
},
{
"title": "New Customers",
"subtitle": "count",
"ranges": [1400, 2000, 2500],
"measures": [1000, 1650],
"markers": [2100]
},
{
"title": "Satisfaction",
"subtitle": "out of 5",
"ranges": [3.5, 4.25, 5],
"measures": [3.2, 4.7],
"markers": [4.4]
}
]
},
"facet": {
"row": {
"field": "title",
"type": "ordinal",
"header": {"labelAngle": 0, "title": ""}
}
},
"spacing": 10,
"spec": {
"encoding": {
"x": {"type": "quantitative", "scale": {"nice": false}, "title": null}
},
"layer": [
{
"mark": {"type": "bar", "fill": "#eee"},
"encoding": {
"x": {"field": "ranges[2]"},
"color": {
"field": "ranges[2]",
"type": "quantitative",
"legend": {"orient": "right"}
}
}
},
{
"mark": {"type": "bar", "fill": "#ddd"},
"encoding": {
"x": {"field": "ranges[1]"},
"color": {
"field": "ranges[1]",
"type": "quantitative",
"legend": {"orient": "right"}
}
}
},
{
"mark": {"type": "bar", "fill": "#ccc"},
"encoding": {"x": {"field": "ranges[0]"}}
},
{
"mark": {"type": "bar", "fill": "lightsteelblue", "size": 10},
"encoding": {"x": {"field": "measures[1]"}}
},
{
"mark": {"type": "bar", "fill": "steelblue", "size": 10},
"encoding": {"x": {"field": "measures[0]"}}
},
{
"mark": {"type": "tick", "fill": "black"},
"encoding": {"x": {"field": "markers[0]"}}
}
]
},
"resolve": {"scale": {"x": "independent"}},
"config": {"tick": {"thickness": 2}}
}
I managed to create a legend as I was expecting. I create another visualization mark bar and create a fake legend there, and using hcol, I concatenate this to the existing graph
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"title": "Revenue",
"subtitle": "US$, in thousands",
"ranges": [150, 225, 300],
"measures": [220, 270],
"markers": [250]
},
{
"title": "Profit",
"subtitle": "%",
"ranges": [20, 25, 30],
"measures": [21, 23],
"markers": [26]
},
{
"title": "Order Size",
"subtitle": "US$, average",
"ranges": [350, 500, 600],
"measures": [100, 320],
"markers": [550]
},
{
"title": "New Customers",
"subtitle": "count",
"ranges": [1400, 2000, 2500],
"measures": [1000, 1650],
"markers": [2100]
},
{
"title": "Satisfaction",
"subtitle": "out of 5",
"ranges": [3.5, 4.25, 5],
"measures": [3.2, 4.7],
"markers": [4.4]
}
]
},
"hconcat": [{
"data": {
"values": [
{
"color": "green",
"phase": 1,
"name": "Green"
},
{
"color": "silver",
"phase": 1,
"name": "Silver"
},
{
"color": "violet",
"phase": 1,
"name": "Violet"
},
{
"color": "yellow",
"phase": 1,
"name": "Yellow"
},
{
"color": "red",
"phase": 1,
"name": "Red"
}
]
},
"mark": "bar",
"width": 50,
"encoding": {
"y": {
"field": "name",
"type": "nominal",
"axis": {"title": null}
},
"x": {
"field": "phase",
"type": "quantitative",
"axis": null
},
"color": {
"field": "color",
"type": "nominal",
"scale": null,
"legend": null
}
}
},{
"facet": {
"row": {
"field": "title",
"type": "ordinal",
"header": {"labelAngle": 0, "title": ""}
}
},
"spacing": 10,
"spec": {
"encoding": {
"x": {"type": "quantitative", "scale": {"nice": false}, "title": null}
},
"layer": [
{
"mark": {"type": "bar", "fill": "red"},
"encoding": {
"x": {"field": "ranges[2]"}
}
},
{
"mark": {"type": "bar", "fill": "yellow"},
"encoding": {
"x": {"field": "ranges[1]"}
}
},
{
"mark": {"type": "bar", "fill": "violet"},
"encoding": {"x": {"field": "ranges[0]"}}
},
{
"mark": {"type": "bar", "fill": "silver", "size": 10},
"encoding": {"x": {"field": "measures[1]"}}
},
{
"mark": {"type": "bar", "fill": "green", "size": 10},
"encoding": {"x": {"field": "measures[0]"}}
},
{
"mark": {"type": "tick", "fill": "black"},
"encoding": {"x": {"field": "markers[0]"}}
}
]
},
"resolve": {"scale": {"x": "independent"}}
}],
"config": {"tick": {"thickness": 2}}
}
Related
I want to have a tree chart of my data using vega in kibana 7.9.0, but I don't know how to write the query for that.
the below code is an example of tree chart from github website. I want such layout for my own index which I have it in kibanan.
Help me how to do that.
tree chart example
Sample tree chart code:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.",
"width": 1000,
"height": 1600,
"padding": 5,
"signals": [
{
"name": "labels", "value": true,
"bind": {"input": "checkbox"}
},
{
"name": "layout", "value": "tidy",
"bind": {"input": "radio", "options": ["tidy", "cluster"]}
},
{
"name": "links", "value": "diagonal",
"bind": {
"input": "select",
"options": ["line", "curve", "diagonal", "orthogonal"]
}
},
{
"name": "separation", "value": false,
"bind": {"input": "checkbox"}
}
],
"data": [
{
"name": "tree",
"url": "data/flare.json",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": {"signal": "layout"},
"size": [{"signal": "height"}, {"signal": "width - 100"}],
"separation": {"signal": "separation"},
"as": ["y", "x", "depth", "children"]
}
]
},
{
"name": "links",
"source": "tree",
"transform": [
{ "type": "treelinks" },
{
"type": "linkpath",
"orient": "horizontal",
"shape": {"signal": "links"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"range": {"scheme": "magma"},
"domain": {"data": "tree", "field": "depth"},
"zero": true
}
],
"marks": [
{
"type": "path",
"from": {"data": "links"},
"encode": {
"update": {
"path": {"field": "path"},
"stroke": {"value": "#ccc"}
}
}
},
{
"type": "symbol",
"from": {"data": "tree"},
"encode": {
"enter": {
"size": {"value": 100},
"stroke": {"value": "#fff"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {"scale": "color", "field": "depth"}
}
}
},
{
"type": "text",
"from": {"data": "tree"},
"encode": {
"enter": {
"text": {"field": "name"},
"fontSize": {"value": 9},
"baseline": {"value": "middle"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {"signal": "datum.children ? -7 : 7"},
"align": {"signal": "datum.children ? 'right' : 'left'"},
"opacity": {"signal": "labels ? 1 : 0"}
}
}
}
]
}
I recommend going and learning the Kibana Vega interaction, Vega spec and elasticsearch search api. This is too broad of a question, you are basically asking someone to do the work for you which is easily deducible from the the documentation.
https://www.elastic.co/guide/en/kibana/current/vega.html
https://vega.github.io/vega/docs/
https://www.elastic.co/guide/en/elasticsearch/reference/current/search-search.html
How can I aggregate on two filter terms (strings) or more based on values stored in the same value column?, at the moment I'm trying to make a dashboard warning lamp based on two alarm events e.g.
"door-tamper-1" and "door-tamper-2" and I can easily creat an alarm button for one as follows:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": {
"font": "Arial",
"fontSize": 15,
"text": "Door Tamper"
},
"height": 100,
"width": 100,
"padding": 20,
"autosize": "none",
"data": {
"name": "table",
"url": {
"%context%": true,
"%timefield%": "event_time",
"index": "event*",
"body": {
"aggs": {
"categories": {
"filter": {
"term": {"event_name.keyword": "door-tamper-1" }},
"aggs": {
"names": {
"terms": {
"field": "event_name.keyword"
}
}
}
}
}
},
"size": 0
},
"format": {"property": "aggregations.categories"}
},
"mark": "circle",
"encoding": {
"x": {"value": 31},
"y": {"value": 30},
"size": {"value": 2500},
"shape": {"value": "circle"},
"opacity": {"value": 1},
"stroke": {"value": "black"},
"strokeWidth": {"value": 5},
"fill": {
"condition": {"test": "datum.doc_count > 0",
"value": "red"},
"value": "green"
}
}
}
This lights a door tamper alarm red on a kibana dashboard monitored by guards when someone opens door one, but I need to do it for two doors in the same rooms, events door-tamper-1 and door-tamper-2, that is either or being tampered with.
I tried the following, but obviously it doesn't work, how would I go about this I have no clue...
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": {
"font": "Arial",
"fontSize": 15,
"text": "Occupied"
},
"height": 100,
"width": 100,
"padding": 20,
"autosize": "none",
"data": {
"name": "table",
"url": {
"%context%": true,
"%timefield%": "event_time",
"index": "event*",
"body": {
"aggs": {
"categories": {
"filter": {
"term": {"or": [{"event_name.keyword": "door-tamper-1"},{"event_name.keyword": "door-tamper-2" }]},
"aggs": {
"names": {
"terms": {
"field": "event_name.keyword"
}
}
}
}
}
},
"size": 0
},
"format": {"property": "aggregations.categories"}
},
"mark": "circle",
"encoding": {
"x": {"value": 31},
"y": {"value": 30},
"size": {"value": 2500},
"shape": {"value": "circle"},
"opacity": {"value": 1},
"stroke": {"value": "black"},
"strokeWidth": {"value": 5},
"fill": {
"condition": {"test": "datum.doc_count > 0",
"value": "red"},
"value": "green"
}
}
}
This does not work.
I want to have two typecharts in one visual.
Desired example
Current example, Editor
You can use 2 layers having bar chart instead of column. First layer will be a stacked layer in which filter is applied for used and free fields. Second layer can have the total field. Using xOffset you can position both the bar charts. Refer the code below or editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {"view": {"stroke": "transparent"}, "axis": {"domainWidth": 1}},
"width": 300,
"data": {
"values": [
{"branch": "V", "free": 300, "used": 800, "total": 1000},
{"branch": "K", "free": 100, "used": 400, "total": 500},
{"branch": "D", "free": 100, "used": 200, "total": 300}
]
},
"transform": [
{"calculate": "[ datum.used, datum.free, datum.total]", "as": "table"},
{"calculate": "['used', 'free', 'total']", "as": "headline"},
{"flatten": ["table", "headline"]},
{
"calculate": "datum.headline +':'+ datum.table + ' ('+round(datum.table *100/ datum.total)+'%)'",
"as": "tooltip"
}
],
"encoding": {
"y": {"aggregate": "sum", "field": "table", "axis": {"grid": false}},
"x": {
"field": "branch",
"axis": {"grid": false, "domain": false, "labelAngle": 0, "ticks": false},
"sort": {"op": "sum", "field": "table", "order": "descending"}
},
"tooltip": {"field": "tooltip", "type": "nominal"},
"color": {
"field": "headline",
"type": "nominal",
"scale": {"range": ["#409b66", "#878787", "#1b5c9e"]}
}
},
"layer": [
{
"transform": [
{"filter": {"field": "headline", "oneOf": ["used", "free"]}}
],
"mark": {"type": "bar", "width": 15, "xOffset": -10}
},
{
"mark": {"type": "bar", "width": 15, "xOffset": 8},
"encoding": {
"y": {"field": "total", "axis": {"grid": false}, "stack": false}
}
}
]
}
Good time of day!
formerly = Vega-lite heat map text properties
1)How to build a new X2-axis in this scheme, which takes into account the original X-axis
{"window": [{"op": "count", "field": "x", "as": "x2"}], "groupby": ["y"]}
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json",
"config": {"view": {"height": 300, "width": 400}},
"data": {
"values": [
{"x": "X1", "y": "Y1", "z": 1,"Name":"Name3"}
{"x": "X3", "y": "Y1", "z": 9,"Name":"Name2"}
{"x": "X3", "y": "Y1", "z": 25,"Name":"Name1"}
{"x": "X0", "y": "Y2", "z": 1,"Name":"Name1"}
{"x": "X1", "y": "Y2", "z": 2,"Name":"Name1"}
{"x": "X4", "y": "Y2", "z": 20,"Name":"Name1"}
{"x": "X5", "y": "Y2", "z": 40,"Name":"Name1"}
]
},
"transform": [
{"window": [{"op": "count", "field": "x", "as": "x2"}], "groupby": ["y"]}
{"window": [{"op": "count", "field": "Name", "as": "x7"}], "groupby": ["x","y"]}
{
"calculate": "'https://google.com/search?q='+datum.y",
"as": "web"
}
],
"encoding": {
"x": {"field": "x2", "type": "ordinal", "title": "X"},
"y": {"field": "y", "type": "ordinal", "title": "Y"}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "z",
"scale": {"scheme": "redyellowgreen"},
"type": "quantitative"
}
"tooltip": [
{"field": "x", "type": "ordinal", title: "text"}
{"field": "y", "type": "ordinal", title: "text1"}
{"field": "z", "type": "ordinal", title: "text2"}
]
"href": {"field": "web"}
}
},
{
"mark": {"type": "text", "fontSize": 10, "dy": -20},
"encoding": {
"text": {"field": "x"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "text", "fontSize": 20, "dy": 40},
"encoding": {
"text": {"field": "x7"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "text", "fontSize": 20, "dy": 20},
"encoding": {
"text": {"field": "z", "type": "quantitative"},
"color": {"value": "black"}
}
}
]
}
2)how to make clear color boundaries? like here:
I use it:
"color": {"aggregate": "average","field": "z", "type": "quantitative","format": ".0f", "scale": { "domain": [0,20,25,35],"range": ["#6ce165", "#E0ED15", "#ED9715", "#CE4334"]}}
3) how to add text here:
{
"mark": {"type": "text", "fontSize": 20, "dy": 40},
"encoding": {
"text": {"field": "x7"},+ Text????
"color": {"value": "black"}
}
},
Please only ask one question per post. I do not understand what you are asking in the first or third part of your question, so I will answer the second.
You can make the color scale discrete using a binned encoding:
"encoding": {
"color": {
"field": "z",
"scale": {"scheme": "redyellowgreen"},
"type": "ordinal",
"bin": true
}
}
Here is the result (Vega Editor):
I am trying to create a Vega visualisation using an external URL and I want to construct the URL dynamically using some filters as input to the visualisation. My current Vega code is this:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"data": {
"name": "table",
"url":"https://raw.githubusercontent.com/aryak93/vega/master/data.json"
},
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "isNaN(tooltip.amount)", "value": 0},
{"value": 1}
]
}
}
}
]
}
What I'm trying is to change the URL from "url":"https://raw.githubusercontent.com/aryak93/vega/master/data.json" to something like "url":"https://raw.githubusercontent.com/aryak93/vega/master/data.json?projectName={projectName}" and I am expecting the project name to be populated when a user sets the filter.
So far, I have struggled to find something relevant from the Vega and Vega lite documentations. Please let me know whether this'll be possible.