index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<!-- Google tag (gtag.js) -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-H13EFXBPKL"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag() { dataLayer.push(arguments); }
		gtag('js', new Date());

		gtag('config', 'G-H13EFXBPKL');
	</script>
	<!-- Google Tag Manager -->
	<script>(function (w, d, s, l, i) {
			w[l] = w[l] || []; w[l].push({
				'gtm.start':
					new Date().getTime(), event: 'gtm.js'
			}); var f = d.getElementsByTagName(s)[0],
				j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
					'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
		})(window, document, 'script', 'dataLayer', 'GTM-WJ5WD2NX');</script>
	<!-- End Google Tag Manager -->

	<!-- Metadata 2024 -->
	<meta charset="utf-8">
	<title>Apex Housing Plan Update</title>
	<meta name="description" content="Explore the Town of Apex Housing Plan Update.">
	<meta name="keywords" content="Apex, Housing, Urban Planning, CommunityScale, Assessment, Dashboard">
	<meta name="author" content="CommunityScale">
	<link rel="canonical" href="https://communityscale.github.io/Apex/">
	<meta property="og:title" content="Town of Apex Housing Plan Update">
	<meta property="og:type" content="article">
	<meta property="og:url" content="https://communityscale.github.io/Apex/">
	<meta property="og:image" content="https://raw.githubusercontent.com/CommunityScale/Apex/main/images/socialcard.jpg">
	<meta property="og:description" content="Housing Study educational dashboard for Apex. 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="Apex">
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Town of Apex Housing Plan Update">
	<meta name="twitter:description" content="Explore the Town of Apex Housing Plan Update.">
	<meta name="twitter:image" content="https://raw.githubusercontent.com/CommunityScale/Apex/main/images/socialcard.jpg">
	<meta name="twitter:creator" content="@CommunityScale">
	<meta http-equiv="content-language" content="en">

	<!-- 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">

	<!-- Fonts / icons / table
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<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=Gloock:wght@100..900&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">
	<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/b6b458829a.js" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>


	<!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<link rel="icon" type="image/png" href="images/favicon.png">

</head>

<body>
	<!-- Google Tag Manager (noscript) -->
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJ5WD2NX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
	<!-- End Google Tag Manager (noscript) -->

	<!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

	<!-- Sticky header -->
	<div class="sticky">
		<div class="topnav">
			<div class="logo-and-menu">
				<p class="inline-text">
					<img src="images/client/Apex logo.png" alt="Apex" class="inline-image" style="height: 40px; width: auto; margin-right: 10px;">
					<span class="title"><b>Housing Plan Update</b></span>
				</p>
				<div class="nav-options">
					<div class="desktop-pages">
						<!-- Links must be added here for desktop -->
						<a href="#Top"><span class="fa fa-arrow-up"></span> Top</a>
						<a href="#Intro">Overview </a>
						<a href="#Findings">Key Indicators </a>
						<!--
						<a href="survey.html"><span class="fa fa-user"></span> Survey </a>
						-->
					</div>
					<div id="clickDiv" class="mobile-menu-icon">
						<a class="menu-icon">
							<i class="fa fa-bars"></i>
						</a>
					</div>
				</div>

			</div>
			<div id="targetDiv" class="">
				<!-- Links must be added here again for mobile -->
				<a href="#Top"><span class="fa fa-arrow-up"></span> Top</a>
				<a href="#Intro">Overview </a>
				<a href="#Findings">Key Indicators </a>
				<!--
				<a href="#Survey"><span class="fa fa-user"></span> Survey </a>
				-->
			</div>
		</div>
	</div>

	<!-- Cover banner -->

	<div class="cover" id="Top" style="background:linear-gradient(to right,rgb(81, 102, 69,.8) 60%,rgba(81, 102, 69,.5)), url(images/client/cover-background.png) no-repeat center center; background-size: cover;">

		<div class="container" style="margin-top: 0">
			<h1>Town of Apex
				<br><span style="font-weight: normal;">Housing Plan Update</span>
			</h1>
			<div class="row">
				<div class="eight columns" style="margin-top: 2%;">
					<p>This dashboard supports the Town of Apex' ongoing effort to update the 2021 Housing Plan Update, led by the Department of <a href="https://www.apexnc.org/1864/Community-Development-Neighborhood-Conne" target="_blank" rel="noopener noreferrer">Community Development and Neighborhood Connections</a> with support from <a href="https://communityscale.io/" target="_blank" rel="noopener noreferrer">CommunityScale</a>. Still early in the process, this dashboard is currently limited to preliminary findings as we continue analysis and outreach activities. This dashboard will continue to expand and evolve as the planning process unfolds and results take shape.</p>
					<div class="chip-container">
						<a href="#Intro"><button class="button-primary">Purpose of this plan</button></a>
						<a href="#Findings"><button class="button-primary">Key indicators from the analysis</button></a>
						<!--
						<a href="survey.html"><button class="button-primary"><span class="fa fa-user"></span>Take the housing survey</button></a>
						-->
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 
╭────────────────────────╮
|    OVERVIEW            |
╰────────────────────────╯
-->

