This post is a small example that uses d3.js to dynamically shows different music scales.
The following buttons allow you to switch from a music scale to the other and to rotate the notes.
Some words about the implementation
The graphics is composed of 12 SVG groups; one per note. Each SVG group is composed of an arc and a text.
Ordinals are used to store data:
- one containing the colors that are used to fill the arcs
- one containing the notes that are used to set the text contents
- one for each music scale; they are used to change the opacity of each SVG group
When the reset button is clicked, an offset is incremented and the color and the text of each SVG group are changed:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
When one of the scale button is clicked, the opacity of each SVG group is changed based on the ordinal of the selected scale.
1 2 3 4 5 6 7