Reactive Programming with RxJS 5

Adding a List of Earthquakes

The first feature is to display a real-time list of earthquakes, including information about their locations, magnitudes, and dates. The data for this list is the same as for the map, which comes from the USGS website. We’ll first create a function that returns a row element given a props object parameter:

ch4/earthquake-visualizer/src/2_rows.js

function makeRow(props) {
  const row = document.createElement("tr");
  row.id = props.net + props.code;

  const time = new Date(props.time).toString();

  [props.place, props.mag, time].forEach(text => {
    const cell = document.createElement("td");
    cell.textContent = text;
    row.appendChild(cell);
  });

  return row;
}

The props parameter is the same ...