<div class="container" id="Intro">
	<div class="row">
		<div class="twelve columns center-align" style="margin-top: 2%">
			<h3>The Housing Plan Update's purpose</h3>
			<p>Apex completed its last Affordable Housing Plan in 2021. This effort is intended to build on previous planning in the following ways: update market and need assessments to reflect ongoing growth and change in Apex and the broader region since the pandemic; document policy implementation successes since the previous plan and introduce new ideas and strategies to continue this progress; help inform how the Town can most efficiently and effectively utilize new housing resources and funding; and rekindle a community conversation around housing affordability and development priorities.</p>
		</div>
	</div>

	<!-- Row three call outs -->
	<div class="row">
		<div class="boxes">
			<div class="box">
				<div class="large-icon">
					<img src="images/theme/Frame 7.png" class="inline-image">
				</div>
				<h5>Update the 2021 Affordable Housing Plan</h5>
			</div>
			<div class="box">
				<div class="large-icon">
					<img src="images/theme/Frame 4.png" class="inline-image">
				</div>
				<h5>Introduce new strategies to address affordability challenges</h5>
			</div>
			<div class="box">
				<div class="large-icon">
					<img src="images/theme/Frame 2.png" class="inline-image">
				</div>
				<h5>Help inform Town’s direct investments in attainable housing production</h5>							
			</div>
			<div class="box">
				<div class="large-icon">
					<img src="images/theme/Frame 3.png">
				</div>
				<h5>Convene a community conversation around housing needs and priorities in Apex</h5>
			</div>
		</div>
	</div>
</div>

<div class="divider" id="Findings" style="background:linear-gradient(to right,rgba(255, 255, 255, 0.9),rgba(255, 255, 255, 0.8)), url(images/theme/neighborhood.jpg); background-repeat: no-repeat; background-size: cover">
	<div class="container">
		<div class="twelve columns center-align">
			<div class="divider-header">
				<h2 class="inline-text">Key indicators</h2>
			</div>
			<h6>The housing story in Apex starts with strong growth that has continued for decades and may only accelerate in the future. As Apex grows, its demographics and housing needs are changing, suggesting the need for more diverse housing options in the future. Especially as the supply of available land diminishes, housing demand is driving up costs and threatening to displace many who have called Apex home for a generation or more.</h6>
			<div class="chip-container">
				<a href="#Growth"><button class="button-primary">Strong growth</button></a>
				<a href="#Land"><button class="button-primary">Land shortage</button></a>
				<a href="#Preferences"><button class="button-primary">Unbalanced housing stock</button></a>
				<a href="#Affordability"><button class="button-primary">Affordability challenges</button></a>
				<a href="#Burden"><button class="button-primary">Cost burden</button></a>
			</div>
		</div>
	</div>
