Related
I would like to create single visual showing multiple histograms on it. I have simple arrays of values, like so:
"data": {"values": {"foo": [0,0,0,1,1,1,2,2,2], "baz": [2,2,2,3,3,3,4,4,4]}}
I want to use different color bars to show the spread of values for "foo" and "baz". I am able to make a single histogram for "foo" like so:
{
"data": {"values": {"foo": [0,0,0,1,1,1,2,2,2]}},
"mark": "bar",
"transform": [{"flatten": ["foo"]}],
"encoding": {
"x": {"field": "foo", "type": "quantitative"},
"y": {"field": "foo", "type": "quantitative", "aggregate": "count"}
}
}
However, I cannot find the correct way to flatten out the arrays. This doesn't work:
{
"data": {"values": {"foo": [0,0,0,1,1,1,2,2,2], "bar": [0,0,0,1,1,1,2,2,2]}},
"mark": "bar",
"transform": [{"flatten": ["foo", "baz"]}],
"encoding": {
"x": {"field": "foo", "type": "quantitative"},
"y": {"field": "foo", "type": "quantitative", "aggregate": "count"}
},
"layer": [{
"mark": "bar",
"encoding": {
"y": {"field": "baz", "type": "quantitative", "aggregate": "count"}
}
}]
}
https://vega.github.io/editor/#/url/vega-lite/N4IgJghgLhIFygG4QDYFcCmBneoBmA9gfANoAMANJZQIwV10BMFzjAuhSAEYQBep1KvWFMWLNgF8JnALYQATgGt43BSE5R5EAHZZC8maXwpoUDNtIhCxTj36SOIcwGMCYAJbaA5rhAAPXzx3DBQwFWt1ECgATwAHDBUARzQdKHcYNMQE6RBowODQ8KJImPiklO00jPcsyIgvL3kML2gEuBBXNEqQKU4TaIx5IxA5JRUeIc4XN08fBFz8kLD2uxK4tpBk1PToGoTOesbm1pVO7qkJSSA
Inspecting data_0, there is are columns for foo and its counts, but nothing for baz.
This doesn't work, either:
{
"data": {
"values": {
"foo": [0, 0, 0, 1, 1, 1, 2, 2, 2],
"baz": [0, 0, 0, 1, 1, 1, 2, 2, 2]
}
},
"mark": "bar",
"transform": [{"flatten": ["foo"]},{"flatten": ["baz"]}],
"encoding": {
"x": {"field": "foo", "type": "quantitative"},
"y": {"field": "foo", "type": "quantitative", "aggregate": "count"}
},
"layer": [
{
"mark": "bar",
"encoding": {
"y": {"field": "baz", "type": "quantitative", "aggregate": "count"}
}
}
]
}
https://vega.github.io/editor/#/url/vega-lite/N4IgJghgLhIFygG4QDYFcCmBneoBmA9gfANoAMANJZQIwV10BMFzjAuhSAEYQBep1KvWFMWLNgF8JnALYQATgGt43BSE5R5EAHZZC8maXwpoUDNtIhCxSRWOnzlnv0kcQ5gMYEwAS20BzXBAADyC8HwwUMBVrdRAoAE8ABwwVAEc0HSgfGGzEVOkQBLCIqJiiOMSU9MztbNyffLiIf395DH9oVLgQLzQ6kClOEwSMeSMQOSUVHnHOT28-QIQiksjonudK5O6QDKyc6EbUzha2jq6VPoGpCUkgA
That still only gives columns for foo and its count, but now the count is 27 for each bucket!
How can I accomplish a multi-histogram graphic starting with array data?
You can do this using a flatten transform followed by a fold transform, and then use a color encoding to separate the two datasets. For example (open in editor):
{
"data": {
"values": {
"foo": [0, 0, 1, 1, 1, 1, 2, 2, 2],
"baz": [4, 4, 5, 5, 6, 6, 6, 6, 7]
}
},
"transform": [{"flatten": ["foo", "baz"]}, {"fold": ["foo", "baz"]}],
"mark": "bar",
"encoding": {
"x": {"field": "value", "type": "quantitative"},
"y": {
"field": "value",
"type": "quantitative",
"aggregate": "count",
"stack": null
},
"color": {"field": "key", "type": "nominal"}
}
}
As an aside, your layer approach also works if you put the encodings in separate layers, so that the outer foo aggregate doesn't clobber the baz data, but it's a bit more verbose than the approach based on fold:
{
"data": {
"values": {
"foo": [0, 0, 1, 1, 1, 1, 2, 2, 2],
"baz": [4, 4, 5, 5, 6, 6, 6, 6, 7]
}
},
"transform": [{"flatten": ["foo", "baz"]}],
"layer": [
{
"mark": {"type": "bar", "color": "orange"},
"encoding": {
"x": {"field": "foo", "type": "quantitative"},
"y": {"field": "foo", "type": "quantitative", "aggregate": "count"}
}
},
{
"mark": "bar",
"encoding": {
"x": {"field": "baz", "type": "quantitative"},
"y": {"field": "baz", "type": "quantitative", "aggregate": "count"}
}
}
]
}
I'm plotting the diff time series [1.1, 0.9, 1.2, ...].
And as the values are relative multipliers, the middle is 1 and not 0.
Is there a way to tell Vega Lite to start bar with 1?
So for the value 1.1 the bar will be start: 1, end: 1.1 and for 0.9 it will be start: 1, end: 0.9?
You can use a y2 encoding with datum set to 1. For example (vega editor):
{
"data": {
"values": [
{"x": "A", "y": 0.9},
{"x": "B", "y": 0.8},
{"x": "C", "y": 1.1},
{"x": "D", "y": 1.2},
{"x": "E", "y": 0.9},
{"x": "F", "y": 1.3}
]
},
"mark": "bar",
"encoding": {
"x": {"type": "nominal", "field": "x"},
"y": {
"type": "quantitative",
"field": "y",
"scale": {"domain": [0.6, 1.4]}
},
"y2": {"datum": 1}
}
}
I have data coming in from KEPServerEx with nested lists, so I need to CROSS APPLY to send individual values to my blob from the incoming stream. I had the query working for a few minutes utilizing this post (iterate nested list in json msg by cql stream analytics) but can no longer get a correct output.
A message looks like this:
[
{
"timestamp": 1575933997508,
"values": [
{
"id": "Channel1.Device1.RANDOM1",
"v": 5,
"q": 1,
"t": 1575933987573
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 196,
"q": 1,
"t": 1575933988076
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 56,
"q": 1,
"t": 1575933988570
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 104,
"q": 1,
"t": 1575933989077
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 24,
"q": 1,
"t": 1575933989567
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 177,
"q": 1,
"t": 1575933990069
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 168,
"q": 1,
"t": 1575933990575
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 113,
"q": 1,
"t": 1575933991067
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 189,
"q": 1,
"t": 1575933991572
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 96,
"q": 1,
"t": 1575933992075
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 15,
"q": 1,
"t": 1575933992567
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 179,
"q": 1,
"t": 1575933993074
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 22,
"q": 1,
"t": 1575933993569
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 98,
"q": 1,
"t": 1575933994073
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 9,
"q": 1,
"t": 1575933994575
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 142,
"q": 1,
"t": 1575933995071
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 54,
"q": 1,
"t": 1575933995576
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 174,
"q": 1,
"t": 1575933996070
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 188,
"q": 1,
"t": 1575933996567
},
{
"id": "Channel1.Device1.RANDOM1",
"v": 45,
"q": 1,
"t": 1575933997073
}
]
}
]
The query I used to successfully split the above message list of values into individual values is:
SELECT
event.timestamp as messageTS,
[values].ArrayValue.id,
[values].ArrayValue.v,
[values].ArrayValue.t as valueTS
FROM
brewingmqtt AS event
CROSS APPLY getarrayelements(event.eachvalue) AS [values]
Unfortunately, this is now giving me 0 rows return when performing a test and I cannot figure out what I am missing.
Why you set eachvalue in getArrayElements function? Your sample data indicates that it should be [values]. I tested the sql based on your sample data and it works for me.
SELECT
event.timestamp as messageTS,
[values].ArrayValue.id,
[values].ArrayValue.v,
[values].ArrayValue.t as valueTS
FROM
brewingmqtt AS event
CROSS APPLY getarrayelements(event.[values]) AS [values]
Output:
I am attempting to get a vertical filled area graph, where the area on the left between the y axis and the data line is filled. Essentially, take the normal area graph and rotate it 90 degrees clockwise.
I've basically just taken the example from the vega examples and tried to convert everything to vertical, changed the names of the scales to something more related to the data, and added a line width and colour.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 500,
"padding": 5,
"signals": [
{
"name": "interpolate",
"value": "linear",
"bind": {
"input": "select",
"options": [
"basis",
"cardinal",
"catmull-rom",
"linear",
"monotone",
"natural",
"step",
"step-after",
"step-before"
]
}
}
],
"data": [
{
"name": "table",
"values": [
{"u": 1, "v": 28}, {"u": 2, "v": 55},
{"u": 3, "v": 43}, {"u": 4, "v": 91},
{"u": 5, "v": 81}, {"u": 6, "v": 53},
{"u": 7, "v": 19}, {"u": 8, "v": 87},
{"u": 9, "v": 52}, {"u": 10, "v": 48},
{"u": 11, "v": 24}, {"u": 12, "v": 49},
{"u": 13, "v": 87}, {"u": 14, "v": 66},
{"u": 15, "v": 17}, {"u": 16, "v": 27},
{"u": 17, "v": 68}, {"u": 18, "v": 16},
{"u": 19, "v": 49}, {"u": 20, "v": 15}
]
}
],
"scales": [
{
"name": "uscale",
"type": "linear",
"range": "height",
"zero": false,
"domain": {"data": "table", "field": "u"}
},
{
"name": "vscale",
"type": "linear",
"range": "width",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "v"}
}
],
"axes": [
{"orient": "bottom", "scale": "vscale", "tickCount": 25},
{"orient": "left", "scale": "uscale"}
],
"marks": [
{
"type": "area",
"orient": "horizontal",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "vscale", "field": "v"},
"y": {"scale": "uscale", "field": "u"},
"x2": {"scale": "vscale", "value": 0},
"stroke": {"value": "#000000"},
"fill": {"value": "steelblue"}
},
"update": {
"interpolate": {"signal": "interpolate"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}
]
}
Pretty sure I'm doing something wrong here. According to the docs "vertical" orientation is the default, and I've tried this with x2 and y2, and orient "vertical" and "horizontal" for both - I've also tried to set the scale as vscale and uscale for x2 and y2.
I get no errors in the vega online editor - The line is correct but I would expect the graph to be filled to the left of the line between the y axis and the graph line. The actual output right now is just a solid line.
The orient property has to go into the encode block.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 500,
"padding": 5,
"signals": [
{
"name": "interpolate",
"value": "linear",
"bind": {
"input": "select",
"options": [
"basis",
"cardinal",
"catmull-rom",
"linear",
"monotone",
"natural",
"step",
"step-after",
"step-before"
]
}
}
],
"data": [
{
"name": "table",
"values": [
{"u": 1, "v": 28}, {"u": 2, "v": 55},
{"u": 3, "v": 43}, {"u": 4, "v": 91},
{"u": 5, "v": 81}, {"u": 6, "v": 53},
{"u": 7, "v": 19}, {"u": 8, "v": 87},
{"u": 9, "v": 52}, {"u": 10, "v": 48},
{"u": 11, "v": 24}, {"u": 12, "v": 49},
{"u": 13, "v": 87}, {"u": 14, "v": 66},
{"u": 15, "v": 17}, {"u": 16, "v": 27},
{"u": 17, "v": 68}, {"u": 18, "v": 16},
{"u": 19, "v": 49}, {"u": 20, "v": 15}
]
}
],
"scales": [
{
"name": "uscale",
"type": "linear",
"range": "height",
"zero": false,
"domain": {"data": "table", "field": "u"}
},
{
"name": "vscale",
"type": "linear",
"range": "width",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "v"}
}
],
"axes": [
{"orient": "bottom", "scale": "vscale", "tickCount": 25},
{"orient": "left", "scale": "uscale"}
],
"marks": [
{
"type": "area",
"from": {"data": "table"},
"encode": {
"enter": {
"orient": {"value": "horizontal"},
"x": {"scale": "vscale", "field": "v"},
"y": {"scale": "uscale", "field": "u"},
"x2": {"scale": "vscale", "value": 0},
"stroke": {"value": "#000000"},
"fill": {"value": "steelblue"}
},
"update": {
"interpolate": {"signal": "interpolate"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}
]
}
In a graph I'm making using Vega Lite, I'm seeing ticks at 0.5 steps, even though the data will only include integer values. Is there a way to set this in Vega Lite? I tried looking for something like "minimum tick step", or something similar in the docs, but I couldn't find anything like that.
There are a couple ways to do this, depending on what your situation is. For example, consider this chart:
{
"data": {
"values": [
{"x": 1, "y": 1},
{"x": 2, "y": 3},
{"x": 3, "y": 4},
{"x": 4, "y": 2}
]
},
"mark": "point",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"type": "quantitative", "field": "y"}
},
"width": 400
}
If all of your values are integers and you only care about integers, it might be that your data are better represented by ordinal values (i.e. ordered categorical data). If so, you can remove the ticks by specifying an ordinal type:
{
"data": {
"values": [
{"x": 1, "y": 1},
{"x": 2, "y": 3},
{"x": 3, "y": 4},
{"x": 4, "y": 2}
]
},
"mark": "point",
"encoding": {
"x": {"type": "ordinal", "field": "x"},
"y": {"type": "quantitative", "field": "y"}
},
"width": 400
}
If you want your data to be represented as quantitative, but just want to adjust the tick spacing, you can use the axis.tickMinStep property:
{
"data": {
"values": [
{"x": 1, "y": 1},
{"x": 2, "y": 3},
{"x": 3, "y": 4},
{"x": 4, "y": 2}
]
},
"mark": "point",
"encoding": {
"x": {"type": "quantitative", "field": "x", "axis": {"tickMinStep": 1}},
"y": {"type": "quantitative", "field": "y"}
},
"width": 400
}