D3 Examples - Version w/ error: CFPB Credit Card Complaints in Indiana

xxxxxxxxxx
 
<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>
​
​
​
    