Version w/ error: CFPB Credit Card Complaints in Indiana

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Indiana Credit Card Complaints by Company</title>
		<style type="text/css">
			
			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}
			
			h1 {
				font-family: Arial;
				font-size: 24px;
				margin: 0;
			}
			
			p {
				font-size: 14px;
				color: #9C9EA0;
				margin: 10px 0px 0px 0px;
			}

svg {
				background-color: white;
			}
			
			/*style for all lines*/
			path {
				stroke: gray;
				stroke-width: 0.5;
			}

/*style for highlighted lines*/
			g.highlight path {
				stroke: steelblue;
				stroke-width: 2;
			}
			
			/*style for axis*/
			.axis path,
			.axis line {
					fill: none;
					stroke: black;
					shape-rendering: crispEdges;
					}
			
			.y.axis path,
			.y.axis line {
					opacity: 0
			}
			
			.x.axis path,
			.x.axis line {
					opacity: 0
			}
			.y.axis text {
					font-family: Arial;
					font-size: 11px;
					}
					
			.x.axis text {
					font-family: Arial;
					font-size: 11px;
			}
			
					
		</style>
	</head>
	<body>
		<h1> Indiana Credit Card Complaints by Company </h1>
		<p> Provide Summary and source</p>
	<script src="https://d3js.org/d3.v3.js"></script>
	
	<script type="text/javascript">		
	
//establishes svg dimensions and padding
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left

//parsing data structure
var parseDate = d3.time.format("%x").parse;

//defining scale for x axis
var xScale = d3.time.scale()
    .range([ padding[3], w - padding[1] - padding[3] ]);

//defining scale for y axis
var yScale = d3.scale.linear()
    .range([ padding[0], h - padding[2] ]);

//defining orientation for x axis and establishing svg axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(15)
	.tickFormat(function(d) {
			return parseDate(d);
	});

//defining orientation of y axis and establishing svg axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

//defining path of line
var line = d3.svg.line()
    .x(function(d) { 
    	return xScale(parseDate(d.DateReceived)); 
    })
    .y(function(d, i) { 
    	return yScale(i); 
    	});

//placing svg html body and defining boundaries
var myChart = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
    .append("g")
    .attr("transform", "translate(" + padding[3] + "," + (padding[0]-20) + ")");
      
  //get the data
//d3.csv("https://data.consumerfinance.gov/resource/x94z-ydhh.csv?$order=date_received&state=IN&product=credit%20card",
		
d3.csv("INCreditCardComplaints.csv",
		function(error, data) {
  data.forEach(function(d,i) {
    d.DateReceived = parseDate(d.DateReceived);
    //d.total= ++total;
});

//creating nested array
    var bankData = d3.nest()
    	.key(function(d) { Company: return d.Company; })
    	.entries(data)
    	console.log("banks", bankData);

//scale the range of the data.  Need to set y domain as function of value.length(?) 
  xScale.domain(d3.extent(data, function(d) { return d.DateReceived;  }));
  yScale.domain(d3.extent(bankData, function(d) { return d.values.length; }));

//draws x axis
  myChart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (h - padding[2]) + ")")
      .call(xAxis)
    .append("text")
      .attr("x", 900)
      .attr("dy", "2.5em")
	  .style("text-anchor", "end")
      .text("Date received");

//draws y axis
  myChart.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + (padding[3]) + ",0)")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "-3em")
	  .style("text-anchor", "end")
      .text("Total Credit Card Complaints Received");

var groups = myChart.selectAll("g") 
            .data(bankData) //see: https://bost.ocks.org/mike/join/
          	.enter()
          	.append("g")
        	.attr("class", "companyNames")
        	.classed("highlight", function(d) {

if (d.Company == "JP Morgan Chase" ||
							d.Company == "Capital One") { //add more later
							return true;
						} else {
							return false;
						}

});

groups.append("title")
		.text(function(d) {
				return d.Company;
		});
  
  ///*//draws lines 
 groups.selectAll("path")
      .data(bankData)
      .enter()
	  .append("path")
      .attr("class", "line")
      .attr("d", function (d) { //console.log("key ", d.key);
          	 return line(d.values); })
      .attr("fill", "none")
	  .attr("stroke-width", 2);

/*//Create and append the options
for (var i = 0; i < bankData.length; i++) {
    var option = document.createElement("option");
    option.value = bankData[i].key;
    option.text = bankData[i].key;
    //bankSelectList.appendChild(option);
    }*/
    });

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

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

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