-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (55 loc) · 2.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<!-- External Libraries -->
<script src="js/d3.v3.min.js" type="text/javascript"></script>
<script src="js/dimple.v2.1.6.min.js" type="text/javascript"></script>
<!-- Internal Libraries -->
<script src="js/main.js" type="text/javascript"></script>
<!-- Stylsheets -->
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<title>Prosper Loan Visualization</title>
</head>
<body>
<div class='header-container indent'>
<h1>The Steady March of Consumer Debt</h1>
<h4>
The financial crisis of 2007-2008 is considered the worst since the Great Depression.
Caused by subprime lending, many institutions have stopped extending loans to subprime borrowers,
but this has not fixed the problem of overlending. Consumer debt continues to climb, and the financial recovery
looks like the beginning of another crisis.
</h4>
</div>
<div class='controls-container'>
<!-- Cover these with a play button to play the story back -->
<div class='button-container indent'>
<button type="button" id="btnNumberOfLoans" disabled>Number of Loans</button>
<button type="button" id="btnAverageInterestRate" disabled>Average Interest Rate</button>
<button type="button" id="btnTotalAmountLoaned" disabled>Total Amount Loaned</button>
<button type="button" id="btnReplay" disabled>Replay Story</button>
</div>
<div class="legend-container">
<ul class="legend">
<li>Excellent Credit Score (740-850)<div class="legend-block excellent"></div></li>
<li>Good Credit Score (680-740)<div class="legend-block good"></div></li>
<li>Acceptable Credit Score (620-680)<div class="legend-block acceptable"></div></li>
<li>Subprime Credit Score (0-620)<div class="legend-block subprime"></div></li>
</ul>
</div>
</div>
<div id="chart-area" class="indent">
<div id="chart-area-cover">
<div class="play-story">
Play Story<div class="play-button"></div>
<div>(click to advance the story)</div>
</div>
</div>
</div>
<div class="source-container indent">Source: Loan Data from Prosper</div>
<div class="pop-up"></div>
<script>
init();
</script>
</body>
</html>