I'm trying to get rid of the right side of the box of a chart in Vega-Lite. I assume I can just set the color to white once I figure out what it's called. It's not the domain or the grid, what is it? For bonus points, what do I need to do to make it go away? Thanks.
The line which you have highlighted is called stroke, you will find it in view config as it is a part of your chart view and provide the value as white or transparent.
Refer the below snippet or editor reference:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Google's stock price over time.",
"data": {"url": "data/stocks.csv"},
"transform": [{"filter": "datum.symbol==='GOOG'"}],
"mark": "line",
"config": {"view": {"stroke": "transparent"}},
"encoding": {
"x": {"field": "date", "type": "temporal", "axis": {"grid": false}},
"y": {"field": "price", "type": "quantitative", "axis": {"domain": false}}
}
}
Related
I'm new to WebStorm and vega/vegalite and I am working on creating a visual with different types of gasoline and their prices from 1996-2020.
I've been able to create a graph with all of the information, but it's pretty hard to discern anything.
I've been going over the Vega-Lite documentation and I see that that I can use tooltips to zoom into the graphic. I tried implementing it, but I don't think I quite understand the scope of some of the properties.
Could someone show me how they might approach this task? Or perhaps even recommend videos or websites that might help me better understand how to do?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Area charts of stock prices, with an interactive overview and filtered detail views.",
"width": 720,
"height": 480,
"padding": 5,
"data": {
"name": "gas_prices",
"url": "data/testInfo.csv",
"format": {"type": "csv", "parse": {"A1": "number", "date": "date"}}
},
"repeat": {
"layer": ["A1","A2","A3","R1","R2","R3","M1","M2","M3","P1","P2","P3","D1"]
},
"spec": {
"mark": "line",
"encoding": {
"x": {
"timeUnit": "yearmonth",
"title": "Date",
"field": "date"
},
"y": {
"field": {"repeat":"layer"},
"title": "Gas Prices",
"type": "quantitative"
},
"color": {
"datum": {"repeat": "layer"},
"type": "nominal"
}
}
}
}
You can refer the documentation for tooltip, which says about the options available to enable tooltips on your chart.
Below is a sample config having default tooltip or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"repeat": ["Horsepower", "Miles_per_Gallon", "Acceleration", "Displacement"],
"columns": 2,
"spec": {
"data": {"url": "data/cars.json"},
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {"field": {"repeat": "repeat"}, "bin": true},
"y": {"aggregate": "count"},
"color": {"field": "Origin"}
}
}
}
To have tooltips with some customizations, you can refer below code or editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"repeat": ["Horsepower", "Miles_per_Gallon", "Acceleration", "Displacement"],
"columns": 2,
"spec": {
"data": {"url": "data/cars.json"},
"mark": "bar",
"encoding": {
"tooltip": [
{"aggregate": "count", "title": "YAxis"},
{"field": {"repeat": "repeat"}, "title": "myXAxis"}
],
"x": {"field": {"repeat": "repeat"}, "bin": true},
"y": {"aggregate": "count"},
"color": {"field": "Origin"}
}
}
}
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 creating a custom visualization in Vega for Kibana. It should display vertical stacked bars and their values in numbers.
The "y" axis is the doc count and the "x" axis a time scale.
I'm not familiar with Vega and I first tried to display numbers on simple bars. I copy/pasted, tweeked some parameters and had this version :
"marks": [
{
"type": "group",
"marks": [
{
"type": "rect",
"name": "bars",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xbars", "field": "key"},
"width": {"scale": "xbars", "band": 1},
"y": {"scale": "yscale", "field": "doc_count"},
"y2": {"scale": "yscale", "value": 0}
}
}
},
{
"type": "text",
"from": {"data": "bars"},
"align": "center",
"encode": {
"enter": {
"y": {"field": "y", "offset": -5},
"x": {"field": "x", "offset": 0},
"text": {"field": "datum.doc_count"}
}
}
}
]
}
]
The result displays simple bars, numbers, the time format is good.
I used a "y"and a "y2" to be able to display both bars and text, but I can't add anymore "y" axis ("y3", "y4"...).
Idon't even know if it's possible to do what I want.
It want the chart to look like this example but with numbers :
https://vega.github.io/vega/examples/stacked-bar-chart/
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"}
}
}