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
Related
I've been trying to edit my legend on a line chart to use different symbols for each field in the series. My output on the actual chart is showing correctly, where each series had a different symbol, but my legend duplicates the series, one showing the original shapes with the correct colors, the other showing the correct shapes with the wrong color (just black). Am I missing something about how these properties need to be combined so it's not duplicated? Thanks in advance for the help. Link to online editor
Doubled Legend Series Image
(also how do I get images to just show up in the post??)
Thanks,
Bryan
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/barley.json"},
"layer": [
{
"mark": {"type": "line", "tooltip": true, "interpolate": "linear"},
"encoding": {
"stroke": {"field": "site", "type": "nominal", "legend": null},
"opacity": {
"condition": {
"test": {"field": "__selected__", "equal": "false"},
"value": 0.3
},
"value": 1
}
}
},
{
"mark": {"type": "point"},
"encoding": {
"shape": {"field": "site", "type": "nominal"},
"color": {"field": "site", "type": "nominal"},
"opacity": {
"condition": {
"test": {"field": "__selected__", "equal": "false"},
"value": 0.3
},
"value": 1
}
}
}
],
"encoding": {
"y": {
"field": "variety",
"type": "nominal",
"axis": {"grid": true},
"sort": {
"op": "average",
"field": "All Except Difference",
"order": "descending"
}
},
"x": {
"field": "yield",
"type": "quantitative",
"sort": {
"op": "average",
"field": "All Except Difference",
"order": "descending"
},
"scale": {"zero": false}
}
}
}
Here's my wandb vega. The problem is, right now, it is very hard to mouse over my line and get the tooltip to show. It is like you must hover over the exact pixel of the line with your mouse. How do I make the activation radius larger, so my tooltip shows up if I am approximately on top of the point of my line?
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A plot for an arbitrary number of lines",
"data": {
"name": "wandb"
},
"transform": [
{"filter": {"field": "${field:lineVal}", "valid": true}},
{"filter": {"field": "${field:step}", "valid": true}}
],
"title": "${string:title}",
"layer": [
{
"selection": {
"grid": {
"type": "interval",
"bind": "scales"
}
},
"mark": {"type": "line", "strokeWidth": 5, "interpolate": "linear", "tooltip": true},
"encoding": {
"x":{
"field": "${field:step}",
"type": "quantitative",
"title": "${string:xname}"
},
"y": {
"field": "${field:lineVal}",
"title": "y",
"type": "quantitative"
},
"color": {
"type": "nominal",
"field": "${field:lineKey}"
},
"strokeDash": {
"type": "nominal",
"field": "name"
}
}
}
]
}
You haven't provided the data along with your schema so it is difficult to answer your specific case. However, you should be able to adapt the example code from https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html to achieve what you want.
I have a stacked normalized bar chart similar to this:
https://vega.github.io/editor/#/examples/vega-lite/stacked_bar_normalize
I'm trying to show the related percentages (per bar segment) as text on the bars similar to: https://gist.github.com/pratapvardhan/00800a4981d43a84efdba0c4cf8ee2e1
I tried adding a transform field to calculate the percentages, but still couldn't get it to work after hours of trying.
I'm lost help 🥺
My best try:
{
"description":
"A bar chart showing the US population distribution of age groups and gender in 2000.",
"data": {
"url": "data/population.json"
},
"transform": [
{"filter": "datum.year == 2000"},
{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"},
{
"stack": "people",
"offset": "normalize",
"as": ["v1", "v2"],
"groupby": ["age"],
"sort": [{"field": "gender", "order": "descending"}]
}
],
"encoding": {
"y": {
"field": "v1",
"type": "quantitative",
"title": "population"
},
"y2": {"field": "v2"},
"x": {
"field": "age",
"type": "ordinal"
},
"color": {
"field": "gender",
"type": "nominal",
"scale": {
"range": ["#675193", "#ca8861"]
}
}
},
"layer":[
{ "mark": "bar"},
{"mark": {"type": "text", "dx": 0, "dy": 0},
"encoding": {
"color":{"value":"black"},
"text": { "field": "v1", "type": "quantitative", "format": ".1f"}}
}
]
}
You can use a joinaggregate transform to normalize each group, and then use "format": ".1%" to display fractions as percents. Using this, there is no need to manually compute the stack transform; it is simpler to specify the stack via the encoding, as in the example you linked to.
Here is the result (open in editor):
{
"description": "A bar chart showing the US population distribution of age groups and gender in 2000.",
"data": {"url": "data/population.json"},
"transform": [
{"filter": "datum.year == 2000"},
{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"},
{
"joinaggregate": [{"op": "sum", "field": "people", "as": "total"}],
"groupby": ["age"]
},
{"calculate": "datum.people / datum.total", "as": "fraction"}
],
"encoding": {
"y": {
"aggregate": "sum",
"field": "people",
"title": "population",
"stack": "normalize"
},
"order": {"field": "gender", "sort": "descending"},
"x": {"field": "age", "type": "ordinal"},
"color": {
"field": "gender",
"type": "nominal",
"scale": {"range": ["#675193", "#ca8861"]}
}
},
"layer": [
{"mark": "bar"},
{
"mark": {"type": "text", "dx": 20, "dy": 0, "angle": 90},
"encoding": {
"color": {"value": "white"},
"text": {"field": "fraction", "type": "quantitative", "format": ".1%"}
}
}
]
}
I recently started tinkering with Vega-Lite templates to make a confusion matrix for an open-source data science software called DVC. You can see the template in my PR here, but I'll also repeat a simplified version below:
{
...
"data": {
"values": [
{"actual": "Wake", "predicted": "Wake", "rev": "HEAD"},
{"actual": "Wake", "predicted": "Deep", "rev": "HEAD"},
{"actual": "Light", "predicted": "Wake", "rev": "HEAD"},
{"actual": "REM", "predicted": "Light", "rev": "HEAD"},
....
],
},
"spec": {
"transform": [
{
"aggregate": [{"op": "count", "as": "xy_count"}],
"groupby": ["actual", "predicted"],
},
{
"joinaggregate": [
{"op": "max", "field": "xy_count", "as": "max_count"}
],
"groupby": [],
},
{
"calculate": "datum.xy_count / datum.max_count",
"as": "percent_of_max",
},
],
"encoding": {
"x": {"field": "predicted", "type": "nominal", "sort": "ascending"},
"y": {"field": "actual", "type": "nominal", "sort": "ascending"},
},
"layer": [
{
"mark": "rect",
"width": 300,
"height": 300,
"encoding": {
"color": {
"field": "xy_count",
"type": "quantitative",
"title": "",
"scale": {"domainMin": 0, "nice": True},
}
},
},
{
"mark": "text",
"encoding": {
"text": {
"field": "xy_count",
"type": "quantitative"
},
"color": {
"condition": {
"test": "datum.xy_count / datum.max_count > 0.5",
"value": "white"
},
"value": "black"
}
}
}
]
}
}
So, since I'm doing a groupby aggregation, it's possible for there to be cells in the confusion matrix with no entries. Here's an example output: link
How can I fill in these cells with "fallback" or something. I also looked at using pivot and impute, but couldn't quite figure it out. Help much appreciated :)
You can do this by adding two Impute transforms to the end of your sequence of transforms:
{"impute": "xy_count", "groupby": ["actual"], "key": "predicted", "keyvals": ["Deep", "Light", "Wake", "REM"], "value": 0},
{"impute": "xy_count", "groupby": ["predicted"], "key": "actual", "keyvals": ["Deep", "Light", "Wake", "REM"], "value": 0}
The keyvals specify which missing values you would like to be imputed on each axis; you can leave it out if at least one of the groups is present for each keyval.
I am trying to figure out how to not have my y-axis start at zero? It works in general for me, but if I add the color encoding (see below) it is not working anymore and instead I get to see the zero.
{
"data": {"name": "d"},
"mark": {"type": "bar"},
"encoding": {
"color": {"type": "nominal", "field": "group"},
"x": {"type": "nominal", "field": "model"},
"y": {
"type": "quantitative",
"field": "inf_f1",
"scale": {"zero": false}
}
},
"$schema": "https://vega.github.io/schema/vega-lite/v4.0.2.json",
"datasets": {
"d": [
{
"model": "lr-bow",
"inf_f1": 0.7991841662090597,
"group" : "A"
},
{
"model": "fcn-bow",
"inf_f1": 0.8220151833558302,
"group" : "B"
}
]
}
}
The reason the scale includes zero is that bars are stacked by default, and each bar has an implicit stacked zero-height bar for the group that does not appear, but does affect the automatically chosen axis limits. You can address this by setting stack to "none" in the y encoding (view in editor):
{
"data": {"name": "d"},
"mark": {"type": "bar"},
"encoding": {
"color": {"type": "nominal", "field": "group"},
"x": {"type": "nominal", "field": "model"},
"y": {
"type": "quantitative",
"field": "inf_f1",
"stack": "none",
"scale": {"zero": false}
}
},
"datasets": {
"d": [
{"model": "lr-bow", "inf_f1": 0.7991841662090597, "group": "A"},
{"model": "fcn-bow", "inf_f1": 0.8220151833558302, "group": "B"}
]
}
}