| license: mit |
Creating a donut graph to show the percent of complaints to the Consumer Finance Protection Bureau with an issue of "Incorrect information on credit report" in Indiana.
This is related to Last Week Tonight's piece on Credit Reports.
Resources:
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .title { | |
| font: bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| text-anchor: left; | |
| } | |
| .bar path { | |
| shape-rendering: crispEdges; | |
| } | |
| .label { | |
| font: 32px sans-serif; | |
| font-weight: bold; | |
| text-anchor: middle; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var cfpb_query = "https://data.consumerfinance.gov/resource/jhzv-w97w.json?product=Credit%20reporting&state=IN" | |
| var width = 960, | |
| height = 500, | |
| margin = 60, | |
| radius = Math.min(width, height) / 2; | |
| var arc = d3.svg.arc() | |
| .outerRadius(radius - margin) | |
| .innerRadius((radius - margin) / 2); | |
| var pie = d3.layout.pie() | |
| .sort(null) | |
| .value(function(d) { return d.complaints.length; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| svg.append("text") | |
| .attr("class", "title") | |
| .attr("x", -200) | |
| .attr("y", -200) | |
| .text("Indiana CFPB Complaints Due to Incorrect Information"); | |
| d3.json(cfpb_query, function(error, data) { | |
| if (error) throw error; | |
| var g = svg.selectAll(".arc") | |
| .data(pie(group_by_issue(data))) | |
| .enter().append("g") | |
| .attr("class", "arc"); | |
| g.append("path") | |
| .attr("d", arc) | |
| .style("fill", function(d) { return (d.data.issue === "Incorrect information on credit report") ? "#0094FF" : "#FF0808" }); | |
| var label = svg.append("text") | |
| .attr("class", "label"); | |
| label.append("tspan") | |
| .attr("class", "label-count") | |
| .attr("x", 0) | |
| .attr("dy", "-.2em") | |
| .text(function(d) { return "720 of 1000" }); | |
| label.append("tspan") | |
| .attr("class", "label-pct") | |
| .attr("x", 0) | |
| .attr("dy", "1.1em") | |
| .text(function(d) { return "72%" }); | |
| }); | |
| function group_by_issue(data) { | |
| var groupings = data.reduce( function(grouping, datum) { | |
| var key = datum.issue; | |
| grouping[key] = grouping[key] || {}; | |
| grouping[key]['complaints'] = grouping[key]['complaints'] || []; | |
| grouping[key]['issue'] = key; | |
| grouping[key]['complaints'].push(datum); | |
| return grouping; | |
| }, {}); | |
| var result = Object.keys(groupings).map( function (k) { return groupings[k]; }); | |
| console.log(result); | |
| return result; | |
| } | |
| </script> | |
| </body> |
