Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Using Vega.json (not Vega-Lite) inside Altair to fill with new data.
See original GitHub issueDear all,
I have some old Vega.json that I want to use in Altair to refill it with new data. Now, I would like to know whether and if so how this is possible. From the docs, I understand that this is possible with Vega-Lite and Altair or with IPyVega. But I have not found an example with regular Vega and a Python Library. Could you help me with this?
Best,
Below the JSON
{
"signals": [
{"name": "fontsize_annotations", "value": 10},
{"name": "const___minBarWidth", "value": 24},
{"name": "const___compactBarWidth", "value": 28},
{"name": "const___boldBarWidth", "value": 36},
{"name": "const___maxBarWidth", "value": 44},
{"name": "const___maxBarGroupWidth", "value": 220},
{"name": "const___smallMargin", "value": 4},
{"name": "const___visColorDomain", "update": "[0,1,2,3,4,5,6,7,8,9,10,11]"},
{"name": "const___colorDomain", "update": "[0,1,2,3,4,5,6,7,8]"},
{
"name": "sue___computedHeight",
"update": "null",
"description": "the artificial height is calculated from vertical chart items or small multiple rows"
},
{"name": "sue___xValueColumn", "value": 0},
{"name": "sue___heightPerStep", "value": 0},
{"name": "sue___colorScale", "value": "cScale"},
{"name": "sue___colorField", "value": "cIndex"}
],
"data": [
{
"name": "original-data",
"values": [
[
"Datum",
"Wert",
"Kategorie",
"Beschreibung",
"DesktopOrder",
"MobileOrder"
],
["3/10/18", 17, "Aktuelle Attacke", "Kandahar", 1, 1],
["3/9/18", 12, "Vorherige Attacken", "Khwaja Ghar District", 2, 1],
["3/8/18", 24, "Vorherige Attacken", "Bala Buluk District", 3, 1],
["3/7/18", 25, "Vorherige Attacken", "Bala Buluk District", 4, 1],
["2/19/18", 24, "Vorherige Attacken", "Farah Province", 1, 1],
["2/10/18", 0, "Startdatum", "Startzeitpunkt", 1, 1]
]
},
{
"name": "list-table",
"source": "original-data",
"transform": [
{"type": "identifier", "as": "row"},
{"type": "filter", "expr": "datum.row > 1"},
{"type": "formula", "as": "xIndex", "expr": "datum.row - 1"},
{
"type": "formula",
"as": "extraValues",
"expr": "slice(data('original-data')[datum.xIndex], 3)"
},
{
"type": "project",
"fields": ["0", "1", "2", "3", "4", "5", "xIndex", "extraValues"],
"as": [
"xValue",
"yValue",
"cValue",
"info",
"desktoporder",
"mobileorder",
"xIndex"
]
}
]
},
{
"name": "table",
"source": "list-table",
"transform": [
{
"type": "formula",
"as": "yLegend",
"expr": "datum.yValue === 0 ? null : datum.yValue"
},
{"type": "extent", "field": "yLegend", "signal": "yLegendExtents"},
{"type": "formula", "as": "xValue", "expr": "toDate(datum.xValue)"},
{"type": "extent", "field": "xValue", "signal": "xExtents"},
{
"type": "formula",
"expr": "[{ xValue: datum.xValue, yLineVal: 0}, { xValue: datum.xValue, yLineVal:(datum.cValue === 'Startdatum' ? datum.desktoporder : datum.desktoporder) }]",
"as": "line"
}
]
}
],
"scales": [
{
"name": "colorTerror",
"type": "ordinal",
"domain": ["Aktuelle Attacke", "Vorherige Attacken"],
"range": ["#d64b47", "#656565"]
},
{
"name": "dashedTerror",
"type": "ordinal",
"domain": ["Aktuelle Attacke", "Vorherige Attacken"],
"range": ["[0,0]", "[1,1]"]
},
{
"name": "EventOrder",
"type": "linear",
"range": {"signal": "[height*0.8,height*0.3]"},
"domain": {"data": "table", "field": "desktoporder"},
"paddingInner": 0.12,
"paddingOuter": 0.2
},
{
"name": "xScale",
"type": "time",
"range": "width",
"domain": {"data": "table", "fields": ["xValue"]},
"round": true,
"nice": true
},
{
"name": "yScale",
"type": "band",
"range": "height",
"domain": {"data": "table", "field": "yValue"},
"paddingInner": 0.12,
"paddingOuter": 0.2
},
{
"name": "size",
"type": "linear",
"domain": {"data": "table", "fields": ["yValue"]},
"range": {"signal": "[0, fontsize_annotations*100]"}
}
],
"marks": [
{
"name": "line-group",
"type": "group",
"from": {
"facet": {"name": "lineFacet", "data": "table", "field": "line"}
},
"marks": [
{
"type": "line",
"from": {"data": "lineFacet"},
"style": ["dashedLine"],
"encode": {
"update": {
"y": {"scale": "EventOrder", "field": "yLineVal"},
"x": {"scale": "xScale", "field": "xValue"},
"stroke": {"signal": "parent.cValue==='Startdatum'?'':'black'"}
}
}
}
]
},
{
"type": "text",
"from": {"data": "table"},
"style": ["s-font-note"],
"encode": {
"enter": {
"x": {"scale": "xScale", "field": "xValue"},
"y": {"scale": "EventOrder", "field": "desktoporder"},
"dy": {"signal": "-fontsize_annotations*(1/3)"},
"dx": {"value": 0},
"angle": {"value": 0},
"text": {
"signal": "datum.cValue === 'Startdatum' ? '' : timeFormat(datum.xValue, '%d.%m.')+ ' '+datum.info+', '+ datum.yValue+' Tote'"
},
"fontSize": {"signal": "fontsize_annotations"}
}
}
},
{
"type": "symbol",
"from": {"data": "table"},
"encode": {
"update": {
"x": {"scale": "xScale", "field": "xValue"},
"y": {"signal": "(height*0.8)"},
"size": {"scale": "size", "field": "yValue"},
"shape": {"value": "circle"},
"opacity": {"value": 0.6},
"fill": {"scale": "colorTerror", "field": "cValue"},
"stroke": {"value": "#6e6e7e"},
"strokeWidth": {"value": 1},
"strokeDash": {
"signal": "datum.cValue === 'Aktuelle Attacke' ? [1,1] : [0,0]"
}
}
}
},
{
"type": "symbol",
"from": {"data": "table"},
"encode": {
"update": {
"x": {"scale": "xScale", "field": "xValue"},
"y": {"signal": "(height*0.8)"},
"size": {"signal": "fontsize_annotations"},
"shape": {"value": "circle"},
"opacity": {"value": 1},
"fill": {"scale": "colorTerror", "field": "cValue"},
"stroke": {"value": "#6e6e7e"},
"strokeWidth": {"value": 1},
"strokeDash": {
"signal": "datum.cValue === 'Aktuelle Attacke' ? [1,1] : [0,0]"
}
}
}
},
{
"type": "line",
"from": {"data": "table"},
"encode": {
"update": {
"x": {"scale": "xScale", "field": "xValue"},
"y": {"signal": "(height*0.8)"},
"size": {"scale": "size", "field": "yValue"},
"stroke": {"value": "#6e6e7e"},
"strokeWidth": {"value": 1}
}
}
}
],
"width": 800,
"height": 350,
"autosize": {"type": "fit", "contains": "padding"},
"legends": [
{
"title": "Zahl der Todesopfer",
"size": "size",
"orient": "top-left",
"offset": 0,
"padding": 0,
"values": [
{"signal": "yLegendExtents[1]"},
{"signal": "yLegendExtents[0]"}
],
"encode": {
"symbols": {
"update": {"shape": {"value": "circle"}, "opacity": {"value": 0.8}}
}
}
}
],
"config": {
"padding": 10,
"line": {"strokeWidth": 2, "strokeJoin": "round"},
"symbol": {"strokeWidth": 2, "strokeJoin": "round"},
"title": {
"anchor": "start",
"font": "nzz-serif",
"fill": "#05032d",
"fontSize": 24,
"fontWeight": 500,
"offset": 10
},
"text": {
"anchor": "start",
"font": "nzz-sans-serif",
"fill": "#05032d",
"fontSize": 13,
"fontWeight": 300
},
"axis": {
"bandPosition": 0,
"padding": 0.4,
"zero": false,
"domain": false,
"domainColor": "#92929e",
"domainWidth": 1,
"grid": true,
"gridColor": "#ececf0",
"gridDash": [],
"gridOpacity": 1,
"gridWidth": 1,
"labels": true,
"labelAngle": 0,
"labelBound": false,
"labelFlush": false,
"labelFlushOffset": false,
"labelFont": "nzz-sans-serif",
"labelFontWeight": 300,
"labelColor": "#6e6e7e",
"labelFontSize": 11,
"labelPadding": 8,
"labelOverlap": "greedy",
"ticks": true,
"tickExtra": false,
"tickOffset": 0,
"tickColor": "#6e6e7e",
"tickRound": true,
"tickSize": 4,
"tickWidth": 1,
"titleAngle": 0,
"titleColor": "#05032d",
"titleFont": "nzz-sans-serif",
"titleFontSize": 13,
"titleFontWeight": 300,
"titleLimit": 200,
"titlePadding": 0,
"titleX": 0,
"titleY": 0
},
"axisX": {"titleY": 30, "titleAlign": "right", "titleBaseline": "top"},
"axisY": {"titleY": -10, "titleAlign": "left", "titleBaseline": "bottom"},
"style": {
"prognosisLine": {"strokeDash": [6, 2], "strokeDashOffset": -2},
"dashedLine": {
"stroke": "#05032d",
"strokeDash": [1, 1],
"strokeWidth": 1
},
"verticalLine": {"fill": "#b6b6be", "width": 1, "zindex": 1, "y": 0},
"horizontalLine": {"fill": "#b6b6be", "height": 1, "zindex": 1, "x": 0},
"bar": {"fill": "#191D63"},
"s-font-title": {
"font": "nzz-serif",
"fill": "#05032d",
"fontSize": 24,
"fontWeight": 500,
"baseline": "top"
},
"s-font-note": {
"font": "nzz-sans-serif",
"fill": "#05032d",
"fontSize": 13,
"fontWeight": 300
},
"s-font-note--strong": {"fontWeight": 500},
"s-font-note-s--strong": {"fontWeight": 500},
"s-font-note--light": {"fill": "#6e6e7e"},
"s-font-note-s--light": {"fill": "#6e6e7e"},
"s-font-note--superlight": {"fill": "#b6b6be"},
"s-font-note-s--superlight": {"fill": "#b6b6be"},
"s-font-note-s": {
"font": "nzz-sans-serif",
"fill": "#05032d",
"fontSize": 11,
"fontWeight": 300
},
"s-font-text": {
"font": "nzz-serif",
"fill": "#05032d",
"fontSize": 18,
"fontWeight": 300
},
"s-font-text--strong": {
"font": "nzz-sans-serif",
"fill": "#05032d",
"fontSize": 17,
"fontWeight": 100
}
},
"range": {
"default": ["#05032d"],
"category": [
"#191D63",
"#D6B222",
"#656565",
"#E08B63",
"#2E6E71",
"#DD5B6C",
"#1EAFC7",
"#9A8700",
"#1F9877",
"#A3A189",
"#B37490",
"#B23C39"
],
"categoryLight": [
"#DCDDE7",
"#FDF4D1",
"#C7C7C7",
"#F7E2D9",
"#A3CFD1",
"#F5CED3",
"#CBECF2",
"#E7DA7C",
"#B5E1D5",
"#E7E7E0",
"#F0E3E9",
"#F5B8B7"
],
"categoryHighlightOne": [
"#191D63",
"#FDF4D1",
"#C7C7C7",
"#F7E2D9",
"#A3CFD1",
"#F5CED3",
"#CBECF2",
"#E7DA7C",
"#B5E1D5",
"#E7E7E0",
"#F0E3E9",
"#F5B8B7"
],
"categoryHighlightTwo": [
"#DCDDE7",
"#D6B222",
"#C7C7C7",
"#F7E2D9",
"#A3CFD1",
"#F5CED3",
"#CBECF2",
"#E7DA7C",
"#B5E1D5",
"#E7E7E0",
"#F0E3E9",
"#F5B8B7"
],
"categoryHighlightThree": [
"#DCDDE7",
"#FDF4D1",
"#656565",
"#F7E2D9",
"#A3CFD1",
"#F5CED3",
"#CBECF2",
"#E7DA7C",
"#B5E1D5",
"#E7E7E0",
"#F0E3E9",
"#F5B8B7"
],
"categoryHighlightFour": [
"#DCDDE7",
"#FDF4D1",
"#C7C7C7",
"#E08B63",
"#A3CFD1",
"#F5CED3",
"#CBECF2",
"#E7DA7C",
"#B5E1D5",
"#E7E7E0",
"#F0E3E9",
"#F5B8B7"
],
"categoryHighlightFive": [
"#DCDDE7",
"#FDF4D1",
"#C7C7C7",
"#F7E2D9",
"#2E6E71",
"#F5CED3",
"#CBECF2",
"#E7DA7C",
"#B5E1D5",
"#E7E7E0",
"#F0E3E9",
"#F5B8B7"
],
"categoryHighlightSix": [
"#DCDDE7",
"#FDF4D1",
"#C7C7C7",
"#F7E2D9",
"#A3CFD1",
"#DD5B6C",
"#CBECF2",
"#E7DA7C",
"#B5E1D5",
"#E7E7E0",
"#F0E3E9",
"#F5B8B7"
],
"categoryContrast": [
"#f0f0f2",
"#05032d",
"#f0f0f2",
"#05032d",
"#f0f0f2",
"#05032d",
"#05032d",
"#05032d",
"#05032d",
"#05032d",
"#05032d",
"#05032d"
],
"primaries": [
"#cacbee",
"#afb1e5",
"#9598dd",
"#6065cd",
"#2c32bd",
"#292fb3",
"#272ca9",
"#1d2284",
"#13175f"
],
"secondaries": [
"#eee8ca",
"#e5dbaf",
"#ddcf95",
"#cdb860",
"#bda12c",
"#b39829",
"#a99127",
"#84711d",
"#5f5013"
],
"grays": [
"#f0f0f2",
"#ececf0",
"#e9e9ee",
"#cfcfd6",
"#b6b6be",
"#92929e",
"#6e6e7e",
"#393855",
"#05032d"
],
"chParties": [
"#da467d",
"#c31906",
"#66a622",
"#22a682",
"#bda700",
"#d28b00",
"#d1cb00",
"#0084c7",
"#01b1c0",
"#8440a3",
"#ac5038",
"#716e48",
"#616161"
],
"zhParties": [
"#da467d",
"#c31906",
"#66a622",
"#22a682",
"#bda700",
"#d28b00",
"#0084c7",
"#01b1c0",
"#616161"
],
"binary": ["#5e6192", "#b23c39"]
}
}
}
Issue Analytics
- State:
- Created 4 years ago
- Comments:14 (6 by maintainers)
Top Results From Across the Web
Data | Vega-Lite
Vega-Lite's data property describes the visualization's data source as part of the specification, which can be either inline data ( values ) or...
Read more >Data - Vega & Vega-Lite
Use the format property to ensure the loaded data is correctly parsed. If the format property is not specified, the data is assumed...
Read more >Altair Internals: Understanding the Library
The Vega-Lite schema defines valid attributes and values that can appear within the specification of a Vega-Lite chart. With the JSON schema in...
Read more >Selection Parameters | Vega-Lite
Vega-Lite currently supports two selection types: "point" – to select multiple discrete data values; the first value is selected on click and additional...
Read more >Layering views | Vega-Lite
For a plot with either a discrete x-field or no x-field, width can be either a number indicating a fixed width or an...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Altair has support for rendering vega charts, but no support for building vega charts at a high level (Altair is built on Vega-Lite, not Vega).
To render a Vega chart, you can do something like the following. To adjust the chart, you’ll either have to adjust the input specification, or modify the dictionary output by
json.loads:The validation error indicates that your vega specification is either invalid or targeting a different version than the altair wrapper you are using.
For rendering, I’d suggest using Colab: it renders using the altair package directly, rather than relying on third-party notebook extensions or lab extensions that can become out of sync with your altair installation and lead to the types of errors you’re seeing above. I’m not certain exactly how to address the issue you’re seeing in JupyterLab/Jupyter Notebook, because Vega is not a well-supported use-case.