mpmckenna8/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## calower.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              calower.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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>

  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<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>
	<!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>

	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width:100%; height: 100% }
	</style>
	</head>

	<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>