yosiasz/chords.csv

## chords.csv

          
            chordname
            fingering
            fret

            
              A7sus4
              002030
              1

            
              A
              x02220
              1

            
              A#
              x13331
              1

            
              A#4
              xx3341
              1

            
              A#7
              xx1112
              3

            
              A#dim
              xx2323
              1

            
              A#m
              x13321
              1

            
              A#m7
              x13121
              1

            
              A#maj7
              x1323x
              1

            
              A+
              x03221
              1

            
              A/D
              xx0022
              1

            
              A/F#
              202220
              1

            
              A/G#
              402220
              1

            
              A11
              x42433
              1

            
              A13
              x01231
              5

            
              A4
              002200
              1

            
              A6
              xx2222
              1

## index.html
<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]);

        var markerGroup = block.append("g").classed("markers",true);
        markers = markerGroup.selectAll("circle").data(data.strings,function(d,i){return i;});

        markers.enter().append("circle")
                      .attr("cx",function(d,i){
                              return stringScale(i);
                      })
                      .attr("cy",function(d,i){
                              return fretScale(d.marker);
                      })
                      .attr("r",function(d,i){
                              if(d.marker == 0) {return 0;}
                              return 10;
                      })
                      .style("stroke","red");

      }
    </script>
  </body>
</html>
chordname	fingering	fret
A7sus4	002030	1
A	x02220	1
A#	x13331	1
A#4	xx3341	1
A#7	xx1112	3
A#dim	xx2323	1
A#m	x13321	1
A#m7	x13121	1
A#maj7	x1323x	1
A+	x03221	1
A/D	xx0022	1
A/F#	202220	1
A/G#	402220	1
A11	x42433	1
A13	x01231	5
A4	002200	1
A6	xx2222	1
	<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]);

	var markerGroup = block.append("g").classed("markers",true);
	markers = markerGroup.selectAll("circle").data(data.strings,function(d,i){return i;});

	markers.enter().append("circle")
	.attr("cx",function(d,i){
	return stringScale(i);
	})
	.attr("cy",function(d,i){
	return fretScale(d.marker);
	})
	.attr("r",function(d,i){
	if(d.marker == 0) {return 0;}
	return 10;
	})
	.style("stroke","red");

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