Making a path with coordinates using D3 and Mapbox

Question

I am trying to make a line/path using D3.svg.line() to connect a route using x/y coordinates. My goal is to resemble the Bay Area Bart routes and was wondering how to create connecting paths between stations, and eventually have a 'node' animate across the path.

i am not sure how to overlay the path on mapbox

var canvas = d3.select('body').append('svg')
var group = canvas.append('g')
.attr('transform', 'translate(100, 100)');

var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");

group.selectAll('path')
.data([route1]) 
.enter()
.append('path')
.attr('d', line) 
.attr('fill','none')
.attr('stroke','black')
.attr('stroke-width', 10);

my sample code

http://bl.ocks.org/fogcity89/f543472d61fea6dcb1b5380abd41bb62

Answer 1

Not quite sure why you want to use d3 here?

As far as I can see you try to plot your lines in D3, using lat/lon coords and then adding that as an svg layer above the mapbox map?

What i would suggest is creating a GeoJSON -object of your points and add that directly to the mapbox map as a GeoJSON layer .

Then you could loop through all the stations (points) and create lines connecting them.

Answer 2

You can use mapbox-gl (which is based on webgl) to draw the route and the train.

I made a working demo here: https://jsfiddle.net/kmandov/6dk7h675/

---

This is the approach:

First you add the route as a GeoJSON source:

  map.addSource('route', {
    'type': 'geojson',
    'data': routeLineString
  });

  map.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'paint': {
      'line-color': 'red',
      'line-width': 2
    }
  });

The you add the train:

  map.addSource('train', {
    "type": "geojson",
    "data": trainOnRoute(0)
  });

  map.addLayer({
    "id": "train",
    "source": "train",
    "type": "circle",
    "paint": {
      "circle-radius": 10,
      "circle-color": "#007cbf"
    }
  });

The "Train" is a point along the route. To generate that point you can use turfjs's along module.

function trainOnRoute(distance) {
  return turf.along(routeLineString, distance, 'miles');
}

Finally, you animate the train along the route by updating the GeoJson source:

  function animateTrain(timestamp) {
    // Update the data to a new position based on the animation timestamp. The
    // divisor in the expression `timestamp / 1000` controls the animation speed.
    map.getSource('train').setData(
      trainOnRoute(timestamp / 1000)
    );

    // Request the next frame of the animation.
    requestAnimationFrame(animateTrain);
  }

  // Start the animation.
  animateTrain(0);

This approach is based on the following examples:

• https://www.mapbox.com/mapbox-gl-js/example/animate-point-along-route/
• https://www.mapbox.com/blog/turf-electric/