mpmckenna8/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Here I tried to show all the State Senate and Assembly districts for the state of California.  Plus if you click on a given district the district number and name of the representative shows up in the info box.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <link rel="stylesheet" href="./map.css">


</head>

<body>


      <h2 class="bigtitle">California State <span class="chatit">Assembly</span> Districts</h2>
      <div class="houseseler">
        <select class="houseslect" onchange="housech(value)">
          <option value="lower"> State Assembly </option>
          <option value="upper" selected> Senate </options>
        </select>
      </div>


<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
   <script src="http://bl.ocks.org/mpmckenna8/raw/f43a842a8953e87f5b3c/63d5445b60d94813c85acd7fa02227d2f253f41e/d3.geo.zoom.js"></script>

        <script src="./twomap.js"></script>

    </body>

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

.bords{
  fill:none;
  stroke-width:2px;
  stroke:white;
}

.bigtitle{
  margin-right:auto;
  margin-left:auto;
  vertical-align:middle;
  text-align:center;
  color:grey;

}

.maphold{
  margin-right:auto;
  margin-left:auto;
}

.houseseler{
  margin: 0 auto;
  white-space:nowrap;
  width: 120px;


}

.houseselect{
  text-align:center;
}

.maphold{
  //position:absolute;

}

svg{
  z-index:1;
}

.distinfo{
  position:absolute;
  z-index:3;
  width:175px;
  padding:15px;
  text-align:center;
  margin-top: 10px;

}

svg path .hoved{
  stroke-width:6;
  fill:fushia;
}

## twomap.js
var width = 960,
height = 600;
var color = d3.scale.category10();
color.range(color.range().slice(0,8));

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


d3.select("body").append("h4")
  .html('Total number of Democrats: <span class="numDems">52</span> </br> Total number of Republicans: <span class="numRepu">28</span>')
  .style('color', 'white')
  .attr('class', 'bigtitle');

// Appending the actual SVG to the body of the page w/ height width
var holder = d3.select("body").append("div")
.attr("class", "maphold").style("width", width + "px").style("height", height+"px")

holder.append('div')
.attr('class','distinfo')
.style('background-color', "white")
.style('width', "200px")
.html('Click on a district to see details')

var svg = holder.append("svg")
.attr("width", width)
.attr("height", height);

//d3.select('.maphold')

function makemap(house){

  d3.selectAll('path')
    .remove();

  //Make the house the in title the right one
  d3.select('.chatit')
    .text(function(){
      if(house =='lower'){
        return 'Assembly'
      }
      return 'Senate'
    })

  d3.json('http://secure-sands-4200.herokuapp.com/ca' + house +'.json' // "/calAss1.json"
  , function(cali) {
    console.log(cali.objects);

    // if statement to deal with different object names in topojson
  if(house ==="upper"){
    var neighbors = topojson.neighbors(cali.objects.caSenDist.geometries);
    var districts = topojson.feature(cali, cali.objects.caSenDist).features;
  }
  else{
    var neighbors = topojson.neighbors(cali.objects.assemD2011.geometries);
    var districts = topojson.feature(cali, cali.objects.assemD2011).features;
  }
    console.log(neighbors);

    svg.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";
      /* This part just cycled through the colors array and make the colors so they mostly wont share borders with
      return color(d.color=d3.max(neighbors[i],function(n){
      return districts[n].color;
    }) + 1 | 0

  );
  */
      });

    if(house ==="upper"){

      svg.append("path")
      .datum(topojson.mesh(cali,cali.objects.caSenDist, function(a,b){
        return a;
      }))
      .attr("d",path)
      .attr("class", "bords")
    }
    else{
      svg.append("path")
      .datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){
        return a;
      }))
      .attr("d",path)
      .attr("class", "bords")
    }

//.attr();

