Skip to content

Instantly share code, notes, and snippets.

@traviskaufman

traviskaufman/spec.json

Created September 21, 2024 23:08
Show Gist options
  • Save traviskaufman/9ef4ab6905d6967ec7092a38d0c7ec62 to your computer and use it in GitHub Desktop.
Save traviskaufman/9ef4ab6905d6967ec7092a38d0c7ec62 to your computer and use it in GitHub Desktop.
Download ZIP
Guitar3
Raw
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,
"bind": {"input": "range", "min": 1, "max": 6, "step": 1}
},
{
"name": "selected_fret",
"value": 11,
"bind": {"input": "range", "min": 0, "max": 24, "step": 1}
}
],
"config": {
"title": {"color": "white"},
"axis": {
"grid": true,
"title": null,
"ticks": false,
"gridColor": "#bbb",
"domainColor": "#ccc",
"labelColor": "white",
"labelPadding": 15
}
},
"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
}
]
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment