Skip to content

Commit 3eab677

Browse files
nelscitynelscity
committed
add map
1 parent 8ca58f5 commit 3eab677

File tree

5 files changed

+297
-46
lines changed

5 files changed

+297
-46
lines changed

‎UADraft.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
line-height: 1.25;
6868
}
6969

70-
#container {
70+
#mapcontainer {
7171
display: flex;
7272
height: 100%;
7373
width: 100%;
@@ -153,7 +153,7 @@
153153
</style>
154154
</head>
155155
<body>
156-
<div id="container">
156+
<div id="mapcontainer">
157157
<div id="sidebar">
158158
<button id="medIncomeButton">Median Annual Household Income</button>
159159
<button id="pctCBRentersButton">Percent of Renters, Cost Burdened</button>

‎index backup.html ‎backup/index backup.html

File renamed without changes.

‎indexmaptest.html ‎backup/index.html

+18-15
Original file line numberDiff line numberDiff line change
@@ -155,12 +155,28 @@ <h1>City of Upper Arlington
155155
<div class="row insight-box" id="Overview">
156156
<!-- Heading Row -->
157157
<div class="twelve columns" style="margin-bottom: 0%;">
158-
<h3>Understanding Upper Arlington's housing market within regional growth and demographic shifts</h3>
158+
<h3>Regional growth and demographic shifts</h3>
159159
</div>
160160
<!-- Main Content Row -->
161161
<div class="five columns" style="margin-top: 2%; margin-left: 0;">
162162
<p>The regional narrative is that Central Ohio is projected to keep growing, driven by job creation (e.g., Intel, Honda-LG, and <a href="https://www.cbsnews.com/pittsburgh/news/us-defense-contractor-to-build-advanced-manufacturing-facility-central-ohio/">4,000-worker advanced defense manufacturing</a> facilities) and ongoing in-migration.
163163
<p><a href="https://www.morpc.org/2024-2050-metropolitan-transportation-plan/">MTP’s regional forecast</a> looks out to 2050. To meet Upper Arlington’s allocation of overall regional growth, the City should plan on adding about 53 housing units per year.</p>
164+
</div>
165+
<div class="seven columns" style="margin-top: 2%">
166+
<iframe title="Household growth forecast alternatives" aria-label="Interactive line chart" id="datawrapper-chart-zbGLJ" src="https://datawrapper.dwcdn.net/zbGLJ/3/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="481" 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}}}))}();
167+
</script>
168+
</div>
169+
</div>
170+
171+
172+
173+
<div class="row insight-box">
174+
<!-- Heading Row -->
175+
<div class="twelve columns" style="margin-bottom: 0%;">
176+
<h3>Upper Arlington's household income trends</h3>
177+
</div>
178+
<!-- Main Content Row -->
179+
<div class="five columns" style="margin-top: 2%; margin-left: 0;">
164180
<p>This analysis further breaks down the overall rate of household growth by household income. In this case, household incomes are grouped by their percent of HUD’s Area Median Income, which is $103,300 (Columbus, OH HUD Metro FMR Area 2025).
165181
<p>Should these trends continue, most of Upper Arlington’s growth looking out will be in the >190% AMI group. There will also be modest growth in the 50-80% AMI group. The other AMI groups are relatively stable.</p>
166182
</div>
@@ -190,19 +206,6 @@ <h3>Housing supply constraints and infill limitations combined with high demand
190206
</div>
191207
</div>
192208

193-
194-
195-
196-
<div class="chip-container" style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-top: 10%; margin-bottom: 4%;">
197-
<h3>Mapping</h3>
198-
<iframe
199-
src="UADraft.html"
200-
width="100%"
201-
height="600px"
202-
></iframe>
203-
</a>
204-
</div>
205-
206209
<div class="chip-container" style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-top: 10%; margin-bottom: 4%;">
207210
<p>More information will be added to this analysis as the project progresses</p>
208211
<a href="survey.html">
@@ -232,7 +235,7 @@ <h3>Mapping</h3>
232235
<div class="unresponsive">
233236
<div class="content-size"><a href="http://communityscale.io"><img class="no-rounded-edges" src="./images/CommunityScale-logo.png" height="auto" width="30px" title="CommunityScale" alt="CommunityScale"></a></div>
234237
<div class="fill-space">
235-
<p class=""><a href="http://communityscale.io" target="blank">CommunityScale</a> is a pioneering urban planning and spatial data analysis company serving clients across the United States. Follow us on <a href="https://www.linkedin.com/company/communityscale">LinkedIn</a> and <a href="https://twitter.com/CommunityScale">X</a>.</p>
238+
<p class=""><a href="http://communityscale.io" target="blank">CommunityScale</a> is a pioneering urban planning and spatial data analysis company serving clients across the United States.</p>
236239
</div>
237240
</div>
238241
</div>

‎backup/indexmap.html

+250
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- Google tag (gtag.js) -->
6+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-H13EFXBPKL"></script>
7+
<script>
8+
window.dataLayer = window.dataLayer || [];
9+
function gtag() { dataLayer.push(arguments); }
10+
gtag('js', new Date());
11+
12+
gtag('config', 'G-H13EFXBPKL');
13+
</script>
14+
<!-- Google Tag Manager -->
15+
<script>(function (w, d, s, l, i) {
16+
w[l] = w[l] || []; w[l].push({
17+
'gtm.start':
18+
new Date().getTime(), event: 'gtm.js'
19+
}); var f = d.getElementsByTagName(s)[0],
20+
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
21+
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
22+
})(window, document, 'script', 'dataLayer', 'GTM-WJ5WD2NX');</script>
23+
<!-- End Google Tag Manager -->
24+
25+
<!-- Metadata 2024 -->
26+
<meta charset="utf-8">
27+
<title>Housing Market Detailed Analysis</title>
28+
<meta name="description" content="Explore the City of Upper Arlington Housing Market Detailed Analysis.">
29+
<meta name="keywords" content="Upper Arlington, Housing, Urban Planning, CommunityScale, Assessment, Dashboard">
30+
<meta name="author" content="CommunityScale">
31+
<link rel="canonical" href="https://communityscale.github.io/UpperArlington/">
32+
<meta property="og:title" content="City of Upper Arlington Housing Market Detailed Analysis">
33+
<meta property="og:type" content="article">
34+
<meta property="og:url" content="https://communityscale.github.io/UpperArlington/">
35+
<meta property="og:image" content="https://raw.githubusercontent.com/CommunityScale/UpperArlington/main/images/socialcard.jpg">
36+
<meta property="og:description" content="Housing Study educational dashboard for Upper Arlington. Provides detailed analysis and insights on housing trends, affordability, and needs.">
37+
<meta property="og:site_name" content="CommunityScale">
38+
<meta property="og:locale" content="en_US">
39+
<meta property="article:author" content="CommunityScale">
40+
<meta property="article:tag" content="Urban Planning">
41+
<meta property="article:tag" content="Housing">
42+
<meta property="article:tag" content="Upper Arlington">
43+
<meta name="twitter:card" content="summary_large_image">
44+
<meta name="twitter:title" content="City of Upper Arlington Housing Market Detailed Analysis">
45+
<meta name="twitter:description" content="Explore the City of Upper Arlington Housing Market Detailed Analysis.">
46+
<meta name="twitter:image" content="https://raw.githubusercontent.com/CommunityScale/UpperArlington/main/images/socialcard.jpg">
47+
<meta name="twitter:creator" content="@CommunityScale">
48+
<meta http-equiv="content-language" content="en">
49+
50+
<!-- Mobile Specific Metas
51+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
52+
<meta name="viewport" content="width=device-width, initial-scale=1">
53+
54+
<!-- CSS
55+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
56+
<link rel="stylesheet" href="css/normalize.css">
57+
<link rel="stylesheet" href="css/cs-template.css">
58+
59+
<!-- Fonts / icons / table
60+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
61+
<link rel="preconnect" href="https://fonts.googleapis.com">
62+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
63+
<link href="https://fonts.googleapis.com/css2?family=Gloock:[email protected]&family=Roboto:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
64+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
65+
<script src="https://kit.fontawesome.com/b6b458829a.js" crossorigin="anonymous"></script>
66+
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
67+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
68+
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
69+
70+
71+
<!-- Favicon
72+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
73+
<link rel="icon" type="image/png" href="images/favicon.png">
74+
75+
</head>
76+
77+
<body>
78+
<!-- Google Tag Manager (noscript) -->
79+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJ5WD2NX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
80+
<!-- End Google Tag Manager (noscript) -->
81+
82+
<!-- Primary Page Layout
83+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
84+
85+
<!-- Sticky header -->
86+
<div class="sticky">
87+
<div class="topnav">
88+
<div class="logo-and-menu">
89+
<p class="inline-text">
90+
<img src="images/client/UA-bear-white.png" alt="Upper Arlington" class="inline-logo">
91+
92+
93+
<span class="title"><B> Housing Market Analysis</B></span>
94+
</p>
95+
<div class="nav-options">
96+
<div class="desktop-pages">
97+
<!-- Links must be added here for desktop -->
98+
<a href="#Top"><span class="fa fa-arrow-up"></span> Top</a>
99+
<a href="survey.html"><span class="fa fa-user"></span> Survey </a>
100+
<a href="#Overview">Overview </a>
101+
<a href="#Findings">Findings </a>
102+
<a href="#Data">Data</a>
103+
</div>
104+
<div id="clickDiv" class="mobile-menu-icon">
105+
<a class="menu-icon">
106+
<i class="fa fa-bars"></i>
107+
</a>
108+
</div>
109+
</div>
110+
111+
</div>
112+
<div id="targetDiv" class="">
113+
<!-- Links must be added here again for mobile -->
114+
<a href="#Top"><span class="fa fa-arrow-up"></span> Top</a>
115+
<a href="#Survey"><span class="fa fa-user"></span> Survey </a>
116+
<a href="#Overview">Overview </a>
117+
<a href="#Findings">Findings </a>
118+
<a href="#Data">Data</a>
119+
</div>
120+
</div>
121+
</div>
122+
123+
<!-- Cover banner -->
124+
125+
<div class="cover" id="Top" style="background:linear-gradient(to right,rgb(17, 35, 54,.8) 60%,rgba(17, 35, 54,.5)), url(images/client/cover-background.png) no-repeat center center; background-size: cover;">
126+
127+
<div class="container" style="margin-top: 0">
128+
<h1>City of Upper Arlington
129+
<br><span style="font-weight: normal;">Housing Market Detailed Analysis</span>
130+
</h1>
131+
<div class="row">
132+
<div class="eight columns" style="margin-top: 2%;">
133+
<p>This is a project of the
134+
<a href="https://upperarlingtonoh.gov/" target="_blank" rel="noopener noreferrer">City of Upper Arlington, Ohio</a> by
135+
<a href="https://communityscale.io/" target="_blank" rel="noopener noreferrer">CommunityScale</a>.
136+
</p>
137+
<a href="survey.html">
138+
<button class="button-primary">
139+
<span class="fa fa-user"></span> Take the housing survey</b>
140+
</button>
141+
</a>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
147+
<!--
148+
╭────────────────────────╮
149+
| OVERVIEW |
150+
╰────────────────────────╯
151+
-->
152+
153+
<div class="divider" id="Overview" style="margin-top: 0%; padding-top: 0;">
154+
<div class="container">
155+
<div class="row insight-box" id="Overview">
156+
<!-- Heading Row -->
157+
<div class="twelve columns" style="margin-bottom: 0%;">
158+
<h3>Regional growth and demographic shifts</h3>
159+
</div>
160+
<!-- Main Content Row -->
161+
<div class="five columns" style="margin-top: 2%; margin-left: 0;">
162+
<p>The regional narrative is that Central Ohio is projected to keep growing, driven by job creation (e.g., Intel, Honda-LG, and <a href="https://www.cbsnews.com/pittsburgh/news/us-defense-contractor-to-build-advanced-manufacturing-facility-central-ohio/">4,000-worker advanced defense manufacturing</a> facilities) and ongoing in-migration.
163+
<p><a href="https://www.morpc.org/2024-2050-metropolitan-transportation-plan/">MTP’s regional forecast</a> looks out to 2050. To meet Upper Arlington’s allocation of overall regional growth, the City should plan on adding about 53 housing units per year.</p>
164+
</div>
165+
<div class="seven columns" style="margin-top: 2%">
166+
<iframe title="Household growth forecast alternatives" aria-label="Interactive line chart" id="datawrapper-chart-zbGLJ" src="https://datawrapper.dwcdn.net/zbGLJ/3/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="481" 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}}}))}();
167+
</script>
168+
</div>
169+
</div>
170+
171+
172+
173+
<div class="row insight-box">
174+
<!-- Heading Row -->
175+
<div class="twelve columns" style="margin-bottom: 0%;">
176+
<h3>Upper Arlington's household income trends</h3>
177+
</div>
178+
<!-- Main Content Row -->
179+
<div class="five columns" style="margin-top: 2%; margin-left: 0;">
180+
<p>This analysis further breaks down the overall rate of household growth by household income. In this case, household incomes are grouped by their percent of HUD’s Area Median Income, which is $103,300 (Columbus, OH HUD Metro FMR Area 2025).
181+
<p>Should these trends continue, most of Upper Arlington’s growth looking out will be in the >190% AMI group. There will also be modest growth in the 50-80% AMI group. The other AMI groups are relatively stable.</p>
182+
</div>
183+
<div class="seven columns" style="margin-top: 2%">
184+
<iframe title="Household growth by household income" aria-label="Interactive area chart" id="datawrapper-chart-D0DYP" src="https://datawrapper.dwcdn.net/D0DYP/3/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="461" data-external="1"></iframe>
185+
<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 } } })) }();
186+
</script>
187+
<figcaption style="font-size: 0.8rem; margin-top: 0.5rem;">2010-2023 ACS 5-year data with inflation adjustment, forecast based on MTP for Upper Arlington.</figcaption>
188+
</div>
189+
</div>
190+
191+
<div class="row insight-box" id="Action">
192+
<!-- Heading Row -->
193+
<div class="twelve columns" style="margin-bottom: 0%;">
194+
<h3>Housing supply constraints and infill limitations combined with high demand are affecting attainability</h3>
195+
</div>
196+
<!-- Main Content Row -->
197+
<div class="five columns" style="margin-top: 2%; margin-left: 0;">
198+
<p>As a landlocked and established community, infill and teardowns are required for redevelopment. However, the median land cost of $972K per acre for recent teardowns, combined with increasing costs (materials, labor, interest rates), leads to high priced new single-family homes.</p>
199+
<p>With this set of constraints, the median income household can no longer afford the median house price in Upper Arlington.</p>
200+
201+
</div>
202+
<div class="seven columns" style="margin-top: 2%">
203+
<iframe title="How affordable is Upper Arlington?" aria-label="Interactive line chart" id="datawrapper-chart-f4d3i" src="https://datawrapper.dwcdn.net/f4d3i/4/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="491" data-external="1"></iframe>
204+
<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 } } })) }();
205+
</script>
206+
</div>
207+
</div>
208+
209+
<div class="chip-container" style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-top: 10%; margin-bottom: 4%;">
210+
<p>More information will be added to this analysis as the project progresses</p>
211+
<a href="survey.html">
212+
<button class="button-primary">
213+
<span class="fa fa-user"></span> Take the housing survey</b>
214+
</button>
215+
</a>
216+
</div>
217+
</div>
218+
</div>
219+
<!--
220+
╭────────────────────────╮
221+
| Footer |
222+
╰────────────────────────╯
223+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
224+
225+
<div class="footer" style="background:linear-gradient(to right,white 80%,rgba(34, 124, 157,.1));">
226+
<div class="container">
227+
<div class="unresponsive" style="margin-bottom: 30px;">
228+
<div class="content-size"><a href="https://upperarlingtonoh.gov/"><img class="no-rounded-edges" src="./images/client/UA-logo.png" height="auto" width="30px" title="CommunityScale" alt="CommunityScale"></a></div>
229+
<div class="fill-space">
230+
<p class=""><a href="https://upperarlingtonoh.gov/" target="_blank">The City of Upper Arlington</a> is a dynamic community, made successful by the citizens, businesses and civic groups who support the values and traditions.
231+
</p>
232+
233+
</div>
234+
</div>
235+
<div class="unresponsive">
236+
<div class="content-size"><a href="http://communityscale.io"><img class="no-rounded-edges" src="./images/CommunityScale-logo.png" height="auto" width="30px" title="CommunityScale" alt="CommunityScale"></a></div>
237+
<div class="fill-space">
238+
<p class=""><a href="http://communityscale.io" target="blank">CommunityScale</a> is a pioneering urban planning and spatial data analysis company serving clients across the United States.</p>
239+
</div>
240+
</div>
241+
</div>
242+
</div>
243+
244+
<script type="text/javascript" src="nav-javascript.js"></script>
245+
246+
<!-- End Document
247+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
248+
</body>
249+
250+
</html>

0 commit comments

Comments
 (0)