d3 line and points on map from geojson or csv data

Following from this problem creating a linestring from csv - d3 line and points on map from csv data - I am hoping to recreate this from my data (either the geojson below, or a csv with lon, lat data):

My aim is to have a circle transition along a line created from geojson coordinates like http://mtaptich.github.io/d3-lessons/d3-extras/

I can't work out how to use my geojson data in this sample. I think this must be quite simple but I have tried and just cant work out how to parse it properly. I have point type data which I could use to make a linestring, I also have linestring. Very very grateful for assistance here.

This is my code:

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="utf-8">
<title>Animate_StartPause3</title>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style type="text/css">

circle {
  fill: steelblue;
  stroke: pink;
  stroke-width: 3px;
}

.journey{
  fill: none;
  stroke: red;
  stroke-width: 4;
  stroke-dasharray: 4px,8px;
}

.point{
    fill:green;
}

</style>
</head>
<body>


<script>

    var w = 960,
        h = 500;

    var projection = d3.geoMercator()
                         .translate([w/2, h/2])
                         .scale([w * 0.16]);

    var gpath = d3.geoPath()
                 .projection(projection);

    var duration = 10000;

    var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);

    var line = d3.line()
    .x(function(d){return projection(d)[0];})
    .y(function(d){return projection(d)[1];})
    .curve(d3.curveBasis);

//bring in data
d3.queue()
    .defer(d3.json, "oceans.json")
    .defer(d3.json, "data_short.json")
    .await(ready);

function ready (error, oceans, data){
    if (error) throw error;

//map
svg.selectAll("path")
        .data(oceans.features)
        .enter()
        .append("path")
        .attr("d", gpath)
        .style("fill", "#A8B2C3");


var linepath = svg.append("path")
  .data(?)
  .attr("d", line)
    .attr('class', 'journey');

    svg.selectAll(".point")
      .data(?)
        .enter()
        .append("circle")
      .attr("r", 7)
      .attr("transform", function(d) { return "translate(" + projection(d) + ")"; });


var circle = svg.append("circle")
  .attr("r", 19)
  .attr("transform", "translate(" + projection(coordinates[0]) + ")");

var pauseValues = {
        lastT: 0,
        currentT: 0
        };

function transition() {
  circle.transition()
      .duration(duration - (duration * pauseValues.lastT))
      .attrTween("transform", translateAlong(linepath.node()))
      .on("end", function(){
        pauseValues = {
          lastT: 0,
          currentT: 0
        };
        transition()
      });
}

function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      t += pauseValues.lastT;
      var p = path.getPointAtLength(t * l);
      pauseValues.currentT = t;
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

d3.select('button').on('click',function(d,i){
  var self = d3.select(this);
  if (self.text() == "Pause"){
        self.text('Play');
        circle.transition()
      .duration(0);
        setTimeout(function(){
            pauseValues.lastT = pauseValues.currentT;
        }, 100);
  }else{
    self.text('Pause');
    transition();
  }
});
}
</script>
</body>
</html>

and this is a sample of my geojson:

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "name":"Ulm",
            "desc":"Ulm, Ulm, Baden-Württemberg, DE",
            "src":"",
            "link1_href":"http://collections.anmm.gov.au/en/objects/details/85834/",
            "link1_text":"",
            "link1_type":"",
            "type":"",
            "date_Arrival":"14 May 1932",
            "date_Departure":"14 May 1932",
            "objectNumber":"ANMS0533[020]",
            "objectID":85834
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               9.993276,
               48.397394
            ]
         }
      },    
      {
         "type":"Feature",
         "properties":{
            "name":"Sydney (Elizabeth Bay)",
            "desc":"Elizabeth Bay, Sydney NSW, Australia",
            "src":"",
            "link1_href":"http://collections.anmm.gov.au/en/objects/details/85001/",
            "link1_text":"",
            "link1_type":"",
            "type":"",
            "date_Arrival":"1 May 1947",
            "date_Departure":"",
            "objectNumber":"ANMS0540[004]",
            "objectID":85001
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               151.22841,
               -33.87143
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{

         },
         "geometry":{
            "type":"LineString",
            "coordinates":[
               [
                  9.993276,
                  48.397394
               ],
               [
                  9.9920654296875,
                  48.40185599006367
               ],
               [
                  10.107421874999998,
                  48.44560023585716
               ],
               [
                  10.30517578125,
                  48.46563710044979
               ],
               [
                  91.723674,
                  22.423776
               ],
               [
                  92.039964,
                  21.165872
               ],

               [
                  112.72367,
                  -7.24039
               ],

               [
                  151.22841,
                  -33.87143
               ]
            ]
         }
      }
   ]
}

Solution

I finally worked out how to get the data and map my journey path, including a linestring type data from my json. I reckon there is a better way of doing this but it does work,

I looped through the json data:

    var points = data.features;
    var geojson =[]
    for (var i = 0; i < points.length; i++) {
            var x = points[i].geometry.coordinates[0];
            var y = points[i].geometry.coordinates[1];
            geojson.push([x,y]);
            }

  var lineString = { "type": "LineString", "coordinates": geojson }

And then amended linepath to use the data like this:

var linepath = g.append("path")
 .data([lineString]) //works with path but not line
  .attr("d", path)
//  .data([geojson])// works with line but not path
 // .attr("d", line)
  .attr('class', 'journey');