vega-lite-table

vega-table.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": {"text": "Net Promoter Score Analysis", "offset": 30},
  "data": {
    "values": [
      {
        "Product": "Product X01",
        "Promoters": 0.87,
        "Detractors": 0.03,
        "Neutral": 0.1
      },
      {
        "Product": "Product X02",
        "Promoters": 0.806,
        "Detractors": 0.04,
        "Neutral": 0.154
      },
      {
        "Product": "Product X03",
        "Promoters": 0.693,
        "Detractors": 0.052,
        "Neutral": 0.255
      },
      {
        "Product": "Product X04",
        "Promoters": 0.57,
        "Detractors": 0.03,
        "Neutral": 0.4
      },
      {
        "Product": "Product X05",
        "Promoters": 0.52,
        "Detractors": 0.049,
        "Neutral": 0.431
      },
      {
        "Product": "Product X06",
        "Promoters": 0.462,
        "Detractors": 0.212,
        "Neutral": 0.326
      },
      {
        "Product": "Product X07",
        "Promoters": 0.052,
        "Detractors": 0.21,
        "Neutral": 0.738
      },
      {
        "Product": "Product X08",
        "Promoters": 0.084,
        "Detractors": 0.39,
        "Neutral": 0.526
      },
      {
        "Product": "Product X09",
        "Promoters": 0.17,
        "Detractors": 0.51,
        "Neutral": 0.32
      },
      {
        "Product": "Product X10",
        "Promoters": 0.228,
        "Detractors": 0.62,
        "Neutral": 0.152
      }
    ]
  },
  "transform": [
    {
      "calculate": "(datum['Promoters'] - datum['Detractors']) * 100",
      "as": "NPS"
    }
  ],
  "concat": [
    {
      "width": 85,
      "height": 400,
      "encoding": {
        "x": {"value": 70},
        "y": {
          "field": "Product",
          "sort": {"field": "NPS", "order": "descending"},
          "axis": {
            "domain": false,
            "tickSize": 60,
            "tickColor": {
              "expr": "datum.value == 'Product X10' ? '' : '#E9E9E9'"
            },
            "labelFontSize": 15,
            "labelPadding": -80,
            "title": "NPS",
            "titlePadding": -117,
            "titleColor": "#07A2B0"
          }
        }
      },
      "layer": [
        {
          "description": "This bar mark was added to get the grid aligned with the cocatenated charts on the right (same tickBand)",
          "mark": {"type": "bar", "color": ""}
        },
        {
          "mark": {"type": "point"},
          "encoding": {
            "fill": {
              "field": "NPS",
              "scale": {
                "scheme": {"name": "lighttealblue", "extent": [-0.05, 0.3]}
              },
              "legend": null
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "color": "black",
            "xOffset": {"expr": "datum['NPS'] > 0 ? 0 : -1"}
          },
          "encoding": {"text": {"field": "NPS", "format": ".0f"}}
        }
      ]
    },
    {
      "width": 350,
      "height": 400,
      "transform": [
        {"fold": ["Promoters", "Detractors"], "as": ["Category", "Percentage"]},
        {
          "calculate": "datum['Category'] == 'Detractors' ? -datum['Percentage'] : datum['Percentage']",
          "as": "SignedPercentage"
        },
        {
          "calculate": "datum['Percentage'] > 0.13 ? datum['SignedPercentage'] / 2 : datum['SignedPercentage'] > 0 ? datum['SignedPercentage'] + 0.01 : datum['SignedPercentage'] - 0.01",
          "as": "DivergingBarLabels"
        }
      ],
      "encoding": {
        "y": {
          "field": "Product",
          "sort": {"field": "NPS", "op": "max", "order": "descending"},
          "axis": {
            "domain": false,
            "ticks": false,
            "labels": false,
            "title": null
          }
        }
      },
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "SignedPercentage", "type": "quantitative"},
            "color": {
              "field": "Category",
              "scale": {
                "domain": ["Detractors", "Promoters"],
                "range": ["#F9C97C", "#A8DFE7"]
              },
              "legend": {"labelExpr": "upper(datum.value)"}
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": {
              "expr": "datum['Percentage'] > 0.13 ? 'center' : datum['SignedPercentage'] > 0 ? 'left' : 'right'"
            }
          },
          "encoding": {
            "x": {"field": "DivergingBarLabels", "type": "quantitative"},
            "text": {"field": "Percentage", "format": ".0%"}
          }
        }
      ]
    },
    {
      "width": 150,
      "height": 400,
      "transform": [
        {
          "calculate": "datum['Neutral'] > 0.13 ? datum['Neutral'] / 2 : datum['Neutral'] + 0.01",
          "as": "BarLabels"
        }
      ],
      "encoding": {
        "y": {
          "field": "Product",
          "sort": {"field": "NPS", "op": "max", "order": "descending"},
          "axis": {
            "position": 2,
            "offset": 0.7,
            "domainWidth": 0.6,
            "domainColor": "#D3D3D3",
            "ticks": false,
            "labels": false,
            "title": "NEUTRAL",
            "titlePadding": -15,
            "titleColor": "#696969"
          }
        }
      },
      "layer": [
        {
          "mark": {"type": "bar", "color": "#E0E0E0"},
          "encoding": {"x": {"field": "Neutral", "type": "quantitative"}}
        },
        {
          "mark": {
            "type": "text",
            "align": {"expr": "datum['Neutral'] > 0.13 ? 'center' : 'left'"}
          },
          "encoding": {
            "x": {"field": "BarLabels", "type": "quantitative"},
            "text": {"field": "Neutral", "format": ".0%"}
          }
        }
      ]
    }
  ],
  "resolve": {"scale": {"color": "independent"}},
  "spacing": -1,
  "config": {
    "background": "white",
    "view": {"stroke": null},
    "padding": {"top": 20, "bottom": 10, "left": 20, "right": 20},
    "font": "Source Sans Pro",
    "axisX": {
      "domain": false,
      "grid": false,
      "ticks": false,
      "labels": false,
      "title": null
    },
    "axisY": {
      "grid": true,
      "gridColor": {"expr": "datum.value == 'Product X10' ? '' : '#E9E9E9'"},
      "tickBand": "extent",
      "titleAngle": 0,
      "titleAlign": "left",
      "titleFontSize": 15,
      "titleFontWeight": "bold",
      "titleY": -10
    },
    "bar": {"height": 25},
    "text": {"fontSize": 13},
    "point": {"size": 800, "filled": true, "opacity": 1},
    "legend": {
      "orient": "none",
      "direction": "horizontal",
      "symbolOpacity": 0,
      "labelFontSize": 15,
      "labelFontWeight": "bold",
      "labelColor": {
        "expr": "datum.value == 'Promoters' ? '#31C0D0' : '#F09F00'"
      },
      "columnPadding": 18,
      "title": null,
      "legendX": 30,
      "legendY": -24
    },
    "title": {"anchor": "start", "fontSize": 30}
  }
}