Guitar Chords

<html>
  <head>
    <script src="https://d3js.org/d3.v4.0.0-alpha.40.min.js"></script>
    <script src="https://d3js.org/d3-scale.v1.min.js"></script>
  </head>
  <body>
    <svg id=block></svg><P>
    <script>
      var dataset;  //Global variable
      var max = 10, data = [];

d3.csv("chords.csv", drawChords);
        
      function drawChords(err, data){
        dataset = data.map(d => ({ name: d.chordname, strings: d.fingering.split("").map((s) => ( {marker: s} ) )} ));
        var data = dataset[0];

var height = 100;
        var width  = 100;

//```
        
        var block = d3.select("#block")
                          .attr("width",width+50)
                          .attr("height",height+50)
                          .append("g")
                          .attr("transform","translate(25,25)");
        var grid = block.append("g");             
        
        for(var i=0;i<data.strings.length;i++){
          var xSpacing = width / (data.strings.length-1);
          grid.append("line")
              .attr("x1",i*xSpacing)
              .attr("y1",0)
              .attr("x2",i*xSpacing)
              .attr("y2",height)
              .style("stroke","black");
        }
        var frets = d3.max(data.strings,function(d){return d.marker;});
        for(var i=0;i<=frets;i++){
          var ySpacing = height / frets;
          grid.append("line")
              .attr("x1",0)
              .attr("y1",i*ySpacing)
              .attr("x2",width)
              .attr("y2",i*ySpacing)
              .style("stroke","black");
        }

var stringScale = d3.scaleLinear()
                            .domain([0,data.strings.length-1])
                            .range([0,width]);
        var fretScale = d3.scaleLinear()
                            .domain([0,frets])
                            .range([0-height/frets/2,height-height/frets/2]);

}        
    </script>
  </body>
</html>

https://d3js.org/d3.v4.0.0-alpha.40.min.js

https://d3js.org/d3-scale.v1.min.js