v2 w/ errors: CFPB Credit Card Complaints

<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;
			}
			#header{
				padding: 10;
			}
			#mySVG {
				display: inline-block;
			}	
			#copy{
				height: 100%;
				width: 25%;
				padding: 10;
				vertical-align: top;
				display: inline-block;
			}
			
			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: 8;
			}

.line:hover {
				stroke: orange;
				stroke-width: 3px;
				opacity: 1;
			}
			
			/*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: 12px;
					}
					
			.x.axis text {
					font-family: Arial;
					font-size: 12px;
			}
			
					
		</style>
	</head>
	<body>
	<div id="container">
	<div id="header">
	<h1> Indiana Credit Card Complaints by Company </h1>
	</div>
	
		<div id="mySvg" align="left">
			<script src="https://d3js.org/d3.v3.js"></script>
			<script type="text/javascript">		
	
//establishes svg dimensions and padding
var w = 700;
var h = 500;
var padding = [ 25, 30, 75, 30 ]; //Top, right, bottom, left

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

//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 line generator
var line = d3.svg.line()
    .x (function(d,i) {
    	return xScale(d.DateReceived);
    })
    .y(function(d, i) { 
    	return yScale(i); 
    	});

//placing svg html body and defining boundaries
var myChart = d3.select("#mySvg")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	//.attr("style", "position:absolute; top: "+0"; left: "+0";")
    .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.parse(d.DateReceived);
    			//d["DateReceived"] = parseDate.parse(d["DateReceived"]);
});

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

//Set scale domains
				xScale.domain([ 
					d3.min(data, function(d) {
						return d.DateReceived;
						//return d["DateReceived"];
					}),
					d3.max(data, function(d) {
						return d.DateReceived;
						//return d["DateReceived"];
					})
				]);
//0 second so axis goes in correct direction
				yScale.domain([ 
					d3.max(bankData, function(d) {
						return d.values.length;
						})
					,
					0
				]);

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

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

//creates group for each company
 var groups = myChart.selectAll("g") 
            .data(bankData) //see: https://bost.ocks.org/mike/join/
          	.enter()
          	.append("g")
        	.classed("highlight", function(d) {

if (d.Company == "Citibank" ||
							d.Company == "Capital One" ||
							d.Company == "JPMorgan Chase" ||
							d.Company == "Fifth Third Bank" ||
							d.Company == "Barclays" ||
							d.Company == "Bank of America" ||
							d.Company == "GE Capital Retail" ||
							d.Company == "PNC Bank" ||
							d.Company == "HSBC" ||
							d.Company == "Wells Fargo" ||
							d.Company == "Amex" ||
							d.Company == "U.S. Bancorp" ||
							d.Company == "BB&T Financial") {
							return true;
						} else {
							return false;
						}

});

//adds title to each group with each company (working tooltip)
	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) { 
          	 return line(d.values); })
      .attr("fill", "none")
	  .attr("stroke-width", 2);	
    });

</script>
			</div>
		<div id="copy" >
			<p> The Consumer Financial Protection Bureau (CFPB) accepts consumer complaints on several 
		financial products and makes the data available to the public on <a href="https://www.consumerfinance.gov/complaintdatabase/" target="_blank">consumerfinance.gov</a>.
		This chart tracks credit card complaints by company from Indiana recorded in the public complaint database.
		The highlighted lines represent companies that have been deemed Systemically Important Financial Institutions (SIFIs)
		by the US government due to the size and diversity of their financial business. For more information on
		SIFIs, see <a href="https://www.financialstabilityboard.org/wp-content/uploads/r_121031ac.pdf?" target="_blank">this report</a> from the Financial Stability Board and
		see the Federal Reserve's <a href="https://www.federalreserve.gov/newsevents/press/bcreg/ccar_20140326.pdf" target="_blank">
		“Comprehensive Capital Analysis and Review 2014: Assessment Framework and Results,”</a> issued March 2014, for a full list of US SIFIs.</p>
		</div>
	</div>
</body>
</html>

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

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