waffle_v1

waffle_chart_v1.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "transform": [
    {
      "joinaggregate": [{"op": "count", "as": "Count"}],
      "groupby": ["Cylinders", "Origin"]
    },
    {
      "joinaggregate": [{"op": "sum", "field": "Count", "as": "OriginCount"}],
      "groupby": ["Origin"]
    }
  ],
  "facet": {
    "row": {
      "field": "Origin",
      "sort": {"field": "OriginCount", "order": "descending"},
      "header": {
        "title": "",
        "labelAngle": 0,
        "labelPadding": 15,
        "labelAlign": "left",
        "labelFontSize": 12
      }
    }
  },
  "spacing": 5,
  "spec": {
    "width": 300,
    "height": 100,
    "layer": [
      {
        "transform": [
          {
            "window": [{"op": "row_number", "as": "id"}],
            "sort": [{"field": "Cylinders", "order": "ascending"}],
            "groupby": ["Origin"]
          },
          {"calculate": "ceil(datum.id / 10)", "as": "row"},
          {"calculate": "datum.id - datum.row * 10", "as": "col"}
        ],
        "mark": {
          "type": "rect",
          "stroke": "#fff",
          "strokeWidth": 1,
          "filled": true,
          "tooltip": true
        },
        "encoding": {
          "y": {"field": "col", "type": "ordinal", "axis": null},
          "x": {"field": "row", "type": "ordinal", "axis": null},
          "color": {
            "field": "Cylinders",
            "type": "nominal",
            "scale": {"scheme": "set1"}
          },
          "tooltip": [
            {"field": "Origin", "type": "nominal"},
            {"field": "Name", "type": "nominal"},
            {"field": "Cylinders", "type": "nominal"},
            {"field": "Horsepower", "type": "nominal"},
            {"field": "id", "type": "nominal"}
          ]
        }
      },
      {
        "transform": [
          {
            "window": [{"op": "row_number", "as": "id"}],
            "sort": [{"field": "Cylinders", "order": "ascending"}],
            "groupby": ["Origin"]
          },
          {"calculate": "ceil(datum.id / 10)", "as": "row"},
          {"calculate": "datum.id - datum.row * 10", "as": "col"},
          {
            "joinaggregate": [{"op": "max", "field": "id", "as": "maxId"}],
            "groupby": ["Origin"]
          },
          {"filter": "datum.id === datum.maxId"}
        ],
        "mark": {
          "type": "text",
          "align": "left",
          "baseline": "middle",
          "dx": 15,
          "color": "black"
        },
        "encoding": {
          "text": {"field": "id", "type": "nominal"},
          "x": {"field": "row", "type": "ordinal", "axis": null},
          "tooltip": [
            {"field": "Origin", "type": "nominal"},
            {"field": "Name", "type": "nominal"},
            {"field": "Cylinders", "type": "nominal"},
            {"field": "id", "type": "nominal"}
          ]
        }
      }
    ]
  },
  "config": {"view": {"stroke": "transparent"}}
}