Wie macht man dieses gestapelte Balkendiagramm mit Vega zu einem horizontalen gestapelten Balkendiagramm?

Question

Kann mir jemand helfen, ein horizontal gestapeltes Balkendiagramm in Vega mit folgender Spezifikation zu machen?

Ich komme nicht über die Achsen der inversen Whit die Stäbe :(

Um die Achsen zu invertieren es ist einfach, aber ich kommen gerade vertikal die gestapelten Balken invers, aber keine horizontalen

{ 
 
    "$schema": "https://vega.github.io/schema/vega/v3.0.json", 
 
    "width": 500, 
 
    "height": 200, 
 
    "padding": 5, 
 
    "data": [ 
 
    { 
 
     "name": "table", 
 
     "values": [ 
 
     {"x": 0,"y": 28,"c": "yes"}, 
 
     {"x": 0,"y": 12,"c": "white"}, 
 
     {"x": 0,"y": 60,"c": "no"}, 
 
     {"x": 1,"y": 28,"c": "yes"}, 
 
     {"x": 1,"y": 12,"c": "white"}, 
 
     {"x": 1,"y": 60,"c": "no"}, 
 
     {"x": 2,"y": 28,"c": "yes"}, 
 
     {"x": 2,"y": 12,"c": "white"}, 
 
     {"x": 2,"y": 60,"c": "no"}, 
 
     {"x": 3,"y": 28,"c": "yes"}, 
 
     {"x": 3,"y": 12,"c": "white"}, 
 
     {"x": 3,"y": 60,"c": "no"}, 
 
     {"x": 4,"y": 28,"c": "yes"}, 
 
     {"x": 4,"y": 12,"c": "white"}, 
 
     {"x": 4,"y": 60,"c": "no"}, 
 
     {"x": 5,"y": 28,"c": "yes"}, 
 
     {"x": 5,"y": 12,"c": "white"}, 
 
     {"x": 5,"y": 60,"c": "no"}, 
 
     {"x": 6,"y": 28,"c": "yes"}, 
 
     {"x": 6,"y": 12,"c": "white"}, 
 
     {"x": 6,"y": 60,"c": "no"}, 
 
     {"x": 7,"y": 28,"c": "yes"}, 
 
     {"x": 7,"y": 12,"c": "white"}, 
 
     {"x": 7,"y": 60,"c": "no"}, 
 
     {"x": 8,"y": 28,"c": "yes"}, 
 
     {"x": 8,"y": 12,"c": "white"}, 
 
     {"x": 8,"y": 60,"c": "no"}, 
 
     {"x": 9,"y": 28,"c": "yes"}, 
 
     {"x": 9,"y": 12,"c": "white"}, 
 
     {"x": 9,"y": 60,"c": "no"} 
 
     ], 
 
     "transform": [ 
 
     { 
 
      "type": "stack", 
 
      "groupby": ["x"], 
 
      "sort": {"field": "c"}, 
 
      "field": "y" 
 
     } 
 
     ] 
 
    } 
 
    ], 
 
    "scales": [ 
 
    { 
 
     "name": "x", 
 
     "type": "band", 
 
     "range": "width", 
 
     "domain": {"data": "table","field": "x"} 
 
    }, 
 
    { 
 
     "name": "y", 
 
     "type": "linear", 
 
     "range": "height", 
 
     "nice": true, 
 
     "zero": true, 
 
     "domain": {"data": "table","field": "y1"} 
 
    }, 
 
    { 
 
     "name": "color", 
 
     "type": "ordinal", 
 
     "domain": {"data": "table","field": "c","sort": true}, 
 
     "range": ["#FF0000","#FFFFFF","#008000"] 
 
    }, 
 
    { 
 
     "name": "colorStroke", 
 
     "type": "ordinal", 
 
     "domain": {"data": "table","field": "c"}, 
 
     "range": ["#000000"] 
 
    } 
 
    ], 
 
    "axes": [ 
 
    {"orient": "bottom","scale": "x"}, 
 
    {"orient": "left","scale": "y"} 
 
    ], 
 
    "marks": [ 
 
    { 
 
     "type": "rect", 
 
     "from": {"data": "table"}, 
 
     "encode": { 
 
     "enter": { 
 
      "x": {"scale": "x","field": "x"}, 
 
      "width": {"scale": "x","band": 1,"offset": -5}, 
 
      "y": {"scale": "y","field": "y0"}, 
 
      "y2": {"scale": "y","field": "y1"}, 
 
      "stroke": {"scale": "colorStroke","field": "c"}, 
 
      "strokeWidth": {"value": 0.5}, 
 
      "fill": {"scale": "color","field": "c"} 
 
     }, 
 
     "update": {"fillOpacity": {"value": 1}}, 
 
     "hover": {"fillOpacity": {"value": 0.5}} 
 
     } 
 
    } 
 
    ] 
 
}

Vielen Dank für Ihre Hilfe :)

Answer 1

Dinge Invertierung in vega ist nicht ganz so einfach wie mit vega-lite, wo es genügt, x und y zu wechseln.

Diese normalerweise sollte es tun:

{ 
    "$schema": "https://vega.github.io/schema/vega/v3.0.json", 
    "width": 200, 
    "height": 500, 
    "padding": 5, 
    "data": [ 
    { 
     "name": "table", 
     "values": [ 
     {"x": 0,"y": 28,"c": "yes"}, 
     {"x": 0,"y": 12,"c": "white"}, 
     {"x": 0,"y": 60,"c": "no"}, 
     {"x": 1,"y": 28,"c": "yes"}, 
     {"x": 1,"y": 12,"c": "white"}, 
     {"x": 1,"y": 60,"c": "no"}, 
     {"x": 2,"y": 28,"c": "yes"}, 
     {"x": 2,"y": 12,"c": "white"}, 
     {"x": 2,"y": 60,"c": "no"}, 
     {"x": 3,"y": 28,"c": "yes"}, 
     {"x": 3,"y": 12,"c": "white"}, 
     {"x": 3,"y": 60,"c": "no"}, 
     {"x": 4,"y": 28,"c": "yes"}, 
     {"x": 4,"y": 12,"c": "white"}, 
     {"x": 4,"y": 60,"c": "no"}, 
     {"x": 5,"y": 28,"c": "yes"}, 
     {"x": 5,"y": 12,"c": "white"}, 
     {"x": 5,"y": 60,"c": "no"}, 
     {"x": 6,"y": 28,"c": "yes"}, 
     {"x": 6,"y": 12,"c": "white"}, 
     {"x": 6,"y": 60,"c": "no"}, 
     {"x": 7,"y": 28,"c": "yes"}, 
     {"x": 7,"y": 12,"c": "white"}, 
     {"x": 7,"y": 60,"c": "no"}, 
     {"x": 8,"y": 28,"c": "yes"}, 
     {"x": 8,"y": 12,"c": "white"}, 
     {"x": 8,"y": 60,"c": "no"}, 
     {"x": 9,"y": 28,"c": "yes"}, 
     {"x": 9,"y": 12,"c": "white"}, 
     {"x": 9,"y": 60,"c": "no"} 
     ], 
     "transform": [ 
     { 
      "type": "stack", 
      "groupby": ["x"], 
      "sort": {"field": "c"}, 
      "field": "y" 
     } 
     ] 
    } 
    ], 
    "scales": [ 
    { 
     "name": "y", 
     "type": "band", 
     "range": "height", 
     "domain": {"data": "table","field": "x"}, 
     "reverse": true 
    }, 
    { 
     "name": "x", 
     "type": "linear", 
     "range": "height", 
     "nice": true, 
     "zero": true, 
     "reverse": true, 
     "domain": {"data": "table","field": "y1"} 
    }, 
    { 
     "name": "color", 
     "type": "ordinal", 
     "domain": {"data": "table","field": "c","sort": true}, 
     "range": ["#FF0000","#FFFFFF","#008000"] 
    }, 
    { 
     "name": "colorStroke", 
     "type": "ordinal", 
     "domain": {"data": "table","field": "c"}, 
     "range": ["#000000"] 
    } 
    ], 
    "axes": [ 
    {"orient": "bottom","scale": "x"}, 
    {"orient": "left","scale": "y"} 
    ], 
    "marks": [ 
    { 
     "type": "rect", 
     "from": {"data": "table"}, 
     "encode": { 
     "enter": { 
      "y": {"scale": "y","field": "x"}, 
      "height": {"scale": "y","band": 1,"offset": -5}, 
      "x": {"scale": "x","field": "y0"}, 
      "x2": {"scale": "x","field": "y1"}, 
      "stroke": {"scale": "colorStroke","field": "c"}, 
      "strokeWidth": {"value": 0.5}, 
      "fill": {"scale": "color","field": "c"} 
     }, 
     "update": {"fillOpacity": {"value": 1}}, 
     "hover": {"fillOpacity": {"value": 0.5}} 
     } 
    } 
    ] 
}