add pop by age

Author: sbm-cs

index.html

@@ -528,21 +528,17 @@ <h2 class="text-4xl font-bold text-gray-900 mb-3">Initial Findings</h2>
     <!-- Growth Projections Chart Card -->
     <div class="sm:mx-auto sm:max-w-3xl divide-y divide-gray-200 overflow-hidden sm:rounded-lg bg-white shadow-sm">
       <div class="px-4 py-5 sm:px-6">
-        <h3 class="text-3xl font-semibold leading-9 text-gray-900">Growth projections and demographic trends.</h3>
+        <h3 class="text-3xl font-semibold leading-9 text-gray-900">Recent growth trends.</h3>
       </div>
       <div class="px-4 py-5 sm:p-6">
         <div class="flex flex-col md:flex-row gap-6">
           <div class="md:w-2/6">
-            <p class="text-gray-700 pb-2">Analysis of household growth trends and projections by income level.</p>
-            <p class="text-gray-700 pb-2">This section will contain growth projections and income-based household
-              analysis.</p>
+            <p class="text-gray-700 pb-2">Household growth has slowed considerably since 2019. The Community Plan reported that Hilliard’s growth since 2016 has been driven less by annexation than internal growth.
+</p>
           </div>
           <div class="md:w-4/6">
             <!-- Add your Datawrapper chart or other visualization here -->
-            <div class="bg-gray-100 rounded-lg p-8 text-center">
-              <p class="text-gray-500">Chart placeholder</p>
-
-            </div>
+<iframe title="Households in Hilliard since 2010" aria-label="Line chart" id="datawrapper-chart-bKvbZ" src="https://datawrapper.dwcdn.net/bKvbZ/2/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="424" data-external="1"></iframe><script type="text/javascript">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>
           </div>
         </div>
       </div>
@@ -569,6 +565,7 @@ <h3 class="text-3xl font-semibold leading-9 text-gray-900">Household composition
  <iframe title="% change, number of select household types, 2015-2023" aria-label="Grouped column chart" id="datawrapper-chart-VPBgy" src="https://datawrapper.dwcdn.net/VPBgy/2/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="333" data-external="1"></iframe><script type="text/javascript">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> </div>
                   <div>
             <p class="text-gray-700 pb-2">These household types and living arrangements do not account for all households in Hilliard, but they do represent a variety of the types of households and people that call Hilliard home - who often prefer or need diverse housing types to accomodate their life stage.</p>
+            <p class="text-gray-700 pb-2">The bottom chart shows which types of living arrangements have grown or shrunk across the Central Ohio region, to compare with those changes in Hilliard.</p>
           </div>
       </div>
 
@@ -577,28 +574,27 @@ <h3 class="text-3xl font-semibold leading-9 text-gray-900">Household composition
     <!-- Population Aging Trends Card -->
     <div class="sm:mx-auto sm:max-w-3xl divide-y divide-gray-200 overflow-hidden sm:rounded-lg bg-white shadow-sm">
       <div class="px-4 py-5 sm:px-6">
-        <h3 class="text-3xl font-semibold leading-9 text-gray-900">Population aging and demographic shifts.</h3>
+        <h3 class="text-3xl font-semibold leading-9 text-gray-900">Population growth by age.</h3>
       </div>
       <div class="px-4 py-5 sm:p-6">
         <div class="flex flex-col md:flex-row gap-6">
           <div class="md:w-2/6">
-            <p class="text-gray-700 pb-2">Age cohort projections showing how the population is changing across different
-              age groups.</p>
+            <p class="text-gray-700 pb-2">Since 2010, young adults and adults 50-64 have accounted for a large share of Hilliard's population growth. Almost 70% more seniors (adults 65+) call Hilliard home today than did in 2010.</p>
           </div>
           <div class="md:w-4/6">
-            <!-- Add your chart here -->
-            <div class="bg-gray-100 rounded-lg p-8 text-center">
-              <p class="text-gray-500">Chart placeholder - Add your population aging chart here</p>
-            </div>
+           <iframe title="Population by age cohort, 2010" aria-label="Area Chart" id="datawrapper-chart-oLX4z" src="https://datawrapper.dwcdn.net/oLX4z/3/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="416" data-external="1"></iframe><script type="text/javascript">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>
           </div>
         </div>
+        <div  class="mt-6">
+          <iframe title="Population growth since 2010, by age cohort" aria-label="Small multiple line chart" id="datawrapper-chart-AQS9N" src="https://datawrapper.dwcdn.net/AQS9N/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="248" data-external="1"></iframe><script type="text/javascript">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>
+        </div>
       </div>
     </div>
 
     <!-- Housing Diversity Assessment Card -->
     <div class="sm:mx-auto sm:max-w-3xl divide-y divide-gray-200 overflow-hidden sm:rounded-lg bg-white shadow-sm">
       <div class="px-4 py-5 sm:px-6">
-        <h3 class="text-3xl font-semibold leading-9 text-gray-900">Existing housing types</h3>
+        <h3 class="text-3xl font-semibold leading-9 text-gray-900">Existing housing types.</h3>
       </div>
       <div class="px-4 py-5 sm:p-6">
         <div class="flex flex-col md:flex-row gap-6">