Loading a geojson file with OL3

Question

I am using OL3 to load a geojson layer with points on a map. Although the layer is loaded and it can be seen, when I zoom out the position of the points change on the map. I thought this would related to the projections of the map and the points but I can not figure out how to fix it. This is the script:

var format = new ol.format.GeoJSON();
var url = 'https://gist.githubusercontent.com/cmiles74/ef62e43595deabb68f5a/raw/ef85f8e7ed34ccbf5768ade25e4d3485ded16938/gistfile1.json';

var vectorSource = new ol.source.Vector({
strategy: ol.loadingstrategy.bbox,
loader: function(extent, resolution, projection) {
  $.ajax(url).then(function(response) {
      var features = format.readFeatures(response,
        {featureProjection: 'EPSG:3857'});
      vectorSource.addFeatures(features);
  });
}
});

var map = new ol.Map({
layers: [
  new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
            'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
      })
    }),
  new ol.layer.Vector({
    source: vectorSource
  })
],
renderer: 'canvas',
target: 'map',
view: new ol.View({
  center: [-9343811.351360613, 5424617.381580625],
  zoom: 14
})
});

The geojson looks like this:

And in the below images you can see how the position of the points change in different zoom levels:

Answer 1

Define the projection of your GeoJSON data:

change

var features = format.readFeatures(response,
        {featureProjection: 'EPSG:3857'});

to

var features = format.readFeatures(response,
        {dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857'});

Answer 2

Your code and theses scripts work to me.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js" type="text/javascript"></script>