Graticule issue by majomo

index.html

<html lang='en'>
<head>
	
<meta charset='utf-8'>
<title>Map of BC</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
  
<style>
path {  stroke:#E7E8E7  ;
           stroke-width: .9px;
           fill: #BDD684; 
   }
   path:hover{
           fill: #5e6b42;
   }
   svg {
           background: #FFF
   }
  .graticule {
        fill: none;
        stroke: #000;
        stroke-width: .5px;
        stroke-opacity: .5;
      }
    </style>
  </head>
<body>
<script type="text/javascript">
//GET SVG CROWBAR	
  
  
  
var    width = 800, //5000
       height =800,
       centered; //2500	

var     projection = d3.geo.albers()
        	.scale([2800] ) //2800
    .translate([width / 1.7, height / 1.3])
    .rotate([121,-11]);
  var graticule = d3.geo.graticule();
var     path = d3.geo.path()
		.projection(projection);

  
var     svg = d3.select("body")
		.append("svg")
		.attr("width", width)
		.attr("height", height);
//DELETE ALL BELOW HERE
//Graticule
      svg.append('g').append('path')
        .datum(graticule)
        .attr('class', 'graticule')
        .attr('d', path);
//DELETE ALL ABOVE HERE  
  
d3.json(src="https://gist.githubusercontent.com/majomo/1beba4e212d12f3d6e29/raw/1bd280591bc4959449505395c90f7ffdd2e2ddbd/bcGeo.json", function(json)
	{
  
  
//Bind data and create one path per GeoJSON feature
					svg.selectAll("path")
					   .data(json.features)
					   .enter()
					   .append("path")
					   .attr("d", path)
                       .on('click', function(d) { console.log(d.properties.CDNAME)
					   
  
 
  
  d3.csv(src="https://gist.githubusercontent.com/majomo/71bea3a673397ebdbabc/raw/5d1097dd66fcbc1ef6ff5eef8892ad4c8ae156ae/bccities.csv", function(data) {
						
						svg.selectAll("circle")
						   .data(data)
						   .enter()
						   .append("circle")
						   .attr("cx", function(d) {
							   return projection([d.lon, d.lat])[0];
						   })
						   .attr("cy", function(d) {
							   return projection([d.lon, d.lat])[1];
						   })
						   .attr("r", function(d) {
								return Math.sqrt(parseInt(d.population) * 0.002);
						   })
						   .style("fill", "red")
						   .style("opacity", 0.55);
						
					});
   
	});

});
  


  
</script>

  
  
</body>
</html>