d3 sloppy code transformations on click

My first adventure with trying to do some transformations of my map on click events. It got pretty sloppy and I was kept re adding rectangles because I was setting them to display:none and I guess there's no going back from that. http://svg-whiz.com/svg/HideShow.svg

I did get the So Cal bounding box to come back without redrawing but decided not to fix all of it because it's a weird example of different ways of doing stuff. Even if it's a bit of a mess I think I can learn something from it.

Click on the Bay Area to zoom in then on the green box to zoom back out and then repeat to your hearts desire.

Better yet show me how I should have coded it....

The map is of California Congressional Assembly Districts until 2020.

<!DOCTYPE html>
<meta charset="utf-8">
    <style>

/* CSS goes here. */
  .casubun {
      stroke-width:.3px;
      stroke:black;

}

.bords{
    fill:none;
    stroke-width:5px;
    stroke:white;
    shape-rendering:crispEdges;
  }

.infor {
	position:absolute;
	background:white;
  text:black;
  margin-top:10px;
}

svg{
  z-index:0;
}

</style>
    <body class='zoomO'>

var zoom = 0;
            /* JavaScript goes here. */
  //choose dimensions of my svg thing
  var width = 960,
  height = 600;
      // so category20 will make an array of 20 colors
  var color = d3.scale.category20();

color.range(color.range().slice(0,120));

//Choosing mercator because that's what I made the data in and also scale and center setting
      var projection = d3.geo.mercator()
        .scale(2000)
        .translate([width / 2, height / 2])
        .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);

// Appending the actual SVG to the body of the page w/ height width
      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var g = svg.append("g");

var infor = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden");

d3.json("/mpmckenna8/raw/60910c22b47777967704/calAss1.json", function(cali) {
        var neighbors = topojson.neighbors(cali.objects.assemD2011.geometries);
        var districts = topojson.feature(cali, cali.objects.assemD2011).features;

console.log(typeof(districts));
//console.log(d3.values(d3.values(districts)));
var numdist = [];
for(ohh in districts){

//  console.log(districts[ohh].properties.DISTRICT);
  var distnum = districts[ohh].properties;
  numdist.push(distnum);
}

console.log(numdist)

g.append("path")
  .datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){

return a === b;

}))
  .attr("d",path)
  .attr("class", "bords");

g.selectAll(".casubun")
.data(districts)
.enter().append("path")
.attr("d", path)
.style("fill",function(d,i){
  return color(d.color=d3.max(neighbors[i],function(n){
    return districts[n].color;
  })
+ 1 | 0
);

})
.attr("class", function(d) { return "casubun"; })
.on('click',function(d){
  console.log(d)

})
.on('mouseover',function(d,i){
  d3.select('.infor')
    .style({
          height:'50',
          left:'65%',
          top:'15%',
          color:"purple"
        })
        .classed("hidden",false)
        .text('District ' + d.properties.DISTRICT + ' has ' +'a population of' + d.properties.POP)

})
.on('mouseout',function(){
  d3.select(".infor").classed("hidden",true);
})

svg.append('rect')
  .attr("x", 365)
  .attr("y", 180)
  .attr("width", 80)
  .attr("height", 89)
  .style("fill","yellow")
  .style('fill-opacity', 0)
  .style('stroke', 'orange')
  .style('stroke-width',2)
  .attr("class", "bayArea")
  .on("click", bayclick);

svg.append('rect')
  .attr("x", 490)
  .attr("y", 360)
  .attr("width", 130)
  .attr("height", 99)
  .style('fill-opacity', 0)
  .style('stroke', 'blue')
  .style('stroke-width',2)
  .attr("class", "socal")
  ;

d3.select('body.zoomed')
  .on('click', unzoom)

});

var moverx = -680;
var movery = -370;

zoomer = 0;

function bayclick (){
  console.log('clicked on the bay rec');
  d3.select('g')
  //  .attr("class", "zoomed")
    .attr("transform", 'translate(' + moverx +','+ movery +')scale('+ 2.5+ ')')

//  console.log(projection);

//    projection.center([-120,36])
d3.selectAll('rect')
  .style('opacity', 0)
//  .style('display','none');

d3.selectAll('svg')
    .append('rect')
    .attr('x',20)
    .attr('y',9)
    .attr('height',2000)
    .attr('width',80)
    .attr('fill','green')
    .on('click',unzoom)
    .attr('class','zoomed')

return zoom += 1;

}

function unzoom(d){

console.log('gotta undo that done xoom');

d3.selectAll('g')
    .attr("transform", 'translate(' + 0 +','+ 0 +')scale('+ 1+ ')');

console.log(projection);

d3.selectAll('.zoomed')
    .style('opacity', 0);
zoom = 0;

d3.selectAll('rect.zoomed')
  .style('opacity', 1)
  .style('display','none');

d3.select('rect.socal')
  .style({'opacity':1})

}

// selecting the whole body to change the background color
  d3.select("body")
   .transition()
   .style("background-color", "black");

</script>
    </body>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.js

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