Trip Generation

Trip Production Rates

The sources of the data include the most recent Utah Household Travel Survey (HTS) from 2023, the HTS from 2012, and the base year model (BY 2023 Model).

Code

areas = ["Region","Box Elder","Weber","Davis","Salt Lake","Utah"]
areasAvailable = areas.filter(a => tripRates.some(d => d.County === a))

metricMap = new Map([
  ["Trips per Household", "Trips per Household"],
  ["Trips per Person", "Trips per Person"]
])

viewof countySelect = Inputs.select(areasAvailable, {
  value: "Region",
  label: "Area"
})

viewof metricSelect = Inputs.select(metricMap, {
  value: "Trips per Household",
  label: "Metric:"
})

Code

import {GroupedBarChart} from "@d3/grouped-bar-chart"
import {Swatches} from "@d3/color-legend"

{
  const container = html`
    <div style="display:flex; flex-direction:column; gap:10px;"></div>
  `;

  // Controls
  const controls = html`
    <div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;"></div>
  `;
  controls.append(viewof countySelect);
  controls.append(viewof metricSelect);
  container.append(controls);

  // Reactive data
  const filtered_data = tripRates
    .filter(d => d.County === countySelect)
    .map(d => ({ ...d, "Data Source": String(d["Data Source"]).trim() }));

  const purposeOrder = ["All","HBW","HBShp","HBOth","HBSch","NHBW","NHBNW","IX"];
  const purposes = purposeOrder.filter(p =>
    filtered_data.some(d => d.Purpose === p)
  );

  // Title
  container.append(html`
    <div style="font-size:18px; font-weight:600; margin-top:8px;">
      ${metricSelect} — ${countySelect}
    </div>
  `);

  // Chart
  const chart = GroupedBarChart(filtered_data, {
    x: d => d.Purpose,
    y: d => d[metricSelect],
    z: d => d["Data Source"],
    xDomain: purposes,
    zDomain: ["HTS 2012", "HTS 2023", "BY 2023 Model"],
    colors: ["lightgray", "steelblue", "forestgreen"],
    width: 900
  });

  chart.querySelectorAll("text").forEach(t => (t.style.fontSize = "18px"));
  container.append(chart);

  // Legend
  const color = d3.scaleOrdinal(
    ["HTS 2012", "HTS 2023", "BY 2023 Model"],
    ["lightgray", "steelblue", "forestgreen"]
  );
  container.append(Swatches(color, { label: "Data Source" }));

  return container;
}

(a)

(b)

(c)

Figure 1: Trip Generation Rates (II + IX) by Purpose