Skip to content

Instantly share code, notes, and snippets.

@emilyw15

emilyw15/.block

Last active October 26, 2017 01:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emilyw15/4fe109b3c8eebc1996bcae158b7aab89 to your computer and use it in GitHub Desktop.
Save emilyw15/4fe109b3c8eebc1996bcae158b7aab89 to your computer and use it in GitHub Desktop.
Download ZIP
2016 CFPB Complaints with Zoom
Raw
.block
license: mit
Raw
.index.html.swp
b0VIM 8.0#:�YrR"Bcurranneon~curran/topInternetViz/index.html 3210#"! Utppyad0 p�����S��������oX?� � � � � � � ` S R - � � { z V /  � � � i �
�
�
�
~
W
2

� � � � z N $
�����hGF. ����~e!�����ih@%�����qXW.
���`ED( ���q% .a .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', ' .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr( .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .selectAll('.cell text') .att yAxisG.call yAxisG.call(yAxis); xAxisG.call(xAxis); .attr('r', 8); .attr('fill-opacity', 0.6) .attr('fill', 'black') .attr('cy', d => yScale(yValue(d))) .attr('cx', d => xScale(xValue(d))) .enter().append('circle') g.selectAll('circle').data(data) .nice(yTicks); .range([innerHeight, 0]) .domain(d3.extent(data, yValue)) yScale .range([0, innerWidth]); .domain(data.map(xValue)) xScale data = top5(data); d3.csv('data.csv', row, data => { const top5 = data => data.slice(0, 5); }; }; netUsers: +netUsersWithCommas.replace(/,/g, '') country: d['Country or Region'], return { const netUsersWithCommas = d['Internet Users 31 Mar 2017']; const row = d => { .tickSize(-innerWidth); .tickFormat(d3.format('.0s')) .tickPadding(15) .ticks(yTicks) .scale(yScale) const yAxis = d3.axisLeft() const yTicks = 5; .tickSize(-innerHeight); .tickPadding(15) .scale(xScale) const xAxis = d3.axisBottom() const yScale = d3.scaleLinear(); const xScale = d3.scalePoint(); .text(yLabel); .style('text-anchor', 'middle') .attr('transform', `rotate(-90)`) .attr('y', -100) .attr('x', -innerHeight / 2) .attr('class', 'axis-label') yAxisG.append('text') .text(xLabel); .attr('y', 90) .attr('x', innerWidth / 2) .attr('class', 'axis-label') xAxisG.append('text') const yAxisG = g.append('g'); .attr('transform', `translate(0, ${innerHeight})`); const xAxisG = g.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const g = svg.append('g') const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const height = svg.attr('height'); const width = svg.attr('width'); const svg = d3.select('svg'); const margin = { left: 150, right: 70, top: 20, bottom: 110 }; const yLabel = 'Internet Users'; const yValue = d => d.netUsers; const xLabel = 'Country'; const xValue = d => d.country; <script> <svg width="960" height="500"></svg> <body> </head> </style> } font-family: sans-serif; font-size: 40pt; fill: #635F5D; .axis-label { } font-family: sans-serif; font-size: 20pt; fill: #8E8883; .tick text { } stroke: #C0C0BB; .tick line { } display: none; .domain { } margin: 0px; body { <style> <title>Top Internet Countries Visualization</title> <script src="https://d3js.org/d3.v4.min.js"></script> <meta name="viewport" content="width=device-width"> <meta charset="utf-8"> <head><html><!DOCTYPE html>ad������</html> </body> </script> });
Raw
README.md

This is a scatter plot of number of complaints by product the CFPB recieved in 2016. The x-axis is month, the y-axis is the complaint count, and the color of the point is the product that the complaint was about. The user can zoom in on the points to see the overlapping points better.

This data is from part of the Data.gov: Consumer Complaint Database. The data shown in the plot is only 2016.

This scatter plot was forked from curran's block: Scatter Plot with Ordinal Axis and Responding to Resize

forked from emilyw15's block: 2017 MTA Average Ridership

Raw
cfpb_2016.csv
Month product Count
Jan Bank account or service 1663
Jan Consumer Loan 686
Jan Credit card 1572
Jan Credit reporting 2758
Jan Debt collection 2926
Jan Money transfers 134
Jan Mortgage 3486
Jan Other financial service 34
Jan Payday loan 133
Jan Prepaid card 117
Jan Student loan 333
Feb Bank account or service 1388
Feb Consumer Loan 760
Feb Credit card 1563
Feb Credit reporting 3039
Feb Debt collection 3229
Feb Money transfers 139
Feb Mortgage 3439
Feb Other financial service 36
Feb Payday loan 102
Feb Prepaid card 76
Feb Student loan 376
Mar Bank account or service 1539
Mar Consumer Loan 763
Mar Credit card 1620
Mar Credit reporting 4042
Mar Debt collection 3527
Mar Money transfers 131
Mar Mortgage 3896
Mar Other financial service 44
Mar Payday loan 116
Mar Prepaid card 121
Mar Student loan 817
Mar Virtual currency 2
Apr Bank account or service 1396
Apr Consumer Loan 789
Apr Credit card 1584
Apr Credit reporting 3765
Apr Debt collection 3244
Apr Money transfers 127
Apr Mortgage 3517
Apr Other financial service 42
Apr Payday loan 128
Apr Prepaid card 91
Apr Student loan 926
May Bank account or service 1687
May Consumer Loan 778
May Credit card 1573
May Credit reporting 3825
May Debt collection 3067
May Money transfers 143
May Mortgage 3480
May Other financial service 20
May Payday loan 125
May Prepaid card 113
May Student loan 710
Jun Bank account or service 1990
Jun Consumer Loan 773
Jun Credit card 1566
Jun Credit reporting 3902
Jun Debt collection 3239
Jun Money transfers 128
Jun Mortgage 3511
Jun Other financial service 59
Jun Payday loan 146
Jun Prepaid card 118
Jun Student loan 637
Jun Virtual currency 2
Jul Bank account or service 1848
Jul Consumer Loan 789
Jul Credit card 1760
Jul Credit reporting 4396
Jul Debt collection 3021
Jul Money transfers 108
Jul Mortgage 3186
Jul Other financial service 22
Jul Payday loan 119
Jul Prepaid card 102
Jul Student loan 693
Aug Bank account or service 2003
Aug Consumer Loan 844
Aug Credit card 2021
Aug Credit reporting 3946
Aug Debt collection 4166
Aug Money transfers 153
Aug Mortgage 3488
Aug Other financial service 47
Aug Payday loan 151
Aug Prepaid card 109
Aug Student loan 769
Sep Bank account or service 2422
Sep Consumer Loan 874
Sep Credit card 2189
Sep Credit reporting 3621
Sep Debt collection 3538
Sep Money transfers 141
Sep Mortgage 3680
Sep Other financial service 36
Sep Payday loan 141
Sep Prepaid card 92
Sep Student loan 853
Oct Bank account or service 2188
Oct Consumer Loan 944
Oct Credit card 2064
Oct Credit reporting 4333
Oct Debt collection 3580
Oct Money transfers 125
Oct Mortgage 3544
Oct Other financial service 43
Oct Payday loan 158
Oct Prepaid card 96
Oct Student loan 745
Oct Virtual currency 2
Nov Bank account or service 1852
Nov Consumer Loan 768
Nov Credit card 1731
Nov Credit reporting 3277
Nov Debt collection 3290
Nov Money transfers 130
Nov Mortgage 3191
Nov Other financial service 46
Nov Payday loan 141
Nov Prepaid card 101
Nov Student loan 681
Nov Virtual currency 1
Dec Bank account or service 1873
Dec Consumer Loan 834
Dec Credit card 1823
Dec Credit reporting 3177
Dec Debt collection 3669
Dec Money transfers 108
Dec Mortgage 3053
Dec Other financial service 37
Dec Payday loan 107
Dec Prepaid card 114
Dec Student loan 547
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<title>2017 Average Commuter Ridership in Maryland</title>
<style>
body {
margin: 0px;
}
.domain {
display: none;
}
.tick line {
stroke: #C0C0BB;
}
.tick text, .legendCells text {
fill: #8E8883;
font-size: 12pt;
font-family: sans-serif;
}
.axis-label, .legend-label {
fill: #635F5D;
font-size: 15pt;
font-family: sans-serif;
}
#chart {
position: fixed;
left:0px;
right:0px;
top:0px;
bottom:0px;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<div id = "chart"></div>
<script>
const xValue = d => d.Month;
const xLabel = 'Month';
const yValue = d => d.Count;
const yLabel = 'Average Ridership';
const colorValue = d => d.product;
const colorLabel = 'Type';
const margin = { left: 100, right: 250, top: 20, bottom: 120 };
const row = d => {
d.Month = d['Month']
d.Count = +d.Count
return d;
};
var chartDiv = document.getElementById("chart")
var svg = d3.select(chartDiv).append("svg")
.attr("width","100%")
.attr("height","100%")
.call(d3.zoom().on("zoom",function() {
svg.attr("transform",d3.event.transform)
}));
const xScale = d3.scalePoint();
const yScale = d3.scaleLinear();
const colorScale = d3.scaleOrdinal()
.range(d3.schemeCategory20);
const colorLegend = d3.legendColor()
.scale(colorScale)
.shape('circle');
const g = svg.append('g');
const datag = g.append('g');
const xAxisG = g.append('g');
const xText = xAxisG.append('text')
.attr('class','axis-label')
const yAxisG = g.append('g');
const yText = yAxisG.append('text')
.attr('class','axis-label')
const colorLegendG = g.append('g')
function redraw() {
var width = chartDiv.clientWidth;
var height = chartDiv.clientHeight;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
svg
.attr("width",width)
.attr("height",height);
g.attr('transform', `translate(${margin.left},${margin.top})`);
xAxisG
.attr('transform', `translate(0, ${innerHeight})`);
xText
.attr('x', innerWidth/2)
.attr('y',70)
.text(xLabel);
yText
.attr('x',-innerHeight/2)
.attr('y',-75)
.attr('transform',`rotate(-90)`)
.style('text-anchor','middle')
.text(yLabel)
colorLegendG.attr('transform', `translate(${innerWidth + 60}, 150)`);
const xAxis = d3.axisBottom()
.scale(xScale)
.tickPadding(15)
.tickSize(-innerHeight);
const yTicks = 5;
const yAxis = d3.axisLeft()
.scale(yScale)
.ticks(yTicks)
.tickPadding(15)
.tickSize(-innerWidth);
d3.csv('cfpb_2016.csv', row, data => {
xScale
.domain(data.map(xValue))
.range([0, innerWidth]);
yScale
.domain(d3.extent(data, yValue))
.range([innerHeight, 0])
.nice(yTicks);
var circles = datag.selectAll('circle').data(data)
circles
.enter()
.append('circle')
.attr('fill-opacity', 0.6)
.merge(circles)
.attr('cx', d => xScale(xValue(d)))
.attr('cy', d => yScale(yValue(d)))
.attr('fill', d => colorScale(colorValue(d)))
.attr('r', 8);
xAxisG.call(xAxis);
yAxisG.call(yAxis);
colorLegendG.call(colorLegend)
.selectAll('.cell text')
.attr('dy', '0.1em');
});
}
redraw();
window.addEventListener("resize",redraw);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment