Related
i really like the look of the vega Word Clouds:
https://vega.github.io/vega/examples/word-cloud/
I'm currently using the spec from the link as follows in colab:
spec = "insert spec here"
#Option one:
from altair import vega
vega.renderers.enable('colab')
vega.Vega(spec)
#Option two:
import panel as pn
from vega import Vega
pn.extension('vega')
pn.pane.Vega(spec)
But actually i want to make faceted wordclouds with vega. I currently load my data as json from my github account which is also slightly annoying, but i found no way to reference python variables in the vega spec.
Does anyone maybe have a hint, how i could layout the vega wordcloud in a grid by groups specified in my data? My json has this structure: [{"text":text,"group":group}], drawing the wordclouds from this works, but not the faceting by the group field. I know vega-lite can do faceting, but it can't draw the beautiful wordcloud it seems.
Thanks for any help!
Here is a working example of Vega spec using facet with your data.
For illustration only, the formula field for angle places words with larger field size in horizontal position.
View in Vega online editor
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A word cloud visualization depicting Vega research paper abstracts.",
"title": "A Wordcloud",
"width": 400,
"height": 400,
"padding": 10,
"background": "ghostwhite",
"layout": {
"bounds": "flush",
"columns": 2,
"padding": 10
},
"data": [
{
"name": "table",
"url": "https://raw.githubusercontent.com/nyanxo/vega_facet_wordcloud/main/split.json",
"transform": [
{
"type": "formula",
"as": "angle",
"expr": "datum.size >= 3 ? 0 : [-45,-30, -15, 0, 15, 30, 45][floor(random() * 7)]"
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "text_split"},
"range": ["#d5a928", "#652c90", "#939597"]
}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"name": "facet",
"data": "table",
"groupby": "group"
}
},
"title": {
"text": {"signal": "parent.group"},
"frame": "group"
},
"encode": {
"update": {
"width": {"signal": "width"},
"height": {"signal": "height"}
}
},
"marks": [
{
"type": "rect",
"encode": {
"enter": {
"x": {"value": 0},
"width": {"signal": "width" },
"y": {"value": 0},
"height": {"signal": "height"},
"fill": {"value": "beige"}
}
}
},
{
"type": "text",
"from": {"data": "facet"},
"encode": {
"enter": {
"text": {"field": "text_split"},
"align": {"value": "center"},
"baseline": {"value": "alphabetic"},
"fill": {"scale": "color", "field": "text_split"}
},
"update": {"fillOpacity": {"value": 1}},
"hover": {"fillOpacity": {"value": 0.5}}
},
"transform": [
{
"type": "wordcloud",
"size": {"signal": "[width, height]"},
"text": {"field": "text_split"},
"rotate": {"field": "datum.angle"},
"font": "Helvetica Neue, Arial",
"fontSize": {"field": "datum.size"},
"fontSizeRange": [12, 28],
"padding": 2
}
]
}
]
}
]
}
You can't facet a word cloud as it requires a CountPattern transform which will destroy any faceting field you try to use. Instead you will need to provide a separate data object for each word cloud you want and then concatenate them together.
Edit
Link
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A word cloud visualization depicting Vega research paper abstracts.",
"title": "A Wordcloud",
"width": 420,
"height": 400,
"padding": 0,
"data": [
{
"name": "table",
"url": "https://raw.githubusercontent.com/nyanxo/vega_facet_wordcloud/main/split.json"
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "text_split"},
"range": ["#d5a928", "#652c90", "#939597"]
}
],
"layout": {"padding": 20, "columns": 2, "bounds": "full", "align": "all"},
"marks": [
{
"name": "cell",
"type": "group",
"style": "cell",
"from": {
"facet": {"name": "facet", "data": "table", "groupby": ["group"]}
},
"encode": {
"update": {"width": {"signal": "400"}, "height": {"signal": "400"}}
},
"marks": [
{
"type": "text",
"from": {"data": "facet"},
"encode": {
"enter": {
"text": {"field": "text_split"},
"align": {"value": "center"},
"baseline": {"value": "alphabetic"},
"fill": {"scale": "color", "field": "text_split"}
},
"update": {"fillOpacity": {"value": 1}},
"hover": {"fillOpacity": {"value": 0.5}}
},
"transform": [
{
"type": "wordcloud",
"size": [400, 400],
"text": {"field": "text_split"},
"font": "Helvetica Neue, Arial",
"fontSizeRange": [12, 56],
"padding": 2
}
]
}
]
}
]
}
This is a follow up from a previous question for which I built a test case in a (hopefully now public) notebook and noticed the following behavior:
At the end of the notebook, in the section bugs you will notice that y-axis of the max_precipitation of the layered chart using is clamped to 10.
I tried changing the domain but the bars do not go above 10.
Here the code example in vega-lite's editor reproduced below:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Top Months by Mean Precipitation",
"data": {"url": "data/seattle-weather.csv"},
"transform": [
{"timeUnit": "month", "field": "date", "as": "month_date"},
{
"aggregate": [
{"op": "mean", "field": "precipitation", "as": "mean_precipitation"},
{"op": "max", "field": "precipitation", "as": "max_precipitation"}
],
"groupby": ["month_date"]
},
{
"window": [{"op": "row_number", "as": "rank"}],
"sort": [{"field": "mean_precipitation", "order": "descending"}]
}
],
"encoding": {
"x": {
"field": "month_date",
"type": "ordinal",
"timeUnit": "month",
"title": "month (descending by max precip)",
"sort": {
"field": "max_precipitation",
"op": "average",
"order": "descending"
}
}
},
"layer": [
{
"mark": {"type": "bar"},
"encoding": {
"y": {
"field": "max_precipitation",
"type": "quantitative",
"title": "precipitation (mean & max)"
}
}
},
{
"mark": "tick",
"encoding": {
"y": {"field": "mean_precipitation", "type": "quantitative"},
"color": {"value": "red"},
"size": {"value": 15}
}
}
]
}
Please help me understand what I am doing wrong?
It appears that the precipitation column is being parsed as strings rather than as numbers. You can specify the parsing format for the column using :
"data": {
"url": "data/seattle-weather.csv",
"format": {"parse": {"precipitation": "number"}}
},
The result is here:
I'm trying to plot something like a trail mark but where I can map the line colour instead of the line size. Is that possible? So far I haven't been able to achieve it.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Google's stock price over time.",
"data": {"url": "data/stocks.csv"},
"transform": [
{"filter": "datum.symbol==='GOOG'"},
{"calculate": "datum.price>400", "as": "good"}
],
"mark": "trail",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"size": {"field": "good", "type": "nominal"}
}
}
This is when using size with a trail mark.
This if I map to color.
Lines cannot be multiple colors in Vega-Lite, but you can use a color encoding along with an impute transform to change the color of different sections of the line (vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Google's stock price over time.",
"data": {"url": "data/stocks.csv"},
"transform": [
{"filter": "datum.symbol==='GOOG'"},
{"calculate": "datum.price>400", "as": "good"}
],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative", "impute": {"value": null}},
"color": {"field": "good", "type": "nominal"}
}
}
Unfortunately this leaves breaks in the line; you can get around this by creating a background layer like this (vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Google's stock price over time.",
"data": {"url": "data/stocks.csv"},
"transform": [
{"filter": "datum.symbol==='GOOG'"},
{"calculate": "datum.price>400", "as": "good"}
],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative", "impute": {"value": null}}
},
"layer": [
{"mark": "line"},
{
"mark": "line",
"encoding": {"color": {"field": "good", "type": "nominal"}}
}
]
}
Edit: if you're using Altair, the equivalent would be something like this:
import altair as alt
from vega_datasets import data
alt.layer(
alt.Chart().mark_line(),
alt.Chart().mark_line().encode(color='good:N'),
data=data.stocks.url
).transform_filter(
'datum.symbol==="GOOG"',
).transform_calculate(
good="datum.price>400"
).encode(
x='date:T',
y=alt.Y('price:Q', impute={'value': None})
)
I'm trying to code a little chart for use in risk/opportunity analysis. You feed in 4 values:
PreConsequence & PostConsequence (int's ranging -4 to +4)
PreLikelihood & PostLikelihood (int's ranging 0 to 4)
And it visualises those with charts as follows:
The shaded fill renders the Pre values, whilst the stroke renders the Post values.
Geometry in the left quadrant represents risk and should be red, whilst geometry in the right quadrant represents opportunity and should be green.
I'm struggling to find out how to check for negative consequence values and assign colour accordingly. I think it'll be done in the last two lines of my code below:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 250,
"data": [
{
"name": "table",
"values": [
{"C": -4, "L": 0, "f":"Pre"}, {"C": 0, "L": 4, "f":"Pre"},
{"C": 0, "L": 2, "f":"Post"}, {"C": -1, "L": 0, "f":"Post"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "linear",
"range": "width",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "C"},
"domainMax": 4,
"domainMin": -4
},
{
"name": "yscale",
"type": "linear",
"range": "height",
"domain": {"data": "table", "field": "L"},
"domainMax": 4,
"domainMin": 0
},
{
"name": "color",
"type": "ordinal",
"range":"ordinal",
"domain": {"data": "table", "field": "f"}
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "tickCount": 10 },
{"orient": "left", "scale": "yscale", "tickCount": 5, "offset": -250 }
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "f"
}
},
"marks": [
{
"type": "area",
"from": {"data": "series"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "C" },
"y": {"scale": "yscale", "field": "L"},
"y2": {"scale": "yscale", "value": 0 },
"fillOpacity": [{ "test": "indata('series', 'f', 'Pre')", "value": 0.3 }, {"value": 0}],
"strokeWidth": [{ "test": "indata('series', 'f', 'Pre')", "value": 0 }, {"value": 2}],
"fill": [{ "test": "indata('series', 'f', 'Pre')", "value": "red" }, {"value": "red"}],
"stroke": [{ "test": "indata('series', 'f', 'Pre')", "value": "red" }, {"value": "red"}]
}
}
}
]
}
]
}
Can anyone give me some pointers as to how to test the data values & set fill & stroke colours accordingly?
Thanks
Vega signals can be used to conditionally paint colors based on data values.
In the given vega spec, changing the fill property like this should do what you are expecting if data has Positive quadrant C values also.
"fill": { "signal": "datum.C > 0 ? 'green': 'red'"},
Vega Editor link here
I've an overlay color change based on filter condition in a multi line chart. Got it working with single line here but 'red' overlay line(along with red dot) doesn't come up with this above multi-line example. Could anyone help me out?
Short answer: your chart is working, except the filtered values are not colored red.
The core issue is that encodings always supersede mark properties, as you can see in this simpler example: editor link
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "A scatterplot showing horsepower and miles per gallons.",
"data": {"url": "data/cars.json"},
"mark": {"type": "point", "color": "red"},
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {"field": "Origin", "type": "nominal"},
"shape": {"field": "Origin", "type": "nominal"}
}
}
Notice that although we specify that the mark should have color red, this is overridden by the color encoding. This is by design within Vega-Lite, because encodings are more specific than properties.
Back to your chart: because you specify the color encoding in the parent chart, each individual layer inherits that color encoding, and those colors override the "color": "red" that you specify in the individual layers.
To make it do what you want, you can move the color encoding into the individual layers (and use a detail encoding to ensure the data are still grouped by that field). For example (editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {...},
"width": 1000,
"height": 200,
"autosize": {"type": "pad", "resize": true},
"transform": [
{
"window": [{"op": "rank", "as": "rank"}],
"sort": [{"field": "dateTime", "order": "descending"}]
},
{"filter": "datum.rank <= 100"}
],
"layer": [
{
"mark": {"type": "line"},
"encoding": {
"color": {
"field": "name",
"type": "nominal",
"legend": {"title": "Type"}
}
}
},
{
"mark": {"type": "line", "color": "red"},
"transform": [
{
"as": "count",
"calculate": "if(datum.anomaly == true, datum.count, null)"
},
{"calculate": "true", "as": "baseline"}
]
},
{
"mark": {"type": "circle", "color": "red"},
"transform": [
{"filter": "datum.anomaly == true"},
{"calculate": "true", "as": "baseline"}
]
}
],
"encoding": {
"x": {
"field": "dateTime",
"type": "temporal",
"timeUnit": "hoursminutesseconds",
"sort": {"field": "dateTime", "op": "count", "order": "descending"},
"axis": {"title": "Time", "grid": false}
},
"y": {
"field": "count",
"type": "quantitative",
"axis": {"title": "Count", "grid": false}
},
"detail": {"field": "name", "type": "nominal"}
}
}