Harmonic diagram

... is
[
    { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "right",
      links: [{from:"right", to:"left", x:1, y:0, color:"gray"}]},
    { interval: "M2", signature: "°", degree:"II", fn: "SD", pins: "left+right",
      links: [{from:"right", to:"left", x:1, y:0, color:"black"}]},
    { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right",
      links: [{from:"right", to:"left", x:1, y:0, color:"red"}]},
    { interval: "P1", signature: "m7",  degree:"I", fn: "T", pins: "left" }
]

non-transposable	transposable

Harmonic functions + degrees + chords: nothing

<div class="harmonic-diagram">
    ...
</div>

[ { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "right", links: [{from:"right", to:"left", x:1, y:0, color:"gray"}]}, { interval: "M2", signature: "°", degree:"II", fn: "SD", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"black"}]}, { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"red"}]}, { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "left" } ]

<div class="harmonic-diagram transposable">
    ...
</div>

Harmonic functions + degrees + chords: tone

<div class="harmonic-diagram">A#
    ...
</div>

A# [ { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "right", links: [{from:"right", to:"left", x:1, y:0, color:"gray"}]}, { interval: "M2", signature: "°", degree:"II", fn: "SD", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"black"}]}, { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"red"}]}, { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "left" } ]

<div class="harmonic-diagram transposable">A#
    ...
</div>

Harmonic functions + degrees + colored chords: tone%

<div class="harmonic-diagram">Bb%
    ...
</div>

Bb% [ { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "right", links: [{from:"right", to:"left", x:1, y:0, color:"gray"}]}, { interval: "M2", signature: "°", degree:"II", fn: "SD", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"black"}]}, { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"red"}]}, { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "left" } ]

<div class="harmonic-diagram transposable">Bb%
    ...
</div>

Only harmonic functions: @

<div class="harmonic-diagram">@
    ...
</div>

@ [ { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "right", links: [{from:"right", to:"left", x:1, y:0, color:"gray"}]}, { interval: "M2", signature: "°", degree:"II", fn: "SD", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"black"}]}, { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"red"}]}, { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "left" } ]

<div class="harmonic-diagram transposable">@
    ...
</div>

Harmonic functions + degrees: !

<div class="harmonic-diagram">!
    ...
</div>

! [ { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "right", links: [{from:"right", to:"left", x:1, y:0, color:"gray"}]}, { interval: "M2", signature: "°", degree:"II", fn: "SD", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"black"}]}, { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"red"}]}, { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "left" } ]

<div class="harmonic-diagram transposable">!
    ...
</div>

Harmonic functions + degrees + signatures: $

<div class="harmonic-diagram">$
    ...
</div>

$ [ { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "right", links: [{from:"right", to:"left", x:1, y:0, color:"gray"}]}, { interval: "M2", signature: "°", degree:"II", fn: "SD", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"black"}]}, { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"red"}]}, { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "left" } ]

<div class="harmonic-diagram transposable">$
    ...
</div>

Harmonic functions + degrees + colored signatures: $%

<div class="harmonic-diagram">$%
    ...
</div>

$% [ { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "right", links: [{from:"right", to:"left", x:1, y:0, color:"gray"}]}, { interval: "M2", signature: "°", degree:"II", fn: "SD", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"black"}]}, { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right", links: [{from:"right", to:"left", x:1, y:0, color:"red"}]}, { interval: "P1", signature: "m7", degree:"I", fn: "T", pins: "left" } ]

<div class="harmonic-diagram transposable">$%
    ...
</div>