How can I define duplicate values on the X-axis of a stacked area chart with Vega?

Question

Is there anyway to define duplicate values on an X-axis in a stacked area chart?

I'm trying to create a chart that has an X Axis from 50 down to 0 and back up to 30, like: 50, 40, 30, 20, 10, 0, 5, 10, 15, 20

I'm having issues where the duplicate values are not showing up, so I get: 50, 40, 30, 20, 10, 0, 5, 15

I tried adding a groupby to distinguish the duplicates. Any thoughts/suggestions would be greatly appreciated.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic stacked area chart example.",
  "width": 450,
  "height": 200,
  "padding": 5,

  "data": [
    {
      "name": "table",
 "values": [
        {"x": "50", "x2": 0, "y": 20, "c":0, "color":"#aaa"}, {"x": "50", "x2": 0, "y": 20, "c":1, "color":"#000"},
        {"x": "40", "x2": 1, "y": 40, "c":0, "color":"#aaa"}, {"x": "40", "x2": 1, "y": 40, "c":1, "color":"#000"},
        {"x": "30", "x2": 2, "y": 70, "c":0, "color":"#aaa"}, {"x": "30", "x2": 2, "y": 70, "c":1, "color":"#000"},
        {"x": "20", "x2": 3, "y": 80, "c":0, "color":"#aaa"}, {"x": "20", "x2": 3, "y": 80, "c":1, "color":"#000"},
        {"x": "10", "x2": 4, "y": 50, "c":0, "color":"#aaa"}, {"x": "10", "x2": 4, "y": 50, "c":1, "color":"#000"},
        {"x":  "0", "x2": 5, "y": 50, "c":0, "color":"#aaa"}, {"x":  "0", "x2": 5, "y": 50, "c":1, "color":"#000"},
        {"x":  "5", "x2": 6, "y": 10, "c":0, "color":"#aaa"}, {"x":  "5", "x2": 6, "y": 10, "c":1, "color":"#000"},
        {"x": "10", "x2": 7, "y": 50, "c":0, "color":"#aaa"}, {"x": "10", "x2": 7, "y": 20, "c":1, "color":"#000"},
        {"x": "20", "x2": 8, "y": 80, "c":0, "color":"#aaa"}, {"x": "20", "x2": 8, "y": 80, "c":1, "color":"#000"},
        {"x": "30", "x2": 9, "y": 20, "c":0, "color":"#aaa"}, {"x": "30", "x2": 9, "y": 20, "c":1, "color":"#000"}],
      "transform": [
        {
          "type": "stack",
          "groupby": ["x2"],
          "field": "y"
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "point",
      "range": "width",
      "domain": {"data": "table", "field": "x"}
    },
    {
      "name": "x2",
      "type": "point",
      "range": "width",
      "domain": {"data": "table", "field": "x2"}
    },
    {
      "name": "y",
      "type": "linear",
      "domain": [0,100],
      "range": [{"signal": "height"}, 0],
      "round": true,
      "zero": true,
      "nice": false,
      "bins": {"step": 20}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "x", "zindex": 1},
    {"orient": "left", "scale": "y", "zindex": 1}
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "c"
        }
      },
      "marks": [
        {
          "type": "area",
          "from": {"data": "series"},
          "encode": {
            "enter": {
              "interpolate": {"value": "monotone"},
              "x": {"scale": "x2", "field": "x2"},
              "y": {"scale": "y", "field": "y0"},
              "y2": {"scale": "y", "field": "y1"},
              "fill": {"signal": "datum.color"}
            }
          }
        }
      ]
    }
  ]
}

score 1 · Accepted Answer · answered May 25 '23 at 16:52

Here's one way. Add negative signs to the numbers that are supposed to appear on the left and then remove them in the axis.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic stacked area chart example.",
  "width": 450,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"x": "-50", "x2": 0, "y": 20, "c": 0, "color": "#aaa"},
        {"x": "-50", "x2": 0, "y": 20, "c": 1, "color": "#000"},
        {"x": "-40", "x2": 1, "y": 40, "c": 0, "color": "#aaa"},
        {"x": "-40", "x2": 1, "y": 40, "c": 1, "color": "#000"},
        {"x": "-30", "x2": 2, "y": 70, "c": 0, "color": "#aaa"},
        {"x": "-30", "x2": 2, "y": 70, "c": 1, "color": "#000"},
        {"x": "-20", "x2": 3, "y": 80, "c": 0, "color": "#aaa"},
        {"x": "-20", "x2": 3, "y": 80, "c": 1, "color": "#000"},
        {"x": "-10", "x2": 4, "y": 50, "c": 0, "color": "#aaa"},
        {"x": "-10", "x2": 4, "y": 50, "c": 1, "color": "#000"},
        {"x": "0", "x2": 5, "y": 50, "c": 0, "color": "#aaa"},
        {"x": "0", "x2": 5, "y": 50, "c": 1, "color": "#000"},
        {"x": "5", "x2": 6, "y": 10, "c": 0, "color": "#aaa"},
        {"x": "5", "x2": 6, "y": 10, "c": 1, "color": "#000"},
        {"x": "10", "x2": 7, "y": 50, "c": 0, "color": "#aaa"},
        {"x": "10", "x2": 7, "y": 20, "c": 1, "color": "#000"},
        {"x": "20", "x2": 8, "y": 80, "c": 0, "color": "#aaa"},
        {"x": "20", "x2": 8, "y": 80, "c": 1, "color": "#000"},
        {"x": "30", "x2": 9, "y": 20, "c": 0, "color": "#aaa"},
        {"x": "30", "x2": 9, "y": 20, "c": 1, "color": "#000"}
      ],
      "transform": [{"type": "stack", "groupby": ["x2"], "field": "y"}]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "point",
      "range": "width",
      "domain": {"data": "table", "field": "x"}
    },
    {
      "name": "x2",
      "type": "point",
      "range": "width",
      "domain": {"data": "table", "field": "x2"}
    },
    {
      "name": "y",
      "type": "linear",
      "domain": [0, 100],
      "range": [{"signal": "height"}, 0],
      "round": true,
      "zero": true,
      "nice": false,
      "bins": {"step": 20}
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "x", "zindex": 1,
    "encode": {
        "labels": {
          "update": {
            "text": {"signal": "substring(datum.label,0,1) =='-'?substring(datum.label,1):datum.label"}
          }
        }
      }
    
    },
    {"orient": "left", "scale": "y", "zindex": 1}
  ],
  "marks": [
    {
      "type": "group",
      "from": {"facet": {"name": "series", "data": "table", "groupby": "c"}},
      "marks": [
        {
          "type": "area",
          "from": {"data": "series"},
          "encode": {
            "enter": {
              "interpolate": {"value": "monotone"},
              "x": {"scale": "x2", "field": "x2"},
              "y": {"scale": "y", "field": "y0"},
              "y2": {"scale": "y", "field": "y1"},
              "fill": {"signal": "datum.color"}
            }
          }
        }
      ]
    }
  ]
}

Thanks for the input (and quick!)-- Ideally I wouldn't want to modify the data coming in (as it's a dynamic series and won't necessarily always be the 50 to 0 to 30); however, there is an assumption that it's already in order left to right, so I could inject a negative symbol before sending to the chart and have it parse it out as you suggest here. — Noble, May 25 '23 at 17:20

How can I define duplicate values on the X-axis of a stacked area chart with Vega?

1 Answers1