Charlie-Henry / driving-timing-consumption

A map of how much time Americans spend on driving per day
https://charlie-henry.github.io/driving-timing-consumption/
0 stars 0 forks source link

Format numbers better / get rid of NaN #2

Closed cbirdsong closed 1 month ago

cbirdsong commented 5 months ago

I think this would get rid of these weird data anomalies while also formatting the numbers more pleasantly:

CleanShot 2024-05-14 at 14 39 03

var travelTimeRaw = e.features[0].properties["Component 1"];
var travelTime = parseFloat(travelTimeRaw).toFixed(1);
if (!isNaN(travelTime)) {
  travelTime = travelTime + " hours";
} else {
  travelTime = "-";
}

var incomeRaw = e.features[0].properties["Median earnings"];
var income = parseFloat(incomeRaw).toFixed(2);
if (!isNaN(income) && typeof income === "number") {  // ridiculously, typeof NaN evaluates to "number" 
  income = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(income);
} else {
  income = "-";
}

var carOwnershipRaw = e.features[0].properties["Total Car Ownership Time"];
var carOwnership = parseFloat(carOwnershipRaw).toFixed(1);
if (!isNaN(carOwnership)) {
  carOwnership = carOwnership + " hours";
} else {
  carOwnership = "-";
}

This also moves the units out of table construction:

var popupHTML =
  `<table>
      <caption><strong>` +
  name +
  `</strong><br><small>` +
  tract +
  `</small></caption>
      <tbody>
          <tr>
          <th>Daily travel time</th>
          <td>` +
  travelTime +
  `</td>
          </tr>
          <tr>
          <th>Median yearly income</th>
          <td>` +
  income +
  `</td>
          </tr>
          <tr>
          <th>Time spent per day on cars</th>
          <td>` +
  carOwnership +
  `</td>
          </tr>
      </tbody>
  </table>`;

Sorry for not making proper pull requests - this is just something I keep poking at during downtime.

Charlie-Henry commented 1 month ago

addressed thanks @cbirdsong!

Screenshot 2024-09-30 at 4 17 50 PM