commute time plot

src/routes/+page.svelte

@@ -31,7 +31,38 @@
 
     const salaryData = [71.60039899786582, 149.3132226685017, 154.62586454469306, 78.91006001263423, 59.683840847913864, 59.68693009118541, 79.74541571022148, 55.42134944612286, 69.7178024833959, 43.01632438125329, 46.62062546537602, 68.19744733200062, 154.15502975758454, 68.2045719844358, 46.774375352244974]
 
-    const data = [{
+    const commuteData = [34.39917824173928, 26.044504577120158, 24.317708803611737, 31.863385464581416, 36.20528355271251, 36.10821016073015, 25.010931003877236, 39.122020692832905, 33.827945050809184, 41.76362605953085, 37.19913902253735, 33.63867321698502, 30.37513130252101, 29.185083930231286, 36.87379439464428]
+
+    const plotCommuteData = [{
+        x: rentData,
+        y: commuteData,
+        mode: "markers",
+        type: "scatter",
+        text: neighborhoodNames,
+        showlegend: false,
+        name: "",
+        hoverinfo: "text"
+    }];
+
+    const commuteRegressionY = regressionLine(rentData, commuteData);
+
+    let commuteRegression = {
+        x: rentData,
+        y: commuteRegressionY,
+        mode: "lines",
+        type: "scatter",
+        name: "",
+        showlegend: false,
+        hoverinfo: "none"
+    };
+
+    let commuteLayout = {
+        xaxis: { range: [1250, 1950], title: "Average Rent Per Bedroom" },
+        yaxis: { range: [20, 45], title: "Average Commute Time (in minutes)" },
+        title: "Average Resident's Commute Time vs. Average Rent Per Bedroom"
+    };
+
+    const plotRentData = [{
         x: rentData,
         y: salaryData,
         mode: "markers",
@@ -55,29 +86,32 @@
     };
 
     let salaryLayout = {
-        xaxis: { range: [1250, 1950], title: "Average 1 Bedroom Apartment Rent" },
+        xaxis: { range: [1250, 1950], title: "Average Rent Per Bedroom" },
         yaxis: { range: [0, 200], title: "Average Salary (in thousands of dollars per year)" },
-        title: "Average Salary vs. Average 1 Bedroom Apartment Rent by Neighborhood"
+        title: "Average Salary vs. Average Rent Per Bedroom"
     };
 
      // Create the Plotly plot once the component is mounted
     import { onMount } from 'svelte';
 
     onMount(() => {
-        Plotly.newPlot("salaryPlot", [...data, salaryRegression], salaryLayout);
+        Plotly.newPlot("commutePlot", [...plotCommuteData, commuteRegression], commuteLayout);
+        Plotly.newPlot("salaryPlot", [...plotRentData, salaryRegression], salaryLayout);
     });
 </script>
 
 <div class="intro-container">
     <h2>How are transportation options and rent prices limiting your access to high-paying jobs?</h2>
     <p>As rent prices climb in the Boston area, many tenants are being driven farther away from the center of the city<sup><a href="https://www.cbsnews.com/boston/news/boston-high-rent-city-workers-city-council-residence-requirement/">1</a>, <a href="https://www.forbes.com/sites/andrewdepietro/2023/01/24/the-average-rent-in-boston-now-rivals-bay-area-cities/?sh=7e5080d9434b">2</a></sup>. Unfortunately, this displacement often means living farther away from areas that are dense with high-paying job opportunities. Though many workers resort to long daily commutes, studies have also found that increased commute times are associated with reduced work and life satisfaction and decreased physical health<sup><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC9819363/">3</a></sup>.</p>
+    <p>But just how large is the trade-off between rent and commute time? Our analyses find that in the Boston area, a <b>$100 increase in rent</b> per bedroom is about equivalent to a <b>1 minute and 45 second decrease in commute</b> time.</p>
+
+    <div id="commutePlot"></div>
 
-    <p>But just how large is the trade-off between rent and commute time? Our analyses find that in the Boston area, a <b>$100 increase in rent</b> per bedroom is about equivalent to a <b>1 minute and 45 second decrease in commute</b> time. We also find complementary evidence that neighborhoods with high rent prices tend to have more businesses and job opportunities (normalized by population) and offer higher salaries. The following plot shows the average salary for workers in a given neighborhood regressed against the average 1 bedroom apartment rent (with data for both Boston and Cambridge area neighborhoods).
-    </p>
+    <p>We also find complementary evidence that neighborhoods with high rent prices tend to have more businesses and job opportunities (normalized by population) and offer higher salaries. The following plot shows the average salary for workers in a given neighborhood regressed against the average rent per bedroom.</p>
 
     <div id="salaryPlot"></div>
 
-    <p>In the following dashboard, you’ll get to explore how the variables of rent, commute time, and salary interact with each other by seeing how high rent prices can reduce your housing options, then visualizing how existing transportation options can limit the areas you’re able to work in (depending on how long you would be willing to commute).</p>
+    <p>In the following dashboard, you’ll explore how the variables of rent, commute time, and salary interact with each other by seeing how high rent prices can reduce your housing options, while existing transportation options can limit the areas you’re able to work in (depending on how long you would be willing to commute).</p>
     <button on:click={goToDashboard}>Enter</button>
 </div>