Edit on
<body>
  <ul id='map-ui'></ul>
  <div id='map'></div>
  <div id="canvas"></div>
</body
body { 
  margin:0; 
  padding:0; }

#map { 
  position:absolute; 
  top:0; 
  bottom:0; 
  width:100%;  
  background: none repeat scroll 0 0 #222222; 
  height:100%;
  overflow:visible;
}

#canvas {
  width: 100vw;
  height: 100vw;
}
var mapMain = 'osaez.kp2ddba3';
L.mapbox.accessToken = 'pk.eyJ1Ijoib3NhZXoiLCJhIjoiOExKN0RWQSJ9.Hgewe_0r7gXoLCJHuupRfg';

map = L.mapbox.map('map', mapMain, {
  attributionControl: false,
  maxZoom: 18,
  minZoom: 6
}).setView([34.0261899,-118.2455643], 11);

var getPxBounds = map.getPixelBounds;
map.getPixelBounds = function () {
    var bounds = getPxBounds.call(this);
    // ... extend the bounds
    bounds.min.x=bounds.min.x-1000;
    bounds.min.y=bounds.min.y-1000;
    bounds.max.x=bounds.max.x+1000;
    bounds.max.y=bounds.max.y+1000;
    return bounds;
};

var color = '#1C75BC';
var circle_options = {
  color:'#1C75BC',
  opacity: 0,
  weight: 1,
  fillColor:'#1C75BC',
  fillOpacity: .6
}

d3.json('https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/stations_graph_la.json', function(json){

  var nodes = _.sortBy(json.nodes, function(x){ return x.degree; });

  _.each(nodes, function(x){
    
    // Convert lat/long to Leaflet coord 
    var coord = L.latLng(x.lat, x.lon);

    // Centrality is a measure of all nodes that needs to be normalized
    var centrality =  x.centrality * 1000;

    // Select a color scale from Color Brewer 
    var scale = chroma.scale('RdYlBu');
    
    // Scale the diameter by node degree
    var radius = 50 * x.degree
    
    // Scale the color by node centrality 
    circle_options.fillColor = scale(centrality);
        
    var circle = L.circle(coord, radius , circle_options).addTo(map);
  });

});
Rerun