Ramones song catalog - visualization

<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ramones Songs</title>

<style>

.axis text {
            font: 10px sans-serif;
        }

.axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

</style>

</head>

// globals

var margin = {top: 40, right: 20, bottom: 30, left: 50},
          width = 800 - margin.left - margin.right,
          height = 3900 - margin.top - margin.bottom;

var xoffset = 230;
  var yaxis_offset = width-50;

var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          ;

var xscale = d3.scale.ordinal()
          .rangeBands([xoffset+2, yaxis_offset+440])
          .domain(['song', 'chords'])

var yscale = {};
  yscale['chords'] =
          d3.scale.linear()
                  .range([height, 0])
                  .domain([0, 5]);

yscale['song'] =
          d3.scale.ordinal()
                  .rangeRoundBands([0, height], .1)
                  ;

var line = d3.svg.line()
          .interpolate('linear')
          .x(function(d) {
            return d.x;
          })
          .y(function(d) {
            return d.y;
          });

var chord_axis = d3.svg.axis()
                  .orient('right')
                  .scale(yscale['chords'])
                  .ticks(6)
  ;

var xaxis = d3.svg.axis().orient('top').scale(xscale);

/******************************/
    d3.csv('ramones.csv', function(data) {

var songs = _.map(data, function(d) {
        return d.song;
      });

yscale['song']
              .domain(songs);

var proc_data = _.map(data, function(d) {
          return {
              k: d.song,
              val: [
                  {x: xscale('song'), y:yscale['song'](d.song)},
                  {x: xscale('chords'), y:yscale['chords'](d.chords)}
                      ]
           };
      });

svg.selectAll('.song-names')
            .data(data)
            .enter()
            .append('text')
            .attr('class', 'song-names')
            .text(function(d) {
              return d.song;
            })
            .style('font-size', 8)
            .style('font-family', "Helvetica; Arial; sans-serif")
        //.style('font-weight', 'bold')
            .style('fill', '#333333')
            .attr('text-anchor', 'end')
            .attr('x', xoffset)
            .attr('y', function(d) {
              //console.log('song', d.song, yscale['song'](d.song));
              return yscale['song'](d.song);
            })
      ;

svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + (width-50) + ",0)")
                .call(chord_axis);

var song_lines = svg.selectAll('.song-line')
                        .data(proc_data)
                        .enter()
                        .append('g')
                        .attr('class', 'song-line')
                ;

var song_line = song_lines.append('path')
                        .attr('class', 'line')
                        .attr('d', function(d) {
                            console.log('line d', d, d.val);
                            return line(d.val);
                        })
                        .style('stroke', '#222222')
                        .style('stroke-width', 1)
                ;

})

svg.append('text')
            .text('Song Name')
            .attr('x', 230)
            .attr('y', 30)
            .style('font-size', 18)
            .attr('text-anchor', 'middle')
    ;

svg.append('text')
          .text('Chords')
          .attr('x', 630)
          .attr('y', 30)
          .style('font-size', 18)
          .attr('text-anchor', 'middle')
  ;

svg.append('text')
              .text('RAMONES SONG CATALOG')
              .attr('x', 430)
              .attr('y', 5)
              .style('font-size', 18)
              .attr('text-anchor', 'middle')
      ;

</script>

</body>
    </html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js