d3.json('http://secure-sands-4200.herokuapp.com/db/?state=ca&house='+house, function(datur){
  //console.log(d)
  var dable = datur;
  var numRepubs = 0;
  var numDems = 0;


  var distos = d3.selectAll(".casubun")
  .style('fill', function(d, i){
    var tofi = 'yellow';
    var dnum = +d.properties.DISTRICT;
  //  console.log(d)
    datur.forEach(function(w, e){
      //  Matching the distcts with the console.log(w)
      if(w.district == dnum ){
        console.log('a match!');
        if(w.party === "Republican"){
          d.properties.party = "Republican";
          d.properties.name = w.full_name;
          numRepubs++;

          return  tofi = 'red'
        }
        d.properties.party = "Democrat";
        d.properties.name = w.full_name
        numDems++;

        tofi = 'blue';
      }
    })
    console.log(d);
    putTots();

    return tofi;
  })

/*
  distos
  .on('mouseover', function(d){
    console.log(this);
    var blah = d3.select(this);
    blah
    //.style('fill', 'green')
    .attr('stroke', 'purple')
    .attr('class', 'hoved')


    console.log(d);
    d3.select('.distinfo')
      .html('beep boop ' + d.properties.name )
  });

  */


  function putTots(){
    d3.select('.numDems')
    .text(numDems);

    d3.select('.numRepu')
    .text(numRepubs);


  }

  console.log(distos[0])


  var zoom = d3.geo.zoom()
  .projection(projection)
  //I don't really understand what the scale extent does so
  .scaleExtent([projection.scale() *.7, projection.scale() *10])
  .on("zoom.redraw", function(){
    d3.event.sourceEvent.preventDefault();
    svg.selectAll("path").attr("d",path);
  })
  d3.selectAll('path')
  .call(zoom);


  d3.selectAll(".casubun").on('click', function(d){
    console.log(this);
    d3.selectAll('.casubun')
    .style('fill', makePcol)

    var blah = d3.select(this);
    blah
    .style('fill', 'fuchsia')
    .attr('stroke', 'orange')
    .attr('class', 'casubun hoved')


    console.log(d);
    d3.select('.distinfo')
    .html(function(){
      console.log((d.properties.name))

      if(d.properties.name != undefined ){
      return 'District ' +  d.properties.DISTRICT +' '+ d.properties.name}
      else{
        return 'No one'
      }
      })
  })
  .on('mouseout', function(d){
    console.log('outter there')
    /*

    d3.select(this).style('fill', function(d){
      if(d.properties.party == "Democrat"){
        return 'blue';
      }
      else if(d.properties.party == "Republican"){
        return 'red'
      }
    })
    .attr('stroke', 'null')
    */

  //  d3.select('.distinfo').html(' ');
  });


})

});

}

function makePcol(d){
  console.log('making colors', d)
  if(d.properties.party == 'Democrat'){
    return 'blue'
  }
  else if(d.properties.party == 'Republican'){
    return 'red';
  }
  else{
    return 'yellow'
  }

}

makemap('upper');

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

