Issues with Code Execution within D3's JSON Callback

Problem:

In D3 versions prior to v5, code written within the callback of the d3.json() function was not executing, causing the browser to skip over everything included in the call.

Solution:

Signature Change in D3 v5:

The signature of d3.json() has changed in D3 v5. It now returns a Promise instead of relying on a callback function. The second argument is now an optional RequestInit object.

Modified Code:

To resolve the issue, rewrite the code as follows:

d3.json("/trip_animate/tripData.geojson")
  .then(function(data) {
    // Code from your original callback here...
  });

Error Handling:

D3 v5 no longer relies on the first parameter of the callback for error handling. Instead, the promise returned by d3.json() will be rejected if an error occurs.

There are two primary ways to handle errors:

1. .then() with Error Handler:

d3.json("/trip_animate/tripData.geojson")
  .then(function(data) {
    // Code from your original callback here...
  })
  .catch(function(error) {
    // Error handling code here...
  });

2. .catch() for Error Handling:

d3.json("/trip_animate/tripData.geojson")
  .then(function(data) {
    // Code from your original callback here...
  }).catch(function(error) {
    // Error handling code here...
  });

By implementing these changes, you can ensure that your code within the d3.json() callback will execute as intended.