Selected tonality:

Selected tone is .

Harmonic diagram

var diagram = [[
    { 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 id="diagram_F" class="harmonic-diagram"></div>
 
<div id="diagram_F" class="harmonic-diagram transposable"></div>
A#

Harmonic functions + degrees + chords: tone

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

Harmonic functions + degrees + colored chords: tone%

<div id="diagram_F" class="harmonic-diagram">Bb%</div>
Bb%
 
<div id="diagram_F" class="harmonic-diagram transposable">Bb%</div>
A%

Only harmonic functions: @

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

Harmonic functions + degrees: !

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

Harmonic functions + degrees + signatures: $

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

Harmonic functions + degrees + colored signatures: $%

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