mpmckenna8/index.html

## index.html
<!doctype HTML>

<head>

  <link href="style.css" rel="stylesheet" type="text/css">

</head>


<body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.1.1/chroma.min.js"></script>


<script src='mapstate.js'></script>

</body>
</html>

## mapstate.js


d3.select("body").append("div").attr("class", 'mapper');
var width = window.innerWidth * .7;
var height = window.innerHeight;


var features;

var dems = 0,
repubs = 0;


var holder = d3.select('.mapper')
  .style("width", width + "px").style("height", height+"px")


var svg = holder.append("svg")
  .attr("width", width)
  .attr("height", height)
  .style('background', 'black')
  .style('border', '2px solid grey');


var polinfo = d3.select("body").append("div").attr("class", 'parhouse')
    .style('height', "440px").style('width', '250px')
    .style('background', 'grey')
    .style('float', 'right')
    .append('div')
    .attr('class','tots')
    .text('Totals:');

console.log('stuff works')

    polinfo.append('div')
      .html(' </br><div class = "dems"><span class="demtext"> </span> Democrats</div> <div class="repubs"><span class="reptext"></span> Republicans</div>');


var polSquare = d3.select('.politsq')
                .attr('height', '20px')
                .attr('width', '20px')
                .attr('background', 'orange')
                .attr('class', 'politsq')


d3.json('nyUpper.topojson', function(err, d){
  if (err){
    console.log("error, error data wasn't loaded:", err)
  }
  console.log(d)
  // the topology i want is called colli
  var stageo = topojson.feature(d, d.objects.colli);

  console.log(stageo);


  var lat;
  var lon;

  var projection = d3.geo.mercator()
    .scale(3000)
    .translate([width / 2, height / 2])
    .center([-75,43]);

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


  var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 18])
    .on("zoom", zoomed);


  //starting to really make the big bad map here
  features = svg.append('g');


  svg.call(zoom)


  features.selectAll(".distos")
    .data(stageo.features)
    .enter().append("path")
    .attr("class", function(d) { return "distos"; })
    .attr("d", path)
    .attr("fill",function(d,i){
      //console.log(d)
      return "#8c96c6";
    });


    d3.json("https://secure-sands-4200.herokuapp.com/db/?house=upper&state=ny", function(err, d){
      if( err){
        console.log("something went wrong getting the politicians", err);
      }

      console.log('data heresies', d)

            d3.selectAll('.distos')
              .style('fill', function(geo){
              //  console.log(geo.properties)
              //  return 'orange'
                   d.forEach(function(q){
                    // console.log(q)
                      if(q.district === geo.properties.name){
                        console.log('matched one!')

                        geo.properties.party = q.party;

                        return d;

                        }
                      })

                      //console.log(geo)
                      return makePcol(geo)

              })
              .attr('class', 'distos')
              .attr('stroke','null')

               countPollies(d)

    })


  //console.log(stageo)
})


function countPollies(){
  console.log('gonna add some polly stuff')
  console.log('repubs number:', repubs);
  console.log('democrat num:', dems)

  d3.select('.demtext')
    .text(dems);

    d3.select(".reptext").text(repubs)

}

function makePcol(d){
  //  console.log('making colors', d)
  var elesq;

  if(d.properties.party == 'Democratic'){
    dems += 1;
    elesq = d3.select('.dems')
      .append('div')
  //    .data(pols)
    .style('height', height * .02 + 'px')
    .style('width', width * .02 + 'px')
      .style('background', 'blue')
      .style('margin', '5px 5px 5px 5px')
      .attr('class', 'politsq')

          return 'blue'
  }
  else if(d.properties.party == 'Republican'){
    repubs += 1;
    elesq = d3.select('.repubs')
      .append('div')
  //    .data(pols)
      .style('height', height * .02 + 'px')
      .style('width', width * .02 + 'px')
      .style('background', 'red')
      .style('margin', '5px 5px 5px 5px')
      .attr('class', 'politsq')
    return 'red';
  }
  else{
    return 'yellow'
  }

}

function zoomed() {
  features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  features.selectAll(".bords").style("stroke-width", 1.5 / d3.event.scale + "px");
  features.selectAll(".myloc").attr("r", 8 / d3.event.scale + "px");
}

## nyUpper.topojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              nyUpper.topojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## style.css
body{
  display:flex;
}

div{
  position:relative;
}

tots {

}

.parhouse {
  display:block;
}

.dems{
  color:blue;
  width:45%;
  float:left;
  margin-left:5%;
  height:200px;
}

.repubs{
  color:red;
  width:45%;
  display:block;
  float:left;
}


.politsq{

  margin: 5px 5px 5px 5px;
 float:left;

}
	<!doctype HTML>

	<head>

	<link href="style.css" rel="stylesheet" type="text/css">

	</head>


	<body>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.1.1/chroma.min.js"></script>


	<script src='mapstate.js'></script>

	</body>
	</html>


	d3.select("body").append("div").attr("class", 'mapper');
	var width = window.innerWidth * .7;
	var height = window.innerHeight;


	var features;

	var dems = 0,
	repubs = 0;


	var holder = d3.select('.mapper')
	.style("width", width + "px").style("height", height+"px")


	var svg = holder.append("svg")
	.attr("width", width)
	.attr("height", height)
	.style('background', 'black')
	.style('border', '2px solid grey');


	var polinfo = d3.select("body").append("div").attr("class", 'parhouse')
	.style('height', "440px").style('width', '250px')
	.style('background', 'grey')
	.style('float', 'right')
	.append('div')
	.attr('class','tots')
	.text('Totals:');

	console.log('stuff works')

	polinfo.append('div')
	.html(' </br><div class = "dems"><span class="demtext"> </span> Democrats</div> <div class="repubs"><span class="reptext"></span> Republicans</div>');


	var polSquare = d3.select('.politsq')
	.attr('height', '20px')
	.attr('width', '20px')
	.attr('background', 'orange')
	.attr('class', 'politsq')


	d3.json('nyUpper.topojson', function(err, d){
	if (err){
	console.log("error, error data wasn't loaded:", err)
	}
	console.log(d)
	// the topology i want is called colli
	var stageo = topojson.feature(d, d.objects.colli);

	console.log(stageo);


	var lat;
	var lon;

	var projection = d3.geo.mercator()
	.scale(3000)
	.translate([width / 2, height / 2])
	.center([-75,43]);

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


	var zoom = d3.behavior.zoom()
	.translate([0, 0])
	.scale(1)
	.scaleExtent([1, 18])
	.on("zoom", zoomed);


	//starting to really make the big bad map here
	features = svg.append('g');


	svg.call(zoom)


	features.selectAll(".distos")
	.data(stageo.features)
	.enter().append("path")
	.attr("class", function(d) { return "distos"; })
	.attr("d", path)
	.attr("fill",function(d,i){
	//console.log(d)
	return "#8c96c6";
	});



	d3.json("https://secure-sands-4200.herokuapp.com/db/?house=upper&state=ny", function(err, d){
	if( err){
	console.log("something went wrong getting the politicians", err);
	}

	console.log('data heresies', d)

	d3.selectAll('.distos')
	.style('fill', function(geo){
	// console.log(geo.properties)
	// return 'orange'
	d.forEach(function(q){
	// console.log(q)
	if(q.district === geo.properties.name){
	console.log('matched one!')

	geo.properties.party = q.party;

	return d;

	}
	})

	//console.log(geo)
	return makePcol(geo)

	})
	.attr('class', 'distos')
	.attr('stroke','null')

	countPollies(d)

	})


	//console.log(stageo)
	})


	function countPollies(){
	console.log('gonna add some polly stuff')
	console.log('repubs number:', repubs);
	console.log('democrat num:', dems)

	d3.select('.demtext')
	.text(dems);

	d3.select(".reptext").text(repubs)

	}

	function makePcol(d){
	// console.log('making colors', d)
	var elesq;

	if(d.properties.party == 'Democratic'){
	dems += 1;
	elesq = d3.select('.dems')
	.append('div')
	// .data(pols)
	.style('height', height * .02 + 'px')
	.style('width', width * .02 + 'px')
	.style('background', 'blue')
	.style('margin', '5px 5px 5px 5px')
	.attr('class', 'politsq')

	return 'blue'
	}
	else if(d.properties.party == 'Republican'){
	repubs += 1;
	elesq = d3.select('.repubs')
	.append('div')
	// .data(pols)
	.style('height', height * .02 + 'px')
	.style('width', width * .02 + 'px')
	.style('background', 'red')
	.style('margin', '5px 5px 5px 5px')
	.attr('class', 'politsq')
	return 'red';
	}
	else{
	return 'yellow'
	}

	}

	function zoomed() {
	features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	features.selectAll(".bords").style("stroke-width", 1.5 / d3.event.scale + "px");
	features.selectAll(".myloc").attr("r", 8 / d3.event.scale + "px");
	}
	body{
	display:flex;
	}

	div{
	position:relative;
	}

	tots {

	}

	.parhouse {
	display:block;
	}

	.dems{
	color:blue;
	width:45%;
	float:left;
	margin-left:5%;
	height:200px;
	}

	.repubs{
	color:red;
	width:45%;
	display:block;
	float:left;
	}


	.politsq{

	margin: 5px 5px 5px 5px;
	float:left;

	}