Guitar2

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "Guitar Fretboard",
  "description": "See https://www.liutaiomottola.com/formulae/fret.htm for fret position calculations. Normalized and scaled manually to width of chart",
  "data": {
    "values": [
      {"string": 1, "fret": 0},
      {"string": 1, "fret": 1},
      {"string": 1, "fret": 2},
      {"string": 1, "fret": 3},
      {"string": 1, "fret": 4},
      {"string": 1, "fret": 5},
      {"string": 1, "fret": 6},
      {"string": 1, "fret": 7},
      {"string": 1, "fret": 8},
      {"string": 1, "fret": 9},
      {"string": 1, "fret": 10},
      {"string": 1, "fret": 11},
      {"string": 1, "fret": 12},
      {"string": 1, "fret": 13},
      {"string": 1, "fret": 14},
      {"string": 1, "fret": 15},
      {"string": 1, "fret": 16},
      {"string": 1, "fret": 17},
      {"string": 1, "fret": 18},
      {"string": 1, "fret": 19},
      {"string": 1, "fret": 20},
      {"string": 1, "fret": 21},
      {"string": 1, "fret": 22},
      {"string": 1, "fret": 23},
      {"string": 1, "fret": 24},
      {"string": 2, "fret": 0},
      {"string": 2, "fret": 1},
      {"string": 2, "fret": 2},
      {"string": 2, "fret": 3},
      {"string": 2, "fret": 4},
      {"string": 2, "fret": 5},
      {"string": 2, "fret": 6},
      {"string": 2, "fret": 7},
      {"string": 2, "fret": 8},
      {"string": 2, "fret": 9},
      {"string": 2, "fret": 10},
      {"string": 2, "fret": 11},
      {"string": 2, "fret": 12},
      {"string": 2, "fret": 13},
      {"string": 2, "fret": 14},
      {"string": 2, "fret": 15},
      {"string": 2, "fret": 16},
      {"string": 2, "fret": 17},
      {"string": 2, "fret": 18},
      {"string": 2, "fret": 19},
      {"string": 2, "fret": 20},
      {"string": 2, "fret": 21},
      {"string": 2, "fret": 22},
      {"string": 2, "fret": 23},
      {"string": 2, "fret": 24},
      {"string": 3, "fret": 0},
      {"string": 3, "fret": 1},
      {"string": 3, "fret": 2},
      {"string": 3, "fret": 3},
      {"string": 3, "fret": 4},
      {"string": 3, "fret": 5},
      {"string": 3, "fret": 6},
      {"string": 3, "fret": 7},
      {"string": 3, "fret": 8},
      {"string": 3, "fret": 9},
      {"string": 3, "fret": 10},
      {"string": 3, "fret": 11},
      {"string": 3, "fret": 12},
      {"string": 3, "fret": 13},
      {"string": 3, "fret": 14},
      {"string": 3, "fret": 15},
      {"string": 3, "fret": 16},
      {"string": 3, "fret": 17},
      {"string": 3, "fret": 18},
      {"string": 3, "fret": 19},
      {"string": 3, "fret": 20},
      {"string": 3, "fret": 21},
      {"string": 3, "fret": 22},
      {"string": 3, "fret": 23},
      {"string": 3, "fret": 24},
      {"string": 4, "fret": 0},
      {"string": 4, "fret": 1},
      {"string": 4, "fret": 2},
      {"string": 4, "fret": 3},
      {"string": 4, "fret": 4},
      {"string": 4, "fret": 5},
      {"string": 4, "fret": 6},
      {"string": 4, "fret": 7},
      {"string": 4, "fret": 8},
      {"string": 4, "fret": 9},
      {"string": 4, "fret": 10},
      {"string": 4, "fret": 11},
      {"string": 4, "fret": 12},
      {"string": 4, "fret": 13},
      {"string": 4, "fret": 14},
      {"string": 4, "fret": 15},
      {"string": 4, "fret": 16},
      {"string": 4, "fret": 17},
      {"string": 4, "fret": 18},
      {"string": 4, "fret": 19},
      {"string": 4, "fret": 20},
      {"string": 4, "fret": 21},
      {"string": 4, "fret": 22},
      {"string": 4, "fret": 23},
      {"string": 4, "fret": 24},
      {"string": 5, "fret": 0},
      {"string": 5, "fret": 1},
      {"string": 5, "fret": 2},
      {"string": 5, "fret": 3},
      {"string": 5, "fret": 4},
      {"string": 5, "fret": 5},
      {"string": 5, "fret": 6},
      {"string": 5, "fret": 7},
      {"string": 5, "fret": 8},
      {"string": 5, "fret": 9},
      {"string": 5, "fret": 10},
      {"string": 5, "fret": 11},
      {"string": 5, "fret": 12},
      {"string": 5, "fret": 13},
      {"string": 5, "fret": 14},
      {"string": 5, "fret": 15},
      {"string": 5, "fret": 16},
      {"string": 5, "fret": 17},
      {"string": 5, "fret": 18},
      {"string": 5, "fret": 19},
      {"string": 5, "fret": 20},
      {"string": 5, "fret": 21},
      {"string": 5, "fret": 22},
      {"string": 5, "fret": 23},
      {"string": 5, "fret": 24},
      {"string": 6, "fret": 0},
      {"string": 6, "fret": 1},
      {"string": 6, "fret": 2},
      {"string": 6, "fret": 3},
      {"string": 6, "fret": 4},
      {"string": 6, "fret": 5},
      {"string": 6, "fret": 6},
      {"string": 6, "fret": 7},
      {"string": 6, "fret": 8},
      {"string": 6, "fret": 9},
      {"string": 6, "fret": 10},
      {"string": 6, "fret": 11},
      {"string": 6, "fret": 12},
      {"string": 6, "fret": 13},
      {"string": 6, "fret": 14},
      {"string": 6, "fret": 15},
      {"string": 6, "fret": 16},
      {"string": 6, "fret": 17},
      {"string": 6, "fret": 18},
      {"string": 6, "fret": 19},
      {"string": 6, "fret": 20},
      {"string": 6, "fret": 21},
      {"string": 6, "fret": 22},
      {"string": 6, "fret": 23},
      {"string": 6, "fret": 24}
    ]
  },
  "width": 800,
  "height": 200,
  "params": [
    {"name": "selected_string", "value": 3},
    {"name": "selected_fret", "value": 11}
  ],
  "config": {
    "title": {"color": "white"},
    "axis": {
      "grid": true,
      "title": null,
      "ticks": false,
      "gridColor": "#bbb",
      "domainColor": "#ccc",
      "labelColor": "white"
    }
  },
  "background": "#482029",
  "layer": [
    {
      "name": "positions",
      "mark": "circle",
      "transform": [
        {
          "window": [{"op": "average", "field": "fret", "as": "fingerpos"}],
          "frame": [-1, 0],
          "groupby": ["string"],
          "sort": [{"field": "fret"}]
        }
      ],
      "encoding": {
        "fill": {"value": "#fadadd"},
        "size": {
          "value": 400,
          "condition": [
            {"test": "selected_fret > 20", "value": 200},
            {"test": "selected_fret > 12", "value": 300}
          ]
        },
        "x": {
          "field": "fingerpos",
          "scale": {
            "type": "linear",
            "domain": [
              0,
              1,
              2,
              3,
              4,
              5,
              6,
              7,
              8,
              9,
              10,
              11,
              12,
              13,
              14,
              15,
              16,
              17,
              18,
              19,
              20,
              21,
              22,
              23,
              24
            ],
            "range": [
              0,
              59.86739980619357,
              116.37470065030473,
              169.71049039603784,
              220.052772283627,
              267.5695589991032,
              312.4194334010161,
              354.7520777759817,
              394.7087733894009,
              432.4228719985489,
              468.02024090166776,
              501.61968300837583,
              533.3333333333333,
              563.26703323643,
              591.5206836584857,
              618.1885785313522,
              643.3597194751469,
              667.118112832885,
              689.5430500338413,
              710.7093722213242,
              730.6877200280339,
              749.5447693326078,
              767.3434537841673,
              784.1431748375212,
              800
            ]
          }
        },
        "y": {
          "field": "string",
          "type": "ordinal",
          "axis": {
            "labelExpr": "[null, 'e', 'B', 'G', 'D', 'A', 'E'][datum.value]"
          },
          "scale": {"padding": 0}
        },
        "opacity": {
          "value": 0,
          "condition": [
            {
              "test": "datum.fret == selected_fret && datum.string == selected_string",
              "value": 1
            }
          ]
        }
      }
    }
  ]
}