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"}
}
}
Related
Been sat down trying to work this out for ages:/ telling me that it cannot convert undefined or null object. Any help would be very much appreciated:( Am trying to show the volume of trade of these major indexes. Am using the vega documentation and using different templates but nothing seems to be working for the visualisation i want to show
{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "Trading volume of 5 major stock indexes from 2018-2022",
"subtitle":"Source: Yahoo Finance.",
"subtitleFontStyle":"italic",
"subtitleFontSize":10,
"anchor": "start",
"color": "black"
},
"description": "volume of stocks",
"data": {
"url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/graph1megasheet.csv",
"format": {"type": "csv"}
},
"height": 300,
"width": 300,
"mark": {"type": "area", "point": "false"},
"selection": {
"Stockname": {"type": "single", "fields": ["Stockname"], "bind": {"input": "select",
"options": [
"DAX",
"DOWJONES",
"FTSE100",
"NASDAQ",
"S&P500"
],
"name": "Select Index: "}
},
"encoding": {
"x": {
"field": "Date",
"type": "temporal",
"title": null,
"axis":{"grid":false}
},
"y": {
"field": "Volume",
"type": "quantitative",
"title": null,
"axis":{"grid":false}
},
"color": {
"field": "Stockname",
"type": "nominal",
"scale": {"scheme": "inferno"},
"title": null,
"legend": {
"orient": "bottom",
"columns":2,
"fillColor": "#FcFdFd"}
},
"opacity": {"condition": {"selection": "region", "value": 1}, "value": 0.1}
}
}}
Cannot convert undefined or null object errors will not be in your JSON schema that you shared. It would likely be a problem with the code referring to this schema. Either you are not actually getting the schema, or there is possibly a typo in the call.
You must have class with same properties as the JSON that you have.
For instance, if one property in you class has all characters with lowercase and JSON has the first char uppercase then it will be null.
I'm looking for a vega-lite configuration to show small multiples (using the facet operator row or column) with all other data points greyed out in the background.
Here is an example plot using the facet-operator:
facet plot
in vega-editor
"facet": {
"row": {
"field": "group",
"type": "nominal"
}
},
And here is an example using multiple charts with the concat operator and color channel to grey out other groups:
concat-plot
in vega-editor
"color": {"condition": {"test": "datum['group'] != 1", "value": "grey"}, "value": "red"}
I was wondering if there is a combination of transforms and repeat commands to achieve this for an unknown number of groups.
Here is one possible solution:
create an additional layer with new data
"facet": {"row": {"field": "group"}},
"spec": {
"layer": [
{
"data": {"name": "main"},
"mark": "circle",
"encoding": {
"y": {
"field": "y",
"type": "ordinal"
},
"x": {
"field": "x",
"type": "ordinal"
},
"color": {"value": "grey"}
},
"params": []
},
{
"mark": {"type": "circle", "opacity": 1, "color": "red"},
"encoding": {
"y": {
"field": "y",
"type": "ordinal"
},
"x": {
"field": "x",
"type": "ordinal"
}
}
}
]
}
full example in vega editor
how would i find out how many grouping will result from vega-lite? Sample use cases would be: say .. i want to derive that grouping information to maybe display a message that say "you have too many groupings" or figure out a better color scheme based on number of grouping.
sample vega-lite spec here:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4},
{"category": "b", "value": 6},
{"category": "c", "value": 10},
{"category": "d", "value": 3},
{"category": "e", "value": 7},
{"category": "f", "value": 8},{"category": "f", "value": 8}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal"}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}]
}
Assuming your question is "how can I calculate how many unique items are in the category field, you could use joinaggregate transform with the distinct operator to count.
// ... the rest of your spec
"transform": [
{
"joinaggregate": [{
"op": "distinct",
"field": "categories",
"as": "number_of_categories"
}]
}
In your example, the result would be to add a column number_of_categories with a value of 6 to every row in your table.
You can read more about joinaggregate here, and find all the available operators on the aggregate page.
I would like to have image marks surrounding my doughnut chart instead of texts. The example for image marks use x and y for its coordinate. How should I adjust that for a doughnut chart where we work with radius and theta?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4, "image": url},
{"category": "b", "value": 6, "image": url},
{"category": "c", "value": 10, "image": url},
{"category": "d", "value": 3, "image": url},
{"category": "e", "value": 7, "image": url},
{"category": "f", "value": 8, "image": url}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal", "legend": null}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}],
"view": {"stroke": null}
}
New vega version:
Open the Chart in the Vega Editor
After some trials and reading through the doc, it seems Image Mark cannot be positioned by theta encoding, but the example shows that x and y encodings are supported.
Therefore, I worked out this positioning via simple trigonometry and an extra layer to place the images in the doughnut:
{
"transform": [
{"joinaggregate": [{"op":"sum", "field": "value", "as": "total"}]},
{
"window": [{"op": "sum", "field": "value", "as": "cum"}],
"frame": [null, 0]
},
{"calculate": "cos(2*PI*(datum.cum-datum.value/2)/datum.total)", "as": "y"},
{"calculate": "sin(2*PI*(datum.cum-datum.value/2)/datum.total)", "as": "x"}
],
"mark": {"type": "image", "width": 20, "height": 20},
"encoding": {
"url": {"field": "image"},
"x": {"field": "x", "type": "quantitative", "scale": {"domain": [-2, 2]}, "axis": null},
"y": {"field": "y", "type": "quantitative", "scale": {"domain": [-2, 2]}, "axis": null}
}
}
Yet another Vega Editor
As the order is messed up by the color encoding mentioned in comments below, a new window transform is added to generate an extra ordering field which is provided to color field
Renewed Vega Editor
3 changes were made: (2021-07-16)
Using cos in the calculate of y
Using sin in the calculate of x
Messing up the data value to check if working
Old & Wrong Vega Editor
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: