I am using Vega-lite to load a fairly big .csv file, so it usually take a while and nothing is displayed.
I am wondering if there is a way to know that vega-lite is currently loading, so I can embed a loading.gif to the plot before its loaded.
In this pie chart for example:
var PiChart = {
"width": 200,
"height": 200,
"description": "Donut chart with embedded data.",
"data": {"url": "tweets.csv"},
"mark": {"type": "arc", "innerRadius": 30},
"encoding": {
"theta": {"aggregate": "count", "field": "sentiment"},
"color": {
"field": "sentiment",
"type": "nominal",
"scale": {
"domain": ["VERY_NEGATIVE", "NEGATIVE", "NEUTRAL", "POSITIVE", "VERY_POSITIVE", "NOT_UNDERSTOOD"],
"range": ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600", "#c7c7c7"]
},
},
"tooltip": [{"aggregate":"count", "field": "sentiment", "type": "quantitative"}, {"field": "sentiment", "type": "ordinal"}]
},
"view": {"stroke": null}
};
Related
I had a Problem with a word cloud graphic in vega. It was showing the words properly, but I wanted it to show how many times a word was mentioned when hovering the mouse over it. I managed to do so, but the font is way too small, and I cant figure out how to change it whatsoever.
I've looked at the documentation and couldn't find anything related to font size inside tooltip or signal. For generating the cloud I have the following code:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"data": [
{
"name": "default",
"transform": [
{
"type": "formula", "as": "rotate",
"expr": "[0, 90][~~(datum.index % 2)]"
},
{
"type": "formula", "as": "weight",
"expr": "if(datum.index==0, 600, 400)"
},
{
"type": "wordcloud",
"size": [{"signal": "width"}, {"signal": "height"}],
"text": {"field": "$dimension0"},
"fontSize": {"field": "$metric0"},
"fontWeight": {"field": "weight"},
"fontSizeRange": [{"signal": "(width+height)/96"}, {"signal": "(width+height)/24"}],
"padding": {"value": 2},
"rotate": {"field": "rotate"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "default", "field": "$dimension0"},
"scheme": "datastudio20"
}
],
"marks": [
{
"type": "text",
"from": {"data": "default"},
"encode": {
"enter": {
"text": {"field": "$dimension0"},
"align": {"value": "center"},
"baseline": {"value": "alphabetic"},
"fill": {"scale": "color", "field": "$dimension0"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"angle": {"field": "angle"},
"fontSize": {"field": "fontSize"},
"fontWeight": {"field": "weight"},
"fillOpacity": {"value": 0.7}
},
"hover": {
"fillOpacity": {"value": 1},
"fontWeight": {"value": "bold"},
"fontSize": { "value": 40},
"tooltip": {
"signal": "datum.$metric0",
"fontweigth": { "value": "bold"}
}
}
}
}
]
}
The problem is, I couldnt generate a tooltip showing the number of occurences of each word. I've managed to show said number, but it is way too small to see, any way I can Increase the tootlip font size?
Here is the word-cloud
I think you'll need to amend the style sheet used. See here for the options.
https://github.com/vega/vega-tooltip/blob/HEAD/docs/APIs.md#options
I would like to have an interval selection in a Vega-lite in which other data is filtered in response to the selection, but only after the user releases the mouse. For instance, consider this example where the user can filter the dates in a time series plot by selecting a range on another chart. As the user drags the selection in the bottom chart the top chart filters in real-time. What I would like to do is instead have the top chart only filter once the user has updated the selection in the bottom chart and released the mouse button.
Try this. It seems a bit awkward to me but does what you ask.
Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/sp500.csv"},
"vconcat": [
{
"width": 480,
"mark": "area",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {"domain": {"param": "brush"}},
"axis": {"title": ""}
},
"y": {"field": "price", "type": "quantitative"}
}
},
{
"width": 480,
"height": 60,
"mark": "area",
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"encodings": ["x"],
"on": {
"type": "mousemove",
"between": [{"type": "mouseup"}, {"type": "mousedown"}]
}
}
}
],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {
"field": "price",
"type": "quantitative",
"axis": {"tickCount": 3, "grid": false}
}
}
}
]
}
Trying to replicate the example shown here:
https://observablehq.com/#mdeagen/vega-lite-table-using-text-marks#count
However, when I add the vegalite code to the online editor I get an error because of the following line of code:
{"filter": {"field": "row_num", "lte": count}},
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/penguins.json"
},
"transform": [
{"window": [{"op": "row_number", "as": "row_num"}]},
{"filter": {"field": "row_num", "lte": count}},
{"fold": ["Beak Length (mm)", "Beak Depth (mm)", "Flipper Length (mm)", "Body Mass (g)", "Species", "Island", "Sex"]}
],
"mark": "text",
"encoding": {
"y": {"field": "row_num", "type": "ordinal", "axis": null},
"text": {"field": "value", "type": "nominal"},
"x": {"field": "key", "type": "nominal", "axis": {"orient": "top", "labelAngle": 0, "title": null, "domain": false, "ticks": false}, "scale": {"padding": 15}}
}, "config": {"view": {"stroke": null}}
}
Does anyone know a simple fix for this.
Thanks.
I have a pie chart which I would like to convert to a half pie chart. I have tried different settings but I cannot get it to work. Is it possible?
You need a scale.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"mark": {"type": "arc", "radius2": 50},
"data": {"values": [{"type": "+", "value": 60}, {"type": "-", "value": 40}]},
"encoding": {
"theta": {
"field": "value",
"type": "quantitative",
"scale": {
"type": "linear",
"rangeMax": 1.5708,
"rangeMin": -1.5708
}
},
"color": {"field": "type", "type": "nominal"}
},
"config": {"legend": {"disable": true}}
}
I am a newbie to Vega-Lite and I am trying to replicate a chart similar to this
Following is my code and it does not generate what I need.
{
"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
"width":800,
"height":600,
"autosize":{
"type":"fit",
"contains":"padding"
},
"data":{
"url":"data/cars.json"
},
"mark":{
"type":"rect",
"tooltip":true,
"strokeWidth":0.1,
"stroke":"white"
},
"encoding":{
"x":{
"field":"Horsepower",
"type":"quantitative",
"bin":{
"maxbins":100
},
"axis":{
"labelAngle":0
}
},
"y":{
"aggregate":"count",
"field":"Horsepower",
"type":"quantitative"
}
}
}
Here is what it does
What do I need to do to be able to get my desired output? There is a question here already asked on the topic How to reproduce the Unsub histogram in Altair? but it was done in python altair, which I am not trying to do. I want to generate that using solely Vega-Lite.
Thank you in advance.
You can use a bin transform followed by a window transform to generate the fields required to create this kind of chart. For example (open in editor):
{
"data": {"url": "data/cars.json"},
"transform": [
{"bin": {"maxbins": 50}, "field": "Horsepower", "as": "Horsepower"},
{"window": [{"op": "count", "as": "index"}], "groupby": ["Horsepower"]}
],
"mark": {
"type": "rect",
"tooltip": true,
"strokeWidth": 0.3,
"stroke": "white"
},
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative", "bin": "binned"},
"x2": {"field": "Horsepower_end"},
"y": {
"field": "index",
"type": "ordinal",
"scale": {"reverse": true},
"title": "count"
}
},
"width": 400,
"height": 300
}