-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlive.html
More file actions
100 lines (82 loc) · 5.91 KB
/
live.html
File metadata and controls
100 lines (82 loc) · 5.91 KB
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata 2024 -->
<meta charset="utf-8">
<title>Greenfield Housing Study Dashboard</title>
<meta name="description" content="Explore our interactive dashboard to understand housing needs in Greenfield. This tool provides insights into housing availability, affordability, and trends.">
<meta name="keywords" content="Greenfield, Housing, Urban Planning, CommunityScale, Assessment, Dashboard">
<meta name="author" content="CommunityScale">
<link rel="canonical" href="https://communityscale.github.io/Greenfield/">
<meta property="og:title" content="Greenfield Housing Study Dashboard">
<meta property="og:type" content="article">
<meta property="og:url" content="https://communityscale.github.io/Greenfield/">
<meta property="og:image" content="https://raw.githubusercontent.com/CommunityScale/Greenfield/main/images/socialcard.jpg">
<meta property="og:description" content="Housing Study educational dashboard for Greenfield. Provides detailed analysis and insights on housing trends, affordability, and needs.">
<meta property="og:site_name" content="CommunityScale">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="CommunityScale">
<meta property="article:tag" content="Urban Planning">
<meta property="article:tag" content="Housing">
<meta property="article:tag" content="Greenfield">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Greenfield Housing Study Dashboard">
<meta name="twitter:description" content="Interactive dashboard providing insights into Greenfield's housing needs. Explore data on affordability, availability, and trends.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/CommunityScale/Greenfield/main/images/socialcard.jpg">
<meta name="twitter:creator" content="@CommunityScale">
<meta http-equiv="content-language" content="en">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/cs-template.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- Fonts / icons
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/ed8ea386c8.js" crossorigin="anonymous"></script>
</head>
<body>
<script src="datagrabber.js"></script>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!-- Row with image and text -->
<div class="container" id="ZHVI">
<div class="row insight">
<div class="six columns" style="margin-top: 2%">
<h4>How affordable is Greenfield?</h4>
<h5>As of <span id="current-date">loading...</span>, there is a <b><span id="current-gap">loading...</span></b> gap between what a median income household can afford to buy and the median home price.</h5>
<p><span class="number" id="change-month">loading...</span> change to the gap since <span id="last-month">loading...</span>.</p>
<p><span class="number" id="change-year">loading...</span> change to the gap in the last twelve months.</p>
<details><summary><span class="fa fa-info"></span> Sources</summary>
<figcaption><span id="mortgage-rate"></span> interest rate <span id="current-date"></span> (FRED)<br>
0.35% Property insurance rate<br>
1.00% Mortgage insurance rate<br>
1.77% Greenfield property tax rate<br>
30 years loan term<br>
19% Down payment regional average<br>
30% Household income for ownership costs<br>
Zillow Home Value Index (ZHVI)
</figcaption>
</details>
</div>
<div class="six columns" style="margin-top: 2%">
<iframe title="" aria-label="Interactive line chart" id="datawrapper-chart-lKV5Q" src="https://datawrapper.dwcdn.net/lKV5Q/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="359" data-external="1"></iframe><script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(a){if(void 0!==a.data["datawrapper-height"]){var e=document.querySelectorAll("iframe");for(var t in a.data["datawrapper-height"])for(var r=0;r<e.length;r++)if(e[r].contentWindow===a.source){var i=a.data["datawrapper-height"][t]+"px";e[r].style.height=i}}}))}();
</script>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>