D3 Examples - Ramones song catalog

xxxxxxxxxx
 
​
<!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>
​
<body>
  <div id="wrapper">
    <div id="chart">
    </div>
  </div>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
​
  <script type="text/javascript">
​
  // 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>
​
    