Dynamically draw guitar chords
So my goal is to draw such guitar chords using a json file, and the number of chords I should be creating is 924, so I can’t do it manually. 
I
have a comma-separated array of numbers (look at position) and I definitely don’t use fingering (this is the finger you should be using, basically it’s the number at the top of the circle).
[
{
"id": "404",
"name": "Cb",
"intervals": "",
"positions": [
{
"id": "1226",
"position": "x,2,4,4,4,2",
"fingerings": "13331; 12341",
"picture": "",
"chord_id": "404",
"instrument_id": "1"
},
{
"id": "1231",
"position": "7,9,9,8,7,7",
"fingerings": "134211",
"picture": "",
"chord_id": "404",
"instrument_id": "1"
},
{
"id": "1251",
"position": "7,6,4,4,4,7",
"fingerings": "321114",
"picture": "",
"chord_id": "404",
"instrument_id": "1"
},
...
It’s challenging because each chord has multiple positions, some of which are on the 5th fret or more, so I should indicate which fret we are drawing instead of drawing a whole guitar each time.
The second problem is that I don’t know where I should start and how to handle it properly, I’d love to implement everything in React or Python and then generate a bunch of imgs and use them in my app, that’s how comfortable I’m comfortable with. I’m also thinking about js and css, but actually how can I write code that places a circle in a specific place based on a number.
I’m not looking for code, just looking for some links where I can start researching, now I’m a bit stuck, let me know if you need more information.
Solution
This may not be the answer you are expecting because I don’t know anything about guitars and guitar chords. Please take a look.
const SVG_NS = 'http://www.w3.org/2000/svg';
let json = [
{
"id": "404",
"name": "Cb",
"intervals": "",
"positions": [
{
"id": "1226",
"position": "x,2,4,4,4,2",
"fingerings": "13331; 12341",
"picture": "",
"chord_id": "404",
"instrument_id": "1"
},
{
"id": "1231",
"position": "7,9,9,8,7,7",
"fingerings": "134211",
"picture": "",
"chord_id": "404",
"instrument_id": "1"
},
{
"id": "1251",
"position": "7,6,4,4,4,7",
"fingerings": "321114",
"picture": "",
"chord_id": "404",
"instrument_id": "1"
}
]
}
]
for(let j = 0; j < json[0].positions.length; j++){
let position = json[0].positions[j].position.replace("x","").split(",");
let min = Math.min.apply(null, position);
let displacement = min < 1 ? 1 : min;
let svg = drawSVGElement("svg", {viewBox:"0 0 70 60"}, wrap);
drawGrid();
for(let i = 0; i < position.length; i++ ){
if(parseInt(position[i]) > 0){
let cp = {// circle position
x : 10 + parseInt(i) * 10,
y : 15 + (position[i] - displacement)*10
}
drawSVGElement("circle",{cx:cp.x,cy:cp.y,r:4}, svg)
}
}
function drawGrid(){
let d = "";
for(let i = 1; i < 6; i++){
d+=`M10,${i*10}H60`
}
for(let i = 1; i < 7; i++){
d+=`M${i*10},10V50`
}
let path = drawSVGElement("path",{"d": d}, svg);
}
function drawSVGElement(tag, o, parent) {
var svgElement = document.createElementNS(SVG_NS, tag);
for (let name in o) {
if (o.hasOwnProperty(name)) {
svgElement.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(svgElement);
return svgElement;
}
}svg{border:1px solid; max-height:100vh; }
path{fill:none; stroke:red; stroke-linecap: round}<pre class=”snippet-code-html lang-html prettyprint-override”><div id="wrap"></div>