Simple CA Map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  
  <script src="//d3js.org/topojson.v1.min.js"></script>

<body>
  <script>
    
    var width = 960,
        height = 500;
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
        .attr("width", 960)
    	.attr("height", 500)
    	.style("background", 'red');
    
    
       //Choosing mercator because that's what I did
var projection = d3.geo.conicConformal()
    .rotate([120, 0])
    .center([0, 38])
    .parallels([29.5, 45.5])
    .scale(2000)
    .translate([width / 2, height / 2])
    .precision(.1)
 // .center([-120,36]);

// So now when I call path on jam it will use this projection and stuff
var path = d3.geo.path()
  .projection(projection);
    
    
   var features = svg.append('g')//.call(zoom)

d3.json('calower.json', function(cali){

var neighbors = topojson.neighbors(cali.objects.assemD2011.geometries);
    var districts = topojson.feature(cali, cali.objects.assemD2011).features;
      
      
    features.selectAll(".casubun")
    .data(districts)
    .enter().append("path")
    .attr("class", function(d) { return "casubun"; })
    .attr("d", path)
    .style("fill",function(d,i){
      //console.log(d)
      return "green";
      });

features.append("path")
      .datum(topojson.mesh(cali,cali.objects.assemD2011, 	function(a,b){
        return a;
      }))
      .attr("d",path)
      .attr("class", "bords")
      .attr('fill', 'none');
    
      // probably not the best use of rotating since it rotates from [0,0] in the svg which is the top left.
   features.attr('transform', "translate(209,-290) ,rotate(45)");
      
      
      console.log(cali)
    })

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://d3js.org/topojson.v1.min.js