mapboxgl.accessToken = accessToken;

d3.csv('http://feyderm.github.io/data/pgh_bike_crashes_coords_2004_2014.csv', d => {
  const features = d.map(row => constructFeature(row));

  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.99, 40.44],
    zoom: 11
  });

  map.on('load', function () {
    map.addSource('point', {
      type: 'geojson',
      data: {
          "type": "FeatureCollection",
          "features": features
      }
    });

    map.addLayer({
        'id': 'point',
        'source': 'point',
        'type': 'circle',
        'paint': {
          'circle-radius': {
              'base': 3,
              'stops': [[12, 3], [15, 9], [22, 220]]
          },
          'circle-color': '#007cbf'
        }
    });
  });
});

function constructFeature(d) {
  const feature = {
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type": "Point",
        "coordinates": [
            +d.lng,
            +d.lat
        ]
    }
  }
  return feature;
}