How can I change the height of the arc shape in Vega?

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.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.