I was wondering if there was a way to keep a Vega-Lite schema local to a Gitlab project. Right now I've got my graph imbedded in code blocks inside of a .md file. And it works just fine.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with ranged data (aka Gantt Chart).",
"data": {
"values": [
{"task": "A", "start": 1, "end": 3},
{"task": "B", "start": 3, "end": 8},
{"task": "C", "start": 8, "end": 10}
]
},
"mark": "bar",
"encoding": {
"y": {"field": "task", "type": "ordinal"},
"x": {"field": "start", "type": "quantitative"},
"x2": {"field": "end"}
}
}
I was wondering if I was able to reference the schema in my project something like this...
"$schema": "./schema/vega-lite/v5.json"
Related
I'm trying to create a similar dashboard using VegaLite:
My example is in this link
Is there a way to configure the ranges in the dashboard and show it in a similar way as in the screenshot?
In need to devide the pie chart to two ranges:
0<=x<1
X>=1
You could use a binned transform or if you want just two discrete categories then a calculated field works just fine and can also be used in the legend.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with embedded data.",
"data": {
"values": [
{"username": "client1", "value": 4},
{"username": "client2", "value": 0.6},
{"username": "client3", "value": 0},
{"username": "client4", "value": 3},
{"username": "client5", "value": 7},
{"username": "client6", "value": 8}
]
},
"transform": [
{"calculate": "datum.value>=3?'>=3':'<3'" ,"as": "binned"}
]
,
"mark": "arc",
"encoding": {
"theta": {"field": "value", "type": "quantitative", "aggregate": "count" },
"color": {"field": "binned", "type": "nominal"}
}
}
So I am working with vega-lite-v4 (that's the version our businesses airtable extension uses) and the answer to my previous post was that I need to use the pivot transform
But any time I try and use it as it is explained in the v4 documentation (https://vega.github.io/vega-lite-v4/docs/pivot.html) it throws an error as if the pivoted field does not exist
I've used the following test data:
Airtable test data
With the following test code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Table 2",
"transform": [{
"pivot": "type",
"value": "calls",
"groupby": ["Month"]
}],
"mark": "bar",
"encoding": {
"x": {"field": "Month", "type": "nominal"},
"y": {"field": "Total", "type": "quantitative"}
}
}
And I still get the same error:
Total is not a valid transform name, inline data name, or field name from the Table 2 table:
"y": {
"field": "Total",
------------^
"type": "quantitative"
}
Even when I copy and paste the examples from the above documentation into the widget, it comes up with this error like pivot isn't making these fields
Can anyone help me figure out why this isn't working, or what to use instead?
EDIT:
So, a weird solution/workaround I found is to calculate the field as itself:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Table 2",
"transform": [{
"pivot": "type",
"value": "calls",
"groupby": ["Month"]
},
{"calculate" : "datum.Total", "as" : "newTotal"}
],
"mark": "bar",
"encoding": {
"x": {"field": "Month", "type": "nominal"},
"y": {"field": "newTotal", "type": "quantitative"}
}
}
This makes the graph behave completely as normal. I can use this for now, but it means I have to hard code each field name with a calculate transform, does this help anyone understand what's going on with this transform?
First of all, Vega and Vega-lite field names are case-sensitive, so "Month" is not the same as "month".
In your first code sample, "month" is incorrect and should be "Month":
"x": {"field": "month", "type": "nominal"},
but in the second code sample that was changed to "Month" which is correct:
"x": {"field": "Month", "type": "nominal"},
Try just correcting field name "Month" in the first code sample without calculating "newTotal":
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Table 2",
"transform": [{
"pivot": "type",
"value": "calls",
"groupby": ["Month"]
}],
"mark": "bar",
"encoding": {
"x": {"field": "Month", "type": "nominal"},
"y": {"field": "Total", "type": "quantitative"}
}
}
[EDIT: added following]
Here is a working example using your example data with pivot transform and rendered as bar chart by Vega-lite v5.2.0 with no errors.
Try using Vega-lite v5.2.0 instead of v4.
View in Vega on-line editor
I'm trying to build a visualization for histograms of numerical data using Vega Lite. Right now I am prototyping the visualization using a very simple mock dataset (Also available here):
{
"data": {
"fill": [
{"count": 30000, "level": "filled"},
{"count": 50000, "level": "missing"}
],
"histogram": [
{"bin_end": 20, "bin_start": 0, "count": 1000},
{"bin_end": 30, "bin_start": 20, "count": 20000}
]
},
"metadata": {}
}
The data format above is predetermined and unfortunately I am not able to change it as it comes from an API. I'm trying to plot the histogram section of the data to plot, well, an histogram, and the fill section of the data to plot a simple bar chart. Something like this:
I understand that I can use the "property" option to access nested data like this, as document in this section of Vega documentation, and this works as long as I am only plotting one of the charts, as shown by the examples below:
Example 1 in Vega Editor: Histogram only
Example 2 in Vega Editor: Barplot only
However, when I try to put both of them together it simply does not work. I get the weird chart below, where it seems that the data for the barplot is completely absent.
Link to vega editor for weird chart
And when inspecting the data using Vega Editor built in Data Viewer it seems that only the histogram data is being read.
Furthermore, this behavior seems to be order dependent, as switching the order of the charts in the HConcat block changes which chart gets messed up:
Inverted Chart
Am I missing something here? Is this some sort of limitation of Vegalite?
You're missing the name property so it looks like the data was simply overwritten by whatever was retrieved last. Here you go.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
"config": {"view": {"continuousHeight": 300, "continuousWidth": 400}},
"hconcat": [
{
"data": {"name": "a",
"format": {"type": "json", "property": "data.histogram"},
"url": "https://gist.githubusercontent.com/hemagso/f7b4381be43b34ece4d8aa78c936c7d5/raw/0bae0177b8a2a5d33e23c0d164d4439d248aa9ff/mock,json"
},
"encoding": {
"x": {
"bin": {"binned": true},
"field": "bin_start",
"scale": {"type": "linear"}
},
"x2": {"field": "bin_end"},
"y": {"field": "count", "type": "quantitative"}
},
"mark": "bar"
},
{
"data": {"name": "b",
"format": {"type": "json", "property": "data.fill"},
"url": "https://gist.githubusercontent.com/hemagso/f7b4381be43b34ece4d8aa78c936c7d5/raw/0bae0177b8a2a5d33e23c0d164d4439d248aa9ff/mock,json"
},
"encoding": {
"color": {"field": "level", "type": "nominal"},
"x": {"field": "level", "type": "nominal"},
"y": {"field": "count", "type": "quantitative"}
},
"mark": "bar"
}
]
}
Is it possible to create gauge charts or pointers over pie/donuts in vega lite. Can you guide me to suitable documentation of the same or help with some hints on how to achieve the same
You are probably looking for the documentation on circular/donut plots. In particular, you can do something like:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Proportion of donuts eaten.",
"data": {
"values": [
{"category": "Glazed", "value": 4},
{"category": "Cruller", "value": 6},
{"category": "Boston Creme", "value": 10},
{"category": "Sprinkles", "value": 3},
{"category": "Cronut", "value": 7}
]
},
"mark": {"type": "arc", "innerRadius": 50, "outerRadius": 80},
"encoding": {
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category", "type": "nominal", "title": "Type of donut"}
}
}
If you try that in the online editor, you'll get:
I'm fairly new to vega-lite. I'd really like to get the following interactive bar chart working:
Legend for the bar chart that can be clicked on to highlight one or more bars
Click on one or more bars to highlight and reflect that it legend
When highlighed, show text value above the bar.
My strategy for building this is to have two layers, one layer for the bars, and one for the text. Then one selection that is in 'multi' mode on mousedown, and also bound to the legend.
My question is two-fold:
Is it possible to have a selection bound to the legend but also utilize mousedown?
I'm having a hard time understanding how selections work in layered graphs/charts. If I define the selection outside of the layers I get a warning saying selection can't be found, and the selection only works as expected if I put it in the definition of the first layer. Additionally, the legend binding seems to work if I don't have layers, but stops working when I do have layers. Is this a limitation of the library or am I doing something wrong.
Here is my schema, thanks for any help in advance!
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"title": "test",
"data": {
"values": [
["Lateral", 630.666127],
["Basal", 413.211154],
["Accessory", 257.842981],
["Anterior", 48.735523],
["Central", 45.797799],
["Medial", 30.314856],
["Cortical", 27.697457],
["Corticoamygdaloid", 169.707268],
["Paralaminar", 46.216784],
["Whole_amygdala", 1670.189948]
],
"name": "data"
},
"width": "600",
"height": "400",
"encoding": {
"x": {"field": "0", "type": "nominal", "sort": "-y"},
"y": {"field": "1", "type": "quantitative"}
},
"layer": [
{
"mark": "bar",
"encoding": {
"color": {
"field": "0"
},
"opacity": {
"condition": {"selection": "series", "value": 1},
"value": 0.2
}
},
"selection": {
"series": {"type": "multi", "bind": "legend"}
}
},
{
"transform": [{"filter": {"selection":"series"}}],
"mark": {"type": "text", "dy": -5},
"encoding": {"text": {"field": "1"}}
}
]
}
You were quite close. When you bind a selection to a legend, by default it deactivates other ways of interacting. But as mentioned briefly in the Legend Binding docs, you can re-enable this by specifying the "on" attribute. Here is the result (Open in editor):
{
"title": "test",
"data": {
"values": [
["Lateral", 630.666127],
["Basal", 413.211154],
["Accessory", 257.842981],
["Anterior", 48.735523],
["Central", 45.797799],
["Medial", 30.314856],
["Cortical", 27.697457],
["Corticoamygdaloid", 169.707268],
["Paralaminar", 46.216784],
["Whole_amygdala", 1670.189948]
],
"name": "data"
},
"width": "600",
"height": "400",
"encoding": {
"x": {"field": "0", "type": "nominal", "sort": "-y"},
"y": {"field": "1", "type": "quantitative"}
},
"layer": [
{
"mark": "bar",
"encoding": {
"color": {"field": "0"},
"opacity": {
"condition": {"selection": "series", "value": 1},
"value": 0.2
}
},
"selection": {
"series": {
"type": "multi",
"encodings": ["color"],
"on": "click",
"bind": "legend"
}
}
},
{
"transform": [{"filter": {"selection": "series"}}],
"mark": {"type": "text", "dy": -5},
"encoding": {"text": {"field": "1"}}
}
]
}
Regarding your second question: currently selections must be defined within the layers they are bound to, but this will likely change in future Vega-Lite versions; see https://github.com/vega/vega-lite/pull/6919.