Vega - Simple Text Table
2,225 views
Skip to first unread message
Gretchen Krenn
Dec 13, 2017, 7:26:13 PM12/13/17
to vega-js
Hi,
We are using Vega to create dynamic charts from Sci-Kit learn results. Most results return a 1D or 2D array, what's getting me is some results return a single key and value.
Example:
[
"label": 'nSampleSeen', "value": '572",
"label": 'nComponents', "value": '3",
"label": 'Noise Variance', "value": '0.17"
]
This array is returned as values and passed to data, the values are too varied to chart so the solution was to put them in a printed text table. Iv'e tried several ways to get the text to line up
nSampleSeen: 572
nComponents: 3
Noise Variance: 0.17
Any suggestion as to how to group the label/value text marks to they print as above? Clearly, in the block below the values print over themselves because they do not have defined coordinates, wonder the best way to do this (mark group, signals)? I'm fairly new to Vega but this might be so obvious that I'm missing the "duh" moment. Any help would be amazing. Thanks!
const vega = {
‘$schema’: ’https://vega.github.io/schema/vega/v3.0.json',
‘title’: {
‘text’: stat.name,
‘font’: ‘Lato’,
‘offset’: 10,
‘fontSize’: 8
},
‘width’: 185,
‘height’: 250,
‘padding’: 0,
‘autosize’: { ‘type’: ‘fit’, ‘resize’: true },
‘data’: [
{
‘name’: ‘table’,
‘values’: values,
}
],
‘marks’: [
{
‘type’: ‘text’,
‘from’: {
‘data’: ‘table’
},
‘encode’: {
‘enter’: {
‘align’: {
‘value’: ‘center’
},
‘text’: {
‘field’: ‘value’
},
‘font’: {
‘value’: ‘Lato’
},
‘fontSize’: {
‘value’: 10
},
}
}
}
]
};
return vega;
Roy I
Dec 14, 2017, 10:33:32 AM12/14/17
to vega-js
Vega (v3.0.8) does not have built-in support to display data in tabular format.
In general, try using javascript to generate html <table> markup for better control over the layout and style of the tabular data. An alternative is to use a javascript library such as DataTables:
Here is an example "hack" using "stack" transform in Vega v3 to display the data as you described. Note that this approach is limited to displaying data that will fit within the plot area (i.e., no scrollbars for long list of values).
Vega spec (v3.0.8)
-------------------
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"config": {
"title": {
"offset": 20,
"fontSize": 16
}
},
"title": {
"text": "Test Data"
},
"background": "beige",
"width": 200,
"height": 300,
"padding": 10,
"autosize": { "type": "pad"},
"data": [
{
"name": "table",
"values": [
{"label": "nSampleSeen", "value": "572"},
{"label": "nComponents", "value": "3"},
{"label": "Noise Variance", "value": "0.17"}
],
"transform": [
{ "type": "formula",
"as": "x_position",
"expr": "width * 2 / 3"
},
{ "type": "formula",
"as": "line_height",
"expr": "20"
},
{
"type": "stack",
"groupby": ["x_position"],
"field": "line_height",
"as": ["y0", "y1"]
}
]
}
],
"marks": [
{
"type": "text",
"from": {
"data": "table"
},
"encode": {
"enter": {
"x": {"field": "x_position"},
"y": {"field": "y0"},
"y2": {"field": "y1"},
"align": {
"value": "right"
},
"text": {
"signal": "datum['label'] + ':' "
},
"font": {
"value": "Verdana"
},
"fontSize": {
"value": 12
}
}
}
},
{
"type": "text",
"from": {
"data": "table"
},
"encode": {
"enter": {
"x": {"field": "x_position", "offset": 5},
"y": {"field": "y0"},
"y2": {"field": "y1"},
"align": {
"value": "left"
},
"text": {
"field": "value"
},
"font": {
"value": "Courier"
},
"fontSize": {
"value": 16
}
}
}
}
]
}
Message has been deleted
Gretchen Krenn
Dec 14, 2017, 1:57:16 PM12/14/17
to vega-js
Thank you a million times! This is exactly what I needed. These one-off results will never have more than 1-3 values and since all other data is going through our VegaFactory it will keep everything unified.
Thank you again!
Amit Kapoor
Jan 6, 2018, 6:01:45 AM1/6/18
to vega-js
Another option is to use datalib https://github.com/vega/datalib to output the data to the console in formatted format. It would requiring data out out of vega.view and piping into datalib.
Dominik Moritz
Jan 6, 2018, 10:46:18 AM1/6/18
to Amit Kapoor, vega-js
Browser consoles have formatted output for JSON. 'console.table()'. It's super useful for debugging.
On Sat, Jan 6, 2018, 12:01 Amit Kapoor <amit...@gmail.com> wrote:
Another option is to use datalib https://github.com/vega/datalib to output the data to the console in formatted format. It would requiring data out out of vega.view and piping into datalib.
--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Gretchen Krenn
Jan 8, 2018, 1:49:47 PM1/8/18
to vega-js
Thanks everyone for the feedback! @Amit I'll check out datalib. @Roy your post was super helpful but as I gave it more thought I went back and rewrote the single outputs with typescript appending the HTML. I needed more flexibility in adding classes.
Thanks again everyone!
Reply all
Reply to author
Forward
0 new messages