I am currently developing a visualization using Vega version 5 for OpenSearch. My data and reference materials are sourced from the Vega project on GitHub. The editor I use: https://vega.github.io/ .
I want to adjust the height of an arc mark in my visualization. By ‘height,’ I am referring to the vertical span of the arc, not its position along the y-axis. I want to control the vertical distance from the peak of the arc to the point where it intersects the x-axis. How can I customize this aspect of the arc within my Vega specification?
Script:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An arc diagram depicting character co-occurrence in the novel Les Misérables.",
"width": 1100,
"padding": 6,
"data": [
{
"name": "edges",
"url": "https://raw.githubusercontent.com/Aigeshass/Vega/main/original.json",
"format": {"type": "json", "property": "links"}
},
{
"name": "sourceDegree",
"source": "edges",
"transform": [
{"type": "aggregate", "groupby": ["source"]}
]
},
{
"name": "targetDegree",
"source": "edges",
"transform": [
{"type": "aggregate", "groupby": ["target"]}
]
},
{
"name": "nodes",
"url": "https://raw.githubusercontent.com/Aigeshass/Vega/main/original.json",
"format": {"type": "json", "property": "nodes"},
"transform": [
{ "type": "window", "ops": ["rank"], "as": ["order"] },
{
"type": "lookup", "from": "sourceDegree", "key": "source",
"fields": ["index"], "as": ["sourceDegree"],
"default": {"count": 0}
},
{
"type": "lookup", "from": "targetDegree", "key": "target",
"fields": ["index"], "as": ["targetDegree"],
"default": {"count": 0}
},
{
"type": "formula", "as": "degree",
"expr": "datum.sourceDegree.count + datum.targetDegree.count"
}
]
}
],
"signals": [
{
"name": "arcHeight",
"value": 0,
"bind": {"input": "range", "min": 0, "max": 50, "step": 5}
}
],
"scales": [
{
"name": "position",
"type": "band",
"domain": {"data": "nodes", "field": "order", "sort": true},
"range": "width"
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "nodes", "field": "index"}
},
{
"name": "widthScale",
"type": "linear",
"domain": [200, 600],
"range": [1, 10]
}
],
"marks": [
{
"type": "symbol",
"name": "layout",
"interactive": false,
"from": {"data": "nodes"},
"encode": {
"enter": {
"opacity": {"value": 0}
},
"update": {
"x": {"scale": "position", "field": "order"},
"y": {"value": 0},
"size": {"field": "degree", "mult": 19, "offset": 20},
"fill": [
{"test": "datum.degree < 2", "value": "green"},
{"test": "datum.degree >= 2 && datum.degree < 5", "value": "yellow"},
{"test": "datum.degree >= 5", "value": "red"}
]
}
}
},
{
"type": "path",
"from": {"data": "edges"},
"encode": {
"update": {
"stroke": {"value": "#000"},
"strokeOpacity": {"value": 0.4},
"strokeWidth": {"scale": "widthScale", "field": "bytes"},
"y":{"signal":"arcHeight"}
}
},
"transform": [
{
"type": "lookup", "from": "layout", "key": "datum.index",
"fields": ["datum.source", "datum.target"],
"as": ["sourceNode", "targetNode"]
},
{
"type": "linkpath",
"sourceX": {"expr": "min(datum.sourceNode.x, datum.targetNode.x)"},
"targetX": {"expr": "max(datum.sourceNode.x, datum.targetNode.x)"},
"sourceY": {"expr": "0"},
"targetY": {"expr": "0"},
"shape": "arc" }
]
},
{
"type": "symbol",
"from": {"data": "layout"},
"encode": {
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {"field": "fill"},
"size": {"field": "size"}
}
}
},
{
"type": "text",
"from": {"data": "nodes"},
"encode": {
"update": {
"x": {"scale": "position", "field": "order"},
"y": {"value": 7},
"fontSize": {"value": 12},
"align": {"value": "right"},
"baseline": {"value": "middle"},
"angle": {"value": -90},
"text": {"field": "name"}
}
}
}
]
}
Please let me know if it is possible to change the default parameters of the shapes in Vega.