vega-lite
Referring to Nested JSON Data in Vega-Lite
I am trying to reach data in json file but I am getting error : "[Error] Unrecognized signal name: "P"". I tried to use fold and flatten functions but can't overcome this error. It looks like flatten field is not recognized.
Any ideas why this might happen?
Here is my code:
`{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"params": [
{
"name": "chart_title",
"value": " Weekly A Distribution"
},
{
"name": "titleAxisXname",
"value": "Weekly A Minutes "
},
{
"name": "tick_Count_X",
"value": 7
}
],
"width": 425,
"height": 135,
"padding": 20,
"title": {
"text": {
"expr": "chart_title"
},
"fontSize": 16,
"color": "#56615F",
"fontWeight": 700,
"font": "Google Sans",
"align": "right",
"dx": 40,
"dy": -10
},
"data": {
"values":[
{
"customer": "Customer",
"type": "monthly",
"period": "2022-10",
"schema": "1.0.0",
"metrics": {
"filters": {
"age": [
"all",
"18-39",
"40-64",
"65+"
],
"gender": [
"all",
"male",
"female"
]
},
"partitions": [
{
"segment": {
"age": "*",
"gender": "*"
},
"count": 10000,
"a": {
"mean": 135,
"p10": 10,
"p25": 60,
"p50": 130,
"p75": 198,
"p90": 255,
"goal": {
"value": 150,
"p": 0.37
},
"distribution": {
"min": 0,
"max": 300,
"step": 10,
"data": [
0.01,
0.01,
0.02,
0.03,
0.05,
0.08,
0.13,
0.21,
0.28,
0.31,
0.33,
0.3,
0.28,
0.26,
0.24,
0.22,
0.21,
0.2,
0.19,
0.18,
0.17,
0.16,
0.15,
0.14,
0.13,
0.12,
0.11,
0.1,
0.09,
0.08
]
}
}
}
]
}
}]
},
"transform": [
{"calculate": "datum.metrics.partitions", "as": "P"},
{"flatten": ["P"]},
{"calculate": "P.a.distribution.data", "as": "data"},
{"flatten": ["data"], "as": ["d"]},
{"calculate": "d", "as": "y"},
{"calculate": "P.a.distribution.max/10" ,"as": "x"}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "x",
"type": "quantitative"
},
"y": {
"field": "y",
"type": "quantitative"
}
}
},
{
"data": {
"values": [
{}
]
},
"encoding": {
"x": {
"datum": 65
}
},
"layer": [
{
"mark": {
"type": "rule"
}
},
{
"mark": {
"type": "text",
"text": [
"25th",
"Percentile"
]
}
}
]
},
{
"encoding": {
"x": {
"datum": 130
}
},
"layer": [
{
"mark": {
"type": "rule",
"color": "#594CB8"
}
},
{
"mark": {
"type": "text",
"text": [
"50th",
"Percentile"
],
"color": "#594CB8"
}
}
]
},
{
"encoding": {
"x": {
"datum": 200
}
},
"layer": [
{
"mark": {
"type": "rule",
"color": "#B4539E"
}
},
{
"mark": {
"type": "text",
"text": [
"75th",
"Percentile"
],
"color": "#B4539E"
}
}
]
}
],
"config": {
"background": "#eff1ef",
"axisX": {
"title": {
"expr": "titleAxisXname"
},
"tickCount": {
"expr": "tick_Count_X"
},
"titlePadding": 20,
"titleFont": "Google Sans",
"titleColor": "#56615F",
"titleFontSize": 12,
"titleFontWeight": 700,
"labelFontSize": 12,
"labelColor": "#56615F",
"labelFontWeight": 400
},
"axisY": {
"orient": "right",
"tickCount": 3,
"format": "%",
"title": null,
"labelFontSize": 12,
"labelColor": "#56615F",
"labelFontWeight": 400,
"labelPadding": 10
},
"line": {
"point": false,
"interpolate": "cardinal",
"color": "#006A62"
},
"text": {
"font": "Google Sans",
"fontSize": 12,
"color": "#001D33",
"fontWeight": 700,
"dx": 15,
"dy": -105
},
"rule": {
"strokeWidth": 5,
"strokeDash": [
0.5,
16
],
"strokeCap": "round"
}
}
}`
Please advise what i am doing wrong? How to overcome this error Thank you
Solution
You're missing datum from your references.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"params": [
{"name": "chart_title", "value": " Weekly A Distribution"},
{"name": "titleAxisXname", "value": "Weekly A Minutes "},
{"name": "tick_Count_X", "value": 7}
],
"width": 425,
"height": 135,
"padding": 20,
"title": {
"text": {"expr": "chart_title"},
"fontSize": 16,
"color": "#56615F",
"fontWeight": 700,
"font": "Google Sans",
"align": "right",
"dx": 40,
"dy": -10
},
"data": {
"values": [
{
"customer": "Customer",
"type": "monthly",
"period": "2022-10",
"schema": "1.0.0",
"metrics": {
"filters": {
"age": ["all", "18-39", "40-64", "65+"],
"gender": ["all", "male", "female"]
},
"partitions": [
{
"segment": {"age": "*", "gender": "*"},
"count": 10000,
"a": {
"mean": 135,
"p10": 10,
"p25": 60,
"p50": 130,
"p75": 198,
"p90": 255,
"goal": {"value": 150, "p": 0.37},
"distribution": {
"min": 0,
"max": 300,
"step": 10,
"data": [
0.01,
0.01,
0.02,
0.03,
0.05,
0.08,
0.13,
0.21,
0.28,
0.31,
0.33,
0.3,
0.28,
0.26,
0.24,
0.22,
0.21,
0.2,
0.19,
0.18,
0.17,
0.16,
0.15,
0.14,
0.13,
0.12,
0.11,
0.1,
0.09,
0.08
]
}
}
}
]
}
}
]
},
"transform": [
{"calculate": "datum.metrics.partitions", "as": "P"},
{"flatten": ["P"]},
{"calculate": "datum.P.a.distribution.data", "as": "data"},
{"flatten": ["data"], "as": ["d"]},
{"calculate": "datum.d", "as": "y"},
{"calculate": "datum.P.a.distribution.max/10", "as": "x"}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
},
{
"data": {"values": [{}]},
"encoding": {"x": {"datum": 65}},
"layer": [
{"mark": {"type": "rule"}},
{"mark": {"type": "text", "text": ["25th", "Percentile"]}}
]
},
{
"encoding": {"x": {"datum": 130}},
"layer": [
{"mark": {"type": "rule", "color": "#594CB8"}},
{
"mark": {
"type": "text",
"text": ["50th", "Percentile"],
"color": "#594CB8"
}
}
]
},
{
"encoding": {"x": {"datum": 200}},
"layer": [
{"mark": {"type": "rule", "color": "#B4539E"}},
{
"mark": {
"type": "text",
"text": ["75th", "Percentile"],
"color": "#B4539E"
}
}
]
}
],
"config": {
"background": "#eff1ef",
"axisX": {
"title": {"expr": "titleAxisXname"},
"tickCount": {"expr": "tick_Count_X"},
"titlePadding": 20,
"titleFont": "Google Sans",
"titleColor": "#56615F",
"titleFontSize": 12,
"titleFontWeight": 700,
"labelFontSize": 12,
"labelColor": "#56615F",
"labelFontWeight": 400
},
"axisY": {
"orient": "right",
"tickCount": 3,
"format": "%",
"title": null,
"labelFontSize": 12,
"labelColor": "#56615F",
"labelFontWeight": 400,
"labelPadding": 10
},
"line": {"point": false, "interpolate": "cardinal", "color": "#006A62"},
"text": {
"font": "Google Sans",
"fontSize": 12,
"color": "#001D33",
"fontWeight": 700,
"dx": 15,
"dy": -105
},
"rule": {"strokeWidth": 5, "strokeDash": [0.5, 16], "strokeCap": "round"}
}
}