function housech(value){
  console.log('house changed', value)
  makemap(value);
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<link rel="stylesheet" href="./map.css">


	</head>

	<body>



	<h2 class="bigtitle">California State <span class="chatit">Assembly</span> Districts</h2>
	<div class="houseseler">
	<select class="houseslect" onchange="housech(value)">
	<option value="lower"> State Assembly </option>
	<option value="upper" selected> Senate </options>
	</select>
	</div>



	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://bl.ocks.org/mpmckenna8/raw/f43a842a8953e87f5b3c/63d5445b60d94813c85acd7fa02227d2f253f41e/d3.geo.zoom.js"></script>

	<script src="./twomap.js"></script>

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

	.bords{
	fill:none;
	stroke-width:2px;
	stroke:white;
	}

	.bigtitle{
	margin-right:auto;
	margin-left:auto;
	vertical-align:middle;
	text-align:center;
	color:grey;

	}

	.maphold{
	margin-right:auto;
	margin-left:auto;
	}

	.houseseler{
	margin: 0 auto;
	white-space:nowrap;
	width: 120px;


	}

	.houseselect{
	text-align:center;
	}

	.maphold{
	//position:absolute;

	}

	svg{
	z-index:1;
	}

	.distinfo{
	position:absolute;
	z-index:3;
	width:175px;
	padding:15px;
	text-align:center;
	margin-top: 10px;

	}

	svg path .hoved{
	stroke-width:6;
	fill:fushia;
	}
	var width = 960,
	height = 600;
	var color = d3.scale.category10();
	color.range(color.range().slice(0,8));

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


	d3.select("body").append("h4")
	.html('Total number of Democrats: <span class="numDems">52</span> </br> Total number of Republicans: <span class="numRepu">28</span>')
	.style('color', 'white')
	.attr('class', 'bigtitle');

	// Appending the actual SVG to the body of the page w/ height width
	var holder = d3.select("body").append("div")
	.attr("class", "maphold").style("width", width + "px").style("height", height+"px")

	holder.append('div')
	.attr('class','distinfo')
	.style('background-color', "white")
	.style('width', "200px")
	.html('Click on a district to see details')

	var svg = holder.append("svg")
	.attr("width", width)
	.attr("height", height);

	//d3.select('.maphold')

	function makemap(house){

	d3.selectAll('path')
	.remove();

	//Make the house the in title the right one
	d3.select('.chatit')
	.text(function(){
	if(house =='lower'){
	return 'Assembly'
	}
	return 'Senate'
	})

	d3.json('http://secure-sands-4200.herokuapp.com/ca' + house +'.json' // "/calAss1.json"
	, function(cali) {
	console.log(cali.objects);

	// if statement to deal with different object names in topojson
	if(house ==="upper"){
	var neighbors = topojson.neighbors(cali.objects.caSenDist.geometries);
	var districts = topojson.feature(cali, cali.objects.caSenDist).features;
	}
	else{
	var neighbors = topojson.neighbors(cali.objects.assemD2011.geometries);
	var districts = topojson.feature(cali, cali.objects.assemD2011).features;
	}
	console.log(neighbors);

	svg.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";
	/* This part just cycled through the colors array and make the colors so they mostly wont share borders with
	return color(d.color=d3.max(neighbors[i],function(n){
	return districts[n].color;
	}) + 1 \| 0

	);
	*/
	});

	if(house ==="upper"){

	svg.append("path")
	.datum(topojson.mesh(cali,cali.objects.caSenDist, function(a,b){
	return a;
	}))
	.attr("d",path)
	.attr("class", "bords")
	}
	else{
	svg.append("path")
	.datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){
	return a;
	}))
	.attr("d",path)
	.attr("class", "bords")
	}

	//.attr();

	d3.json('http://secure-sands-4200.herokuapp.com/db/?state=ca&house='+house, function(datur){
	//console.log(d)
	var dable = datur;
	var numRepubs = 0;
	var numDems = 0;


	var distos = d3.selectAll(".casubun")
	.style('fill', function(d, i){
	var tofi = 'yellow';
	var dnum = +d.properties.DISTRICT;
	// console.log(d)
	datur.forEach(function(w, e){
	// Matching the distcts with the console.log(w)
	if(w.district == dnum ){
	console.log('a match!');
	if(w.party === "Republican"){
	d.properties.party = "Republican";
	d.properties.name = w.full_name;
	numRepubs++;

	return tofi = 'red'
	}
	d.properties.party = "Democrat";
	d.properties.name = w.full_name
	numDems++;

	tofi = 'blue';
	}
	})
	console.log(d);
	putTots();

	return tofi;
	})

	/*
	distos
	.on('mouseover', function(d){
	console.log(this);
	var blah = d3.select(this);
	blah
	//.style('fill', 'green')
	.attr('stroke', 'purple')
	.attr('class', 'hoved')


	console.log(d);
	d3.select('.distinfo')
	.html('beep boop ' + d.properties.name )
	});

	*/


	function putTots(){
	d3.select('.numDems')
	.text(numDems);

	d3.select('.numRepu')
	.text(numRepubs);


	}

	console.log(distos[0])


	var zoom = d3.geo.zoom()
	.projection(projection)
	//I don't really understand what the scale extent does so
	.scaleExtent([projection.scale() .7, projection.scale() 10])
	.on("zoom.redraw", function(){
	d3.event.sourceEvent.preventDefault();
	svg.selectAll("path").attr("d",path);
	})
	d3.selectAll('path')
	.call(zoom);



	d3.selectAll(".casubun").on('click', function(d){
	console.log(this);
	d3.selectAll('.casubun')
	.style('fill', makePcol)

	var blah = d3.select(this);
	blah
	.style('fill', 'fuchsia')
	.attr('stroke', 'orange')
	.attr('class', 'casubun hoved')


	console.log(d);
	d3.select('.distinfo')
	.html(function(){
	console.log((d.properties.name))

	if(d.properties.name != undefined ){
	return 'District ' + d.properties.DISTRICT +' '+ d.properties.name}
	else{
	return 'No one'
	}
	})
	})
	.on('mouseout', function(d){
	console.log('outter there')
	/*

	d3.select(this).style('fill', function(d){
	if(d.properties.party == "Democrat"){
	return 'blue';
	}
	else if(d.properties.party == "Republican"){
	return 'red'
	}
	})
	.attr('stroke', 'null')
	*/

	// d3.select('.distinfo').html(' ');
	});



	})

	});

	}

	function makePcol(d){
	console.log('making colors', d)
	if(d.properties.party == 'Democrat'){
	return 'blue'
	}
	else if(d.properties.party == 'Republican'){
	return 'red';
	}
	else{
	return 'yellow'
	}

	}

	makemap('upper');

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

	function housech(value){
	console.log('house changed', value)
	makemap(value);
	}