Custom Vega spec for a composite histogram plot in wandb

composite_histogram.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "padding": 5,
  "signals": [
    {
      "name": "binOffset",
      "value": 0
    },
    {
      "name": "binStep",
      "value": 0.025,
      "bind": {
        "input": "range",
        "min": 0.01,
        "max": 0.5,
        "step": 0.001
      }
    }
  ],
  "data": [
    {
      "name": "red_bins",
      "source": "wandb",
      "transform": [
        {
          "type": "bin",
          "field": "${field:red_bins}",
          "extent": [
            -1,
            1
          ],
          "anchor": {
            "signal": "binOffset"
          },
          "step": {
            "signal": "binStep"
          },
          "nice": false
        },
        {
          "type": "aggregate",
          "key": "bin0",
          "groupby": [
            "bin0",
            "bin1"
          ],
          "fields": [
            "bin0"
          ],
          "ops": [
            "count"
          ],
          "as": [
            "count"
          ]
        }
      ]
    },
    {
      "name": "blue_bins",
      "source": "wandb",
      "transform": [
        {
          "type": "bin",
          "field": "${field:blue_bins}",
          "extent": [
            -1,
            1
          ],
          "anchor": {
            "signal": "binOffset"
          },
          "step": {
            "signal": "binStep"
          },
          "nice": false
        },
        {
          "type": "aggregate",
          "key": "bin0",
          "groupby": [
            "bin0",
            "bin1"
          ],
          "fields": [
            "bin0"
          ],
          "ops": [
            "count"
          ],
          "as": [
            "count2"
          ]
        }
      ]
    }
  ],
  "title": {
    "text": "Composite Histogram"
  },
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "range": "width",
      "domain": [0.0, 1.0]
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "round": true,
      "domain": {
        "fields" : [
          {"data" : "red_bins", "field" : "count"},
          {"data" : "blue_bins", "field" : "count2"}
        ]
      },
      "zero": true,
      "nice": true
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "zindex": 1,
      "title": "Class confidence scores: Animals (red) vs plants (blue)"
    },
    {
      "orient": "left",
      "scale": "yscale",
      "tickCount": 5,
      "zindex": 1,
      "title" : "Number of runs"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "red_bins"
      },
      "encode": {
        "update": {
          "x": {
            "scale": "xscale",
            "field": "bin0"
          },
          "x2": {
            "scale": "xscale",
            "field": "bin1",
            "offset": {
              "signal": "binStep > 0.02 ? -0.1 : 0"
            }
          },
          "y": {
            "scale": "yscale",
            "field": "count"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          },
          "fill": {
            "value": "firebrick"
          },
          "fillOpacity": {
            "value" : 0.5
          }
        },
        "hover": {
          "fill": {
            "value": "purple"
          }
        }
      }
    },
    {
      "type": "rect",
      "from": {
        "data": "blue_bins"
      },
      "encode": {
        "update": {
          "x": {
            "scale": "xscale",
            "field": "bin0"
          },
          "x2": {
            "scale": "xscale",
            "field": "bin1",
            "offset": {
              "signal": "binStep > 0.02 ? -0.1 : 0"
            }
          },
          "y": {
            "scale": "yscale",
            "field": "count2"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          },
          "fill": {
            "value": "steelblue"
          },
          "fillOpacity": {
            "value" : 0.5
          }
        },
        "hover": {
          "fill": {
            "value": "purple"
          }
        }
      }
    }
  ]
}