For some reason my tooltips are rounded to the nearest integer?
Any help is appreciated.
Here is the link to chart in the VL editor (version 3.0.0-rc14).
(vega editor link)
{
"width": 300,
"height": 300,
"config": {
"title": {"fontSize": 15},
"numberFormat": ".0f",
"style": {
"bar": {"size": 20},
"guide-title": {"value": "asdf", "fontSize": 15},
"guide-label": {"fontSize": 15}
},
"scale": {"bandPaddingInner": 0.5, "bandPaddingOuter": 0.5},
"legend": {"symbolSize": 100, "titleFontSize": 15, "labelFontSize": 15},
"axis": {"titleFontSize": 15, "labelFontSize": 15, "labelLimit": 1000}
},
"data": {"name": "data-dba50c8bae540866b10e6763560b8ec9"},
"mark": "circle",
"encoding": {
"tooltip": [
{"type": "quantitative", "field": "expressiveness"},
{"type": "quantitative", "field": "customization"}
],
"x": {"type": "quantitative", "field": "expressiveness"},
"y": {"type": "quantitative", "field": "customization"}
},
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"datasets": {
"data-dba50c8bae540866b10e6763560b8ec9": [
{"library": "A", "expressiveness": 0, "customization": 1},
{"library": "B", "expressiveness": 0.4, "customization": 0.7},
{"library": "C", "expressiveness": 1, "customization": 0.7},
{"library": "D", "expressiveness": 0.6, "customization": 0.7},
{"library": "E", "expressiveness": 0, "customization": 1}
]
}
}
Because you set "numberFormat": ".0f" in the config, and that's applied to the tooltip too.
Related
I am trying to add text label to bar chart, but it not showing it. Here is a example i want to achieve
Here is code
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "background": "#EFF1EF", "width": 500, "height": 26, "autosize":"pad", "data": { "values": [ { "standarts": { "divisions": [ { "a": { "mean": 135, "part1": 10, "part2": 60, "part5": 130,
"part7": 198, "part9": 255, "goal": { "value": 150 } } } ] } } ] }, "transform": [ {"calculate": "datum.standarts.divisions", "as": "D"}, {"flatten": ["D"]}, {"calculate": "datum.D.a", "as": "x"} ], "encoding": { "x": {"field": "x", "type": "quantitative","scale":{"domain":[0,300]},
"stack": null}, "opacity": {"value": 1} }, "layer": [ { "mark":{"type":"bar", "color" : "#b2b7b4", "cornerRadius": 40}, "encoding": {"x": {}} }, { "mark": {"type": "bar", "color": "#0ef9e5", "height": 25}, "encoding": {"x": {"field": "x.mean"}} }, { "mark":{"type":
"text", "align":"center"}, "encoding": {"text": {"field": "x.mean"}} }, { "mark":{"type": "rule"}, "encoding": {"x": {"field":"x.goal.value", "title":["Target"],"axis":{ "titleFont": "Google Sans", "titleFontSize": 16, "titleFontWeight":700, "titleY":
8} }}} ], "config": { "axis": {"ticks": false, "labels": false, "domain": false}, "rule": { "strokeWidth": 4, "strokeDash": [ 0.2, 8 ], "strokeCap": "round", "align":"center" } } }
this is code
And link to editor
vega-lite editor
text part is still not working.
I used documentation on vega-lite website and example codes, but still no success.
Thanks for the help.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"background": "#EFF1EF",
"width": 500,
"height": 26,
"autosize": "pad",
"data": {
"values": [
{
"standarts": {
"divisions": [
{
"a": {
"mean": 135,
"part1": 10,
"part2": 60,
"part5": 130,
"part7": 198,
"part9": 255,
"goal": {"value": 150}
}
}
]
}
}
]
},
"transform": [
{"calculate": "datum.standarts.divisions", "as": "D"},
{"flatten": ["D"]},
{"calculate": "datum.D.a", "as": "x"}
],
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"scale": {"domain": [0, 300]},
"stack": null
},
"opacity": {"value": 1}
},
"layer": [
{
"mark": {"type": "bar", "color": "#b2b7b4", "cornerRadius": 40},
"encoding": {"x": {}}
},
{
"mark": {"type": "bar", "color": "#0ef9e5", "height": 25},
"encoding": {"x": {"field": "x.mean"}}
},
{
"mark": {"type": "text", "align": "right", "dx": -10},
"encoding": {"text": {"field": "x.mean"}, "x": {"field": "x.mean"}}
},
{
"mark": {"type": "text", "align": "center", "dy": -30},
"encoding": {
"text": {"field": "x.goal.value"},
"x": {"field": "x.goal.value"}
}
},
{
"mark": {"type": "rule"},
"encoding": {
"x": {
"field": "x.goal.value",
"title": ["Target"],
"axis": {
"titleFont": "Google Sans",
"titleFontSize": 16,
"titleFontWeight": 700,
"titleY": 8
}
}
}
}
],
"config": {
"axis": {"ticks": false, "labels": false, "domain": false},
"rule": {
"strokeWidth": 4,
"strokeDash": [0.2, 8],
"strokeCap": "round",
"align": "center"
}
}
}
I am trying to create a VegaLite chart with labelled highlighted areas which are specified in a separate dataset using [min_x, max_x] coordinates.
I've managed to highlight the area itself using a rect mark, but I'm struggling to properly position the label at the top edge of the chart.
This is the end result I'm trying to achieve. In this example I'm using the dy property of the text mark to position the label. Unfortunately this only works when the chart height is known in advance, which doesn't work for my use case.
If there is a better way to achieve the result I want, please let me know. This is the Vegalite specification for the chart above, without previously mentioned dy property:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"datasets": {
"test_data": [
{"x": 0, "y": 1.5},
{"x": 5, "y": 2},
{"x": 9, "y": 4},
{"x": 14, "y": 0}
],
"highlight_data": [
{"from_x": 2.3, "to_x": 3, "label": "AAA"},
{"from_x": 6.3, "to_x": 8, "label": "BBB"}
]
},
"data": {"name": "test_data"},
"layer": [
{
"data": {"name": "highlight_data"},
"transform": [
{"calculate": "(datum.from_x + datum.to_x) / 2", "as": "mean_x"}
],
"layer": [
{
"mark": {"type": "rect", "opacity": 0.3},
"encoding": {
"x": {"field": "from_x", "type": "quantitative"},
"x2": {"field": "to_x"},
"color": {"value": "#fcfc00"}
}
},
{
"mark": {"type": "text"},
"encoding": {
"text": {"field": "label"},
"x": {"field": "mean_x", "type": "quantitative"}
}
}
]
},
{
"mark": {"type": "line"},
"encoding": {
"x": {"field": "x", "type": "quantitative", "title": "X Label"},
"y": {"field": "y", "type": "quantitative", "title": "Y Label"}
}
}
],
"title": "Title",
"width": 800,
"height": 500
}
You can reference height inside an expression to make it dynamic.
"dy": { "expr": "-height + (height/2) -10"}
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"datasets": {
"test_data": [
{"x": 0, "y": 1.5},
{"x": 5, "y": 2},
{"x": 9, "y": 4},
{"x": 14, "y": 0}
],
"highlight_data": [
{"from_x": 2.3, "to_x": 3, "label": "AAA"},
{"from_x": 6.3, "to_x": 8, "label": "BBB"}
]
},
"data": {"name": "test_data"},
"layer": [
{
"data": {"name": "highlight_data"},
"transform": [
{"calculate": "(datum.from_x + datum.to_x) / 2", "as": "mean_x"}
],
"layer": [
{
"mark": {"type": "rect", "opacity": 0.3},
"encoding": {
"x": {"field": "from_x", "type": "quantitative"},
"x2": {"field": "to_x"},
"color": {"value": "#fcfc00"}
}
},
{
"mark": {"type": "text", "dy": { "expr": "-height + (height/2) -10"}},
"encoding": {
"text": {"field": "label"},
"x": {"field": "mean_x", "type": "quantitative"}
}
}
]
},
{
"mark": {"type": "line"},
"encoding": {
"x": {"field": "x", "type": "quantitative", "title": "X Label"},
"y": {"field": "y", "type": "quantitative", "title": "Y Label"}
}
}
],
"title": "Title",
"width": 800,
"height": 500
}
I played with stacked bar charts and wanted to create the Spanish flag with Vega Lite.
I specified the stripes height and color in the data but don't manage to sort the individual stacks:
I set the scale to null, so that the color is taken from the specified field.
I encoded the position of the stripe in the pos attribute, and want to sort the segements by that.
I've also tried to slightly vary the color of the red stripes, but that didn't help.
Spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Fun with Flags",
"data": {
"values": [
{"h": 5, "color": "#aa151b", "pos": 6, "country": "spain"},
{"h": 5, "color": "#f1bf00", "pos": 4, "country": "spain"},
{"h": 5, "color": "#aa152b", "pos": 2, "country": "spain"}
]
},
"width": {"step": 300},
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "country", "type": "nominal"},
"y": {"field": "h", "type": "quantitative"},
"color": {
"field": "color",
"scale": null,
"type": "nominal",
"sort": {"field": "pos", "op": "min", "order": "descending"}
}
}
}
Here's a link to the Vega Editor with the Spec.
Instead of sorting the color encoding, I had to specify the order channel, as described in the docs.
This gives me the following spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Fun with Flags",
"data": {
"values": [
{"h": 5, "color": "#aa152b", "pos": 6, "country": "spain"},
{"h": 5, "color": "#f1bf00", "pos": 4, "country": "spain"},
{"h": 5, "color": "#aa152b", "pos": 2, "country": "spain"}
]
},
"width": {"step": 300},
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "country", "type": "nominal"},
"y": {"field": "h", "type": "quantitative"},
"color": {
"field": "color",
"scale": null,
"type": "nominal"
},
"order": {
"field": "pos",
"type": "quantitative"
}
}
}
And correct Spanish flag:
Link to Vega Editor
I have the following minimal data:
[
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 1000, "bar": 60, "goo": 20}
]
Which I plot using VEGA-LITE:
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega#5.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#3.3.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#4.2.0"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"Title": "Insights stats",
"description": "Overview of insights stats",
"width": 1000,
"height": 450,
"data": {
"url": "./data.json"
},
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": "Date"
},
"y": {
"field": "foo",
"type": "quantitative",
"title": "Some Foo"
}
}
},
{
"mark": {
"type": "line",
"stroke": "firebrick"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "bar",
"type": "quantitative",
"title": null,
"scale": { "domain": [0, 100] }
}
}
},
{
"mark": {
"type": "line",
"stroke": "red"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "goo",
"type": "quantitative",
"title": "Ratio (%)",
"scale": { "domain": [0, 100] }
}
}
}
],
"resolve": { "scale": { "y": "independent" } }
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
I fail to have a proper legend for each line. What am I missing?
Vega-Lite will generate a legend for a chart if there is an encoding that warrants it, such as color, shape, etc.
In the case of plotting multiple columns, a useful pattern is to use the Fold Transform in order to specify your colors via an encoding rather than by manual layering. The result looks something like this (vega editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"title": "Insights stats",
"description": "Overview of insights stats",
"width": 1000,
"height": 450,
"data": {
"values": [
{"date": "2019-01-01", "foo": 10, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 1, "bar": 60, "goo": 20}
]
},
"transform": [
{"fold": ["foo", "bar", "goo"]}
],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal"}
}
}
(This is a follow up on this question)
Assume my data looks like:
[
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 20000, "bar": 60, "goo": 20}
]
And my plot is:
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "Stock prices of 5 Tech Companies over Time.",
"width": 1200,
"height": 450,
"data": { "url": "data.json" },
"mark": {
"type": "line",
"point": true
},
"transform": [
{ "fold": ["foo", "bar", "goo"] }
],
"encoding": {
"x": { "field": "date", "type": "temporal" },
"y": { "field": "value", "type": "quantitative" },
"color": { "field": "key", "type": "nominal" },
"scale": {"zero": false}
},
"resolve": { "scale": { "y": "independent" } }
}
As you can see, due to the different order of magnitude of foo and the other two columns, the plot is not helpful. How can I have a secondary y-axis and (mention it in the legend)?
You can do that by combining layering with the fold transform. Here is how you might modify your example (vega editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": 1200,
"height": 450,
"data": {
"values": [
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 20000, "bar": 60, "goo": 20}
]
},
"transform": [{"fold": ["foo", "bar", "goo"]}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal"}
},
"layer": [
{
"mark": {"type": "line", "point": true},
"transform": [{"filter": "datum.key == 'foo'"}]
},
{
"mark": {"type": "line", "point": true},
"transform": [{"filter": "datum.key != 'foo'"}]
}
],
"resolve": {"scale": {"y": "independent"}}
}
You could then go on to modify the axis titles by specifying the y encoding & title within each layer. Here is an example (vega editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": 1200,
"height": 450,
"data": {
"values": [
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 20000, "bar": 60, "goo": 20}
]
},
"transform": [{"fold": ["foo", "bar", "goo"]}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"color": {"field": "key", "type": "nominal"}
},
"layer": [
{
"mark": {"type": "line", "point": true},
"encoding": {
"y": {"field": "value", "type": "quantitative", "title": "Foo Value"}
},
"transform": [{"filter": "datum.key == 'foo'"}]
},
{
"mark": {"type": "line", "point": true},
"encoding": {
"y": {
"field": "value",
"type": "quantitative",
"title": "Bar/Goo Value"
}
},
"transform": [{"filter": "datum.key != 'foo'"}]
}
],
"resolve": {"scale": {"y": "independent"}}
}