</div>

	<div class="divider" style="margin-top: 0%; padding-top: 0; margin-bottom: 0%; padding-bottom: 0;">
		<div class="container" style="margin-bottom: 0%; padding-bottom: 0;">
			<div class="row insight-box" id="Growth" >
				<!-- Heading Row -->
				<div class="twelve columns" style="margin-bottom: 0%;">
					<h3>Apex is projected to continue its rapid growth through the next decade.</h3>
				</div>
				<!-- Main Content Row -->
				<div class="five columns" style="margin-top: 2%; margin-left: 0;">
					<p>Apex’s household population has been growing rapidly over the past decade and is on track to continue doing so. In terms of relative incomes, growth is expected at all levels with the largest absolute increase within the &gt;140% AMI group.</p>
				</div>
				<div class="seven columns" style="margin-top: 2%">
					<iframe title="Household growth by household income" aria-label="Interactive area chart" id="datawrapper-chart-Glxzc" src="https://datawrapper.dwcdn.net/Glxzc/3" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="461" 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,i=0;r=e[i];i++)if(r.contentWindow===a.source){var d=a.data["datawrapper-height"][t]+"px";r.style.height=d}}}))}();</script><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>
					<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>
				</div>
			</div>

			<div class="row insight-box" id="Land">
				<!-- Heading Row -->
				<div class="twelve columns" style="margin-bottom: 0%;">
					<h3>Apex needs about 13,100 new units to keep up with growth - with less and less land left to build on.</h3>
				</div>
				<!-- Main Content Row -->
				<div class="five columns" style="margin-top: 2%; margin-left: 0;">
					<p>Apex’s ongoing rapid growth translates to a projected need for over 13,000 units during the next decade. Even factoring potential annexation, there is a diminishing amount of land available for this growth, requiring more units on fewer acres moving forward to keep up.</p>
				</div>
				<div class="seven columns" style="margin-top: 2%">
					<iframe title="Projected growth and land available" aria-label="Stacked Columns" id="datawrapper-chart-iHm9G" src="https://datawrapper.dwcdn.net/iHm9G/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="450" 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,i=0;r=e[i];i++)if(r.contentWindow===a.source){var d=a.data["datawrapper-height"][t]+"px";r.style.height=d}}}))}();</script>					<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>
					<figcaption style="font-size: 0.8rem; margin-top: 0.5rem;">Sources: Census ACS 2023 5-Year; CommunityScale, Town of Apex; Land inventory as of March 4, 2025</figcaption>
				</div>
			</div>

			<div class="row insight-box" id="Preferences">
				<!-- Heading Row -->
				<div class="twelve columns" style="margin-bottom: 0%;">
					<h3>The housing stock needs to be rebalanced to reflect preferences of more younger and older households.</h3>
				</div>
				<!-- Main Content Row -->
				<div class="five columns" style="margin-top: 2%; margin-left: 0;">
					<p>Households at the younger and older ends of the age spectrum tend to converge in terms of the types of housing they prefer. Less likely to have children, these households are more likely to choose smaller units, including apartments, condos, and attached single family (i.e. townhomes and duplexes).</p>
					<p>These age groups combine to comprise nearly 75% of the net-new household growth expected over the next decade. However, most of Apex’s housing stock is geared more toward middle-aged and family-oriented households more interested in larger, detached single family houses. While this traditional housing type will always be an important part of the mix, more smaller options are needed to improve the balance between current supply and anticipated demand trends.</p>
				</div>
				<div class="seven columns" style="margin-top: 2%">
					<iframe title="Comparing current housing stock to emerging preferences" aria-label="Stacked Columns" id="datawrapper-chart-yuboB" src="https://datawrapper.dwcdn.net/yuboB/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="413" 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,i=0;r=e[i];i++)if(r.contentWindow===a.source){var d=a.data["datawrapper-height"][t]+"px";r.style.height=d}}}))}();</script>
					<figcaption style="font-size: 0.8rem; margin-top: 0.5rem;">Sources: Census ACS 2023 5-Year; CommunityScale, Town of Apex; Land inventory as of March 4, 2025</figcaption>
				</div>
			</div>

			<div class="row insight-box" id="Affordability">
				<!-- Heading Row -->
				<div class="twelve columns" style="margin-bottom: 0%;">
					<h3>Home prices in Apex have become unaffordable to people earning moderate incomes.</h3>
				</div>
				<!-- Main Content Row -->
				<div class="five columns" style="margin-top: 2%; margin-left: 0;">
					<p>This chart compares the median listing price in Apex with the home value attainable to a household earning the median household income. A wider gap means higher barrier to entry for first-time homebuyers and increased risk that an existing resident might be priced out of the community if they choose or need to move to a different house.</p>
					<p>Affordability is based on the county’s estimated median income. Actual affordability levels for specific properties vary based on variation in the above variables as well as possible additional costs for some units such as condominium fees.</p>
				</div>
				<div class="seven columns" style="margin-top: 2%">
					<iframe title="How affordable is Apex?" aria-label="Interactive line chart" id="datawrapper-chart-77ol6" src="https://datawrapper.dwcdn.net/77ol6/2/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="511" 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>
					<figcaption style="font-size: 0.8rem; margin-top: 0.5rem;">Sources: Census ACS 2023 5-Year; CommunityScale, Town of Apex; Land inventory as of March 4, 2025</figcaption>
				</div>
			</div>

			<div class="row insight-box" id="Burden">
				<!-- Heading Row -->
				<div class="twelve columns" style="margin-bottom: 0%;">
					<h3>Many Apex residents cannot find housing they can afford, especially low-income households.</h3>
				</div>
				<!-- Main Content Row -->
				<div class="five columns" style="margin-top: 2%; margin-left: 0;">
					<p>Across all income levels, there are households having trouble affording their current housing costs. This challenge is particularly pronounced among lower-income households, most of whom are spending more than they can comfortably afford to live in Apex.</p>
					<p>Households are cost burdened when paying more than 30% of their income on housing costs. They are considered severely cost burdened when these costs exceed 50% of their income. For renters, this includes lease rent and utilities. For homeowners, this includes mortgage costs, property taxes, insurance, utilities, and any condo fees.</p>
				</div>
				<div class="seven columns" style="margin-top: 2%">
					<iframe title="Cost burden by income level" aria-label="Stacked Bars" id="datawrapper-chart-q2c5T" src="https://datawrapper.dwcdn.net/q2c5T/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="206" 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,i=0;r=e[i];i++)if(r.contentWindow===a.source){var d=a.data["datawrapper-height"][t]+"px";r.style.height=d}}}))}();</script>
					<figcaption style="font-size: 0.8rem; margin-top: 0.5rem;">Sources: Census ACS 2023 5-Year; CommunityScale, Town of Apex; Land inventory as of March 4, 2025</figcaption>
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="chip-container" style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-top: 20px; margin-bottom: 20px;">
			<p>More information will be added to this analysis as the project progresses</p>
			<a href="survey.html">
				<!--
				<button class="button-primary"><span class="fa fa-user"></span> Take the housing survey</button>
				-->
			</a>
		</div>
	</div>


	<!-- 
╭────────────────────────╮
|    Footer              |
╰────────────────────────╯
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

	<div class="footer" style="background:linear-gradient(to right,white 80%,rgba(34, 124, 157,.1));">
		<div class="container">
			<div class="unresponsive" style="margin-bottom: 30px;">
				<div class="content-size"><a href="https://www.apexnc.org/"><img class="no-rounded-edges" src="./images/client/Apex logo.png" height="30px" width="auto" title="Apex" alt="Apex"></a></div>
				<div class="fill-space">
					<p class=""><a href="https://www.apexnc.org/" target="_blank">The Town of Apex</a> seeks to provide exceptional public service that fosters opportunity for the individual and community to live, thrive, and reach their peak.</p>
				</div>
			</div>
			<div class="unresponsive">
				<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>
				<div class="fill-space">
					<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>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="nav-javascript.js"></script>

	<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

</html>