DW Earth Time Jumps Horizontal Bar Chart in D3 - PRESORTED

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Doctor Who Earth Time Travel Journeys</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    
    
    <style type="text/css">
      body {
        background-color: #E0E1DD;
        margin: 0;
        font-family: Helvetica;
      }

rect {
        fill: #AC98DB;
      }

.barLabel {
        font-size: 12px;
        fill: #333333;
        text-anchor: end;
      }

.barValue {
        font-size: 12px;
        fill: #333333;
      }

h1, h2, p {
        position: relative;
        left: 10px;
        color: #333333;
      }

.hover rect {
        fill: #A5D867;
        transition: fill 0.2s;
      }

.hover text {
        font-weight: bold;
        font-size: 14px;
      }

</style>
  </head>
  <body>
  
    <script type="text/javascript">   
        
      var  margin = {top: 10, right: 10, bottom: 0, left: 5};

var body = d3.select('body');

body.append('h1')
        .text('Doctor Who Earth Time Travel Journeys')
      
       body.append('h2')
        .text('Hartnell (DW1) through Smith (DW11)')

body.append('p')
        .text('This is a test page to create a Horizontal Bar Chart and upload my Doctor Who CSV data using D3')
      
      
     //Create the SVG

var svg = d3.select('body').append('svg'),
          barHeight = 10,
          barSpace = 5
         
      
      svg.attr('width', 1000)
          .attr('height', 2000)
      
      
     
      //Load in contents of PRESORTED CSV file (can't get the sort descending fuction to work properly)
      
      d3.csv('Doctor Who EARTH Time Travel Journeys_LE_SortDesc.csv', function(data) {
        console.log(data);

svg.selectAll('g')
        .data(data)
        .enter()
        .append('g')
        
        
        
      //Create the Horizontal Bar chart

barGroup.append('text')
          .text(function(d) { return d.EpTitle; })
          .attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
          .attr('class', 'barLabel')
          .attr('x', 100)

barGroup.append('text')
          .attr('class', 'barValue')
          .attr('x', function(d) { return (d.TimeJumpYrs * 20) + 155; } )
          .attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
          .text(function(d) { return d.TimeJumpYrs  })
        
     
        //When cursor hovers over the Bar, the Bar will light up Lime Green and the Bar Labels go Boldface

barGroup.attr('cursor', 'pointer')
        barGroup.on('mouseover', function() { 
          d3.select(this)
            .classed('hover', true)
         })

barGroup.on('mouseout', function() { 
          d3.select(this)
            .classed('hover', false)
         })

});
    </script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js