Quelltext der Seite ModalSplitLeuphana2021

<div class="map" style="float: unset; text-align: center;">
'''Modal Split-Erhebung 2021 (Leuphana)'''
<graph>
{
  "width": 600,
  "height": 200,
  "padding": {"top": 10,"left": 30,"bottom": 30,"right": 10},
  
    "signals": [
    {
      "name": "tooltip",
      "init": {},
      "streams": [
        {"type": "rect:mouseover", "expr": "datum"},
        {"type": "rect:mouseout", "expr": "{}"}
      ]
    }
  ],
  
  "data": [
    {
      "name": "table",
      "values": [
        {"x": "Radverkehr","y": 14.1,"c": 0},
        {"x": "Pkw","y": 65.6,"c": 1},
        {"x": "Kraftrad","y": 0.9,"c":2},
        {"x": "Roller","y": 0.3,"c":3},
        {"x": "ÖPNV","y": 5.8,"c":4},
        {"x": "Fußverkehr","y": 13.4,"c":5},
        {"x": " ","y": 40,"c":6}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "width",
      "domain": {"data": "table","field": "x"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "table","field": "y"},
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": ["#71be43", "#ec1b23", "#000000", "#fff203", "#ff08c1", "#08c1ff", "#ffffff"],
      "domain": {"data": "table", "field": "c"}
    }
  ],
  "axes": [{"type": "x","scale": "x"},{"type": "y","scale": "y"}],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x","field": "x"},
          "width": {"scale": "x","band": true,"offset": -1},
          "y": {"scale": "y","field": "y"},
          "y2": {"scale": "y","value": 0},
          "fill": {"scale": "color", "field": "c"}
        }
      }
    },
     {
      "type": "text",
      "properties": {
        "enter": {
          "align": {"value": "center"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "x", "signal": "tooltip.x"},
          "dx": {"scale": "x", "band": true, "mult": 0.5},
          "y": {"scale": "y", "signal": "tooltip.y", "offset": -5},
          "text": {"signal": "tooltip.y"},
          "fillOpacity": [
            { "test": "!tooltip._id",
              "value": 0
            },
            {"value": 1}
          ]
        }
      }
    }
  ]
}
</graph>
</div>