D3 Examples - location-importance

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    path {fill:none; stroke:black;}
  </style>
</head>
​
<body> 
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg").append('g')
        .attr('transform', 'translate(50,50)')
​
    d3.csv("TnCStatements_rank_update2.csv", function(obj) {
      obj.norm_location = +obj.norm_location
      obj.norm_rank = +obj.norm_rank
      obj.norm_score = +obj.norm_score
      obj.rank = +obj.rank 
      obj.score = +obj.score
      return obj;
    },function(err, data) { 
      console.log(d3.keys(data[0]))
        
      var nestedData = d3.nest()
        .key(function(d) { return d.co; })
        .entries(data);
      nestedData.map(calculateRelativePosition)
      console.log(nestedData);
      
      nestedData = nestedData.map(function(d) {
        d.values = d.values.sort(function(a,b) {
          return a.statementWidth - b.statementWidth;
        });
        return d
      });
      
      var scaleX = d3.scale.linear()
        .domain([0,3500])
        .range([0,700])
    
      var scaleY = d3.scale.linear()
        .domain([0,1])
        .range([0,50])
​
      var axes = svg.append('g'); 
      var body = svg.append('g');
​
      var linegenerator = d3.svg.line()
        .x(function(d) { return scaleX(d.wordPositionStartRel)})
        .y(function(d) { return scaleY(d.norm_rank)})
      
      var color = d3.scale.category10();
​
      var terms = body.selectAll('path')
        .data(nestedData)
        .enter()
        .append('g')
        .attr('transform', function(d,i) { return 'translate(0,'+i*80+')'})
      
      var rects = terms.selectAll('rect')
        .data(function(d) { return d.values })
        .enter()
        .append('rect')
        .attr({
            height: function(d) {return scaleY(1) - scaleY(d.norm_rank)},
            width: 5, //function(d) {return scaleX(d.statementWidth)},
            x: function(d,i) {return i*5}, //{return scaleX(d.wordPositionStart)},
            y: function(d) {return scaleY(d.norm_rank) }
          })
        
​
    })
    
    function calculateRelativePosition(coArray) { 
      var totalWords = 0;
      coArray.values.map(function(statement) {
        statement.wordPositionStart = totalWords;
        totalWords += statement.text.split(" ").length;
      })
      coArray.values.map(function(statement) {
        statement.wordPositionStartRel = statement.wordPositionStart / totalWords;
        statement.statementWidthRel = statement.text.split(' ').length / totalWords;
        statement.statementWidth = statement.text.split(' ').length;
      })
    }
    
    
    
    
    
  </script>
</body>
​
    