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; } #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 paddingvar w = 700;var h = 500;var padding = [ 25, 30, 75, 30 ]; //Top, right, bottom, left//parsing data structurevar parseDate = d3.time.format("%x");//defining scale for x axisvar xScale = d3.time.scale() .range([ padding[3], w - padding[1] - padding[3] ]);//defining scale for y axisvar yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]);//defining orientation for x axis and establishing svg axisvar xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(15) /*.tickFormat(function(d) { return parseDate(d); })*/;//defining orientation of y axis and establishing svg axisvar yAxis = d3.svg.axis() .scale(yScale) .orient("left");//defining line generatorvar 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 boundariesvar 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