Custom Charts: Scaling Vega charts doesn't work with radial facets
See original GitHub issueI created a custom chart, using an existing Vega chart example, at astariul/radar
.
But the chart does not appear entirely :
You can see it in this report.
Click here to view the full Vega code of the custom chart
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A radar chart example, showing multiple dimensions in a radial layout.",
"height": "container",
"signals": [
{"name": "radius", "update": "width / 2"}
],
"data": [
{
"name": "wandb"
},
{
"name": "wkeys",
"source": "wandb",
"transform": [
{
"type": "aggregate",
"groupby": ["${field:x}"]
}
]
}
],
"scales": [
{
"name": "angular",
"type": "point",
"range": {"signal": "[-PI, PI]"},
"padding": 0.5,
"domain": {"data": "wandb", "field": "${field:x}"}
},
{
"name": "radial",
"type": "linear",
"range": {"signal": "[0, radius]"},
"zero": true,
"nice": false,
"domain": {"data": "wandb", "field": "${field:y}"},
"domainMin": 0
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "wandb", "field": "id"},
"range": {"scheme": "category10"}
}
],
"encode": {
"enter": {
"x": {"signal": "radius"},
"y": {"signal": "radius"}
}
},
"marks": [
{
"type": "group",
"name": "categories",
"zindex": 1,
"from": {
"facet": {"data": "wandb", "name": "facet", "groupby": ["id"]}
},
"marks": [
{
"type": "line",
"name": "category-line",
"from": {"data": "facet"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "scale('radial', datum.${field:y}) * cos(scale('angular', datum.${field:x}))"},
"y": {"signal": "scale('radial', datum.${field:y}) * sin(scale('angular', datum.${field:x}))"},
"stroke": {"scale": "color", "field": "id"},
"strokeWidth": {"value": 1},
"fill": {"scale": "color", "field": "id"},
"fillOpacity": {"value": 0.1}
}
}
},
{
"type": "text",
"name": "value-text",
"from": {"data": "category-line"},
"encode": {
"enter": {
"x": {"signal": "datum.x"},
"y": {"signal": "datum.y"},
"text": {"signal": "datum.datum.${field:y}"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fill": {"value": "black"}
}
}
}
]
},
{
"type": "rule",
"name": "radial-grid",
"from": {"data": "wkeys"},
"zindex": 0,
"encode": {
"enter": {
"x": {"value": 0},
"y": {"value": 0},
"x2": {"signal": "radius * cos(scale('angular', datum.${field:x}))"},
"y2": {"signal": "radius * sin(scale('angular', datum.${field:x}))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "text",
"name": "key-label",
"from": {"data": "wkeys"},
"zindex": 1,
"encode": {
"enter": {
"x": {"signal": "(radius + 5) * cos(scale('angular', datum.${field:x}))"},
"y": {"signal": "(radius + 5) * sin(scale('angular', datum.${field:x}))"},
"text": {"field": "${field:x}"},
"align": [
{
"test": "abs(scale('angular', datum.${field:x})) > PI / 2",
"value": "right"
},
{
"value": "left"
}
],
"baseline": [
{
"test": "scale('angular', datum.${field:x}) > 0", "value": "top"
},
{
"test": "scale('angular', datum.${field:x}) == 0", "value": "middle"
},
{
"value": "bottom"
}
],
"fill": {"value": "black"},
"fontWeight": {"value": "bold"}
}
}
},
{
"type": "line",
"name": "outer-line",
"from": {"data": "radial-grid"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"field": "x2"},
"y": {"field": "y2"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
}
]
}
I tried several values for height
and width
, but without success, so I’m asking here looking for help 😃
How can I modify my custom chart to ensure the whole chart is visible ?
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Scaling Vega charts doesn't work with radial facets · Issue #1553
I created a custom chart, using an existing Vega chart example, at astariul/radar . But the chart does not appear entirely :.
Read more >Example Gallery | Vega-Lite
This page shows example specifications for different types of graphics. To see example code for embedding visualizations in a webpage, please read the...
Read more >VegaChart Examples | Charts - Google Developers
This is a set of examples of using the VegaChart. You can find many more Vega Examples and Vega-Lite Examples that can be...
Read more >After Vega-Lite: what's next? - Observable
The example below shows how a radial presentation can work well for aggregated weather data because it more closely suggests the cyclical nature...
Read more >Ordering of a faceted Bar-chart in Vega - Stack Overflow
I have a question about facet visualizations in vega. I have a pretty similar problem as the nested bar char example.
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 FreeTop 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
Top GitHub Comments
I’m looking into this, it seems that radially facetted plots are quite tricky for sizing with Vega. It should be noted that Vega is working on adding a top down support for autosizing plots with facets in the near future. In the meantime, I’ll try to find a suitable workaround for you.
This is still a challenge for us with Vega, and we haven’t found a solution for this scale problem on our side.