|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<link rel="stylesheet" href="http://rawgit.com/MasterMaps/d3-slider/master/d3.slider.css" /> |
|
<link rel="stylesheet" href="main.css" /> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="https://d3js.org/d3-queue.v3.min.js"></script> |
|
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> |
|
<script src="http://raw.githack.com/lukius/d3.slider/master/d3.slider.js"></script> |
|
<script src="helper.js"></script> |
|
</head> |
|
<body> |
|
<h1><span id="slider3text">2006</span> Prosper Originations (in $) By State </h1> |
|
<h4>Try the slider below the map for to see the originations for other years from 2006-2014.</h4> |
|
<div id="wrapper"> |
|
<div id="map"></div> |
|
<div id="slider"></div> |
|
<br> |
|
<p>Prosper loans originations seem to increase across the US states over time, except for a dip during 2009 (due to the temporary halting of the loan business). As of 2013, there are no loans in North Dakota, Iowa and Maine. In previous years (e.g. 2008), there were loan originations in these states. In fact, according to this source (http://www.lendingmemo.com/lending-club-and-prosper-states/), 3 states are not open to p2p lending: North Dakota, Iowa and Maine. So, legislation has actually closed these states off from certain lending marketplaces. Aside from this, we can see that California, Texas, New York and Florida are the hotbeds of loan originations. It’s no coincidence that these states also have the highest electoral counts. This is probably more so a testament to the large populations of these states, rather than the level of “p2p lending interest” in these regions (compared to others). |
|
</p> |
|
</div> |
|
<script type="text/javascript"> |
|
|
|
var margin = 0, |
|
width = 980 - margin; |
|
height = 540 - margin; |
|
|
|
var projection = d3.geo.albersUsa() |
|
.translate([width/2, height/2]) |
|
.scale([1000]); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svg = d3.select("#map") |
|
.append("svg") |
|
.attr("width", width + margin) |
|
.attr("height", height + margin); |
|
|
|
//Set color scheme based on loan origination values. Create 8 buckets based on values. |
|
var color_domain = [0,1,100000,1000000,10000000,20000000,50000000]; |
|
//var color_range = ['#ffffe0','#ffdaa3','#ffb27c','#fb8768','#eb5f5b','#d3394a','#b3152f','#8b0000']; |
|
var color_range = [ |
|
"#eff3ff", |
|
"#c6dbef", |
|
"#9ecae1", |
|
"#6baed6", |
|
"#3182bd", |
|
"#08519c" |
|
]; |
|
var color_range_strings = ["$0 - Due to Lending Restrictions","$1 - $100,000","$100,000 - $1,000,000","$1 Million - $10 Million","$10 Million - $20 Millon","$20-50 Million"] |
|
var color = d3.scale.log() |
|
.domain(color_domain) |
|
.range(color_range); |
|
|
|
/* |
|
Setup Tool Tip to show originations for each state on hover. |
|
Format number to be expressed as a dollar amount. |
|
*/ |
|
var number_format = d3.format("$,0") |
|
var tip = d3.tip() |
|
.attr('class', 'd3-tip') |
|
.offset([-10, 0]) |
|
.html(function(d) { |
|
return "<strong>" + d.properties.name + ":</strong> <span style='color:red'> " + number_format(d.properties.originated) + "</span>"; |
|
}) |
|
|
|
svg.call(tip); |
|
|
|
//Load Datasets |
|
d3.queue() |
|
.defer(d3.json, "prosperLoanDataSum.json") |
|
.defer(d3.csv, "states.csv") |
|
.defer(d3.json, "us-states.json") |
|
.await(draw); |
|
|
|
//Initial data will show for 2006 |
|
var init_year = 2006; |
|
function draw(error, prosper_sum_data, abbrev_data, usa_data) { |
|
|
|
//See js/helper.js for the filtered_data function |
|
var usa_data = filtered_data(prosper_sum_data, abbrev_data,usa_data,init_year); |
|
|
|
svg.selectAll("path") |
|
.data(usa_data.features) |
|
.enter() |
|
.append("path") |
|
.attr("d", path) |
|
.style("stroke", "black") |
|
.style("stroke-width", "0.5") |
|
.style("fill", get_color) |
|
.on('mouseover', tip.show) |
|
.on('mouseout', tip.hide); |
|
|
|
//LEGEND |
|
var legend = d3.select("body").append("svg") |
|
.attr("class", "legend") |
|
.attr("width", 300) |
|
.attr("height", 300) |
|
.selectAll("g") |
|
.data(color_range.reverse()) |
|
.enter() |
|
.append("g") |
|
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); |
|
|
|
legend.append("rect") |
|
.attr("width", 18) |
|
.attr("height", 18) |
|
.style("fill", function(d) {return d;}); |
|
|
|
legend.append("text") |
|
//.data(["$100,000,000","$1","0$ (Due to Lending Restrictions)"]) |
|
.data(color_range_strings.reverse()) |
|
.attr("x", 24) |
|
.attr("y", 9) |
|
.attr("dy", ".35em") |
|
.text(function(d) { return d; }) |
|
.style("font-size","8px"); |
|
|
|
//SLIDER |
|
//To move between years |
|
var min = 2006; |
|
var max = 2014; |
|
var ticks = max - min; |
|
var tickFormat = d3.format(".0"); |
|
var axis = d3.svg.axis().ticks(ticks).tickFormat(tickFormat); |
|
var slider = d3.slider() |
|
.axis(axis) |
|
.min(min) |
|
.max(max) |
|
.step(1) |
|
.value(init_year) |
|
.on("slide", function(evt,value) { |
|
d3.select('#slider3text').text(value); |
|
var usa_data_new = filtered_data(prosper_sum_data, abbrev_data,usa_data,value); |
|
//see helper.js for the update function |
|
update(usa_data_new); |
|
}); |
|
d3.select('#slider').call(slider); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
</script> |
|
</body> |
|
</html> |
It's very clear that the map is showing the changes in loans in different states overtime, the overall trend seems to be growing, but the comparison is a little weak, it's a little hard to tell which states grew faster than the others.