mpmckenna8/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    A's color themed with some comments to explain a little bit of what's going on.
Warning this links to an older version of topojson that does things a little different and makes it hard to color by scale depending on neighbors in my next example.

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

        /* CSS goes here. */
        .casubun { fill: #003831; }

        .bords{

          fill:none;
          stroke-width:2px;
          stroke:white;
        }


        </style>
    <body>

        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://d3js.org/topojson.v0.min.js">
//this is an old topojson version so its a little differently used
</script>
        <script>

            /* JavaScript goes here. */
  //choose dimensions of my svg thing
      var width = 960,
      height = 600;

//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);


      d3.json("/mpmckenna8/raw/60910c22b47777967704/calAss1.json", function(cali) {
        svg.selectAll(".casubun")
        .data(topojson.object(cali, cali.objects.assemD2011).geometries)
        .enter().append("path")
        .attr("class", function(d) { return "casubun"; })
        .attr("d", path);

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

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

              });


      d3.select("body")
       .transition()
       .style("background-color", "#FFD800");


            </script>
    </body>

## thumbnail.png

      
    Raw
  

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

	/* CSS goes here. */
	.casubun { fill: #003831; }

	.bords{

	fill:none;
	stroke-width:2px;
	stroke:white;
	}


	</style>
	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js">
	//this is an old topojson version so its a little differently used
	</script>
	<script>

	/* JavaScript goes here. */
	//choose dimensions of my svg thing
	var width = 960,
	height = 600;

	//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);



	d3.json("/mpmckenna8/raw/60910c22b47777967704/calAss1.json", function(cali) {
	svg.selectAll(".casubun")
	.data(topojson.object(cali, cali.objects.assemD2011).geometries)
	.enter().append("path")
	.attr("class", function(d) { return "casubun"; })
	.attr("d", path);

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

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

	});


	d3.select("body")
	.transition()
	.style("background-color", "#FFD800");



	</script>
	</body>