College Risk

forked from jadiehm's block: Us dot map

forked from aawiegel's block: US dot map

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

body {
  font-family: 'Proxima Nova', sans-serif;
}

.g-hed {
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
  font-size:22px; 
  margin: 3px 0;
}

.g-source-bold {
  text-align: left;
  font-size:10px;
  font-weight: bold; 
}

.g-source-reg {
  text-align: left;
  font-size:10px; 
}

.g-source {
  margin: 10px 0;
}

.g-intro {
  font-size: 16px;
  margin: 0px 0px 10px 0px;
}

.states {
  fill: #d3d3d3;
  stroke: #ffffff;
  stroke-linejoin: round;
}

div.tooltip {
  position: absolute;
  left: 75px;
  text-align: center;
  height: 12px;
  padding: 8px;
  font-size: 13px;
  font-family: 'Proxima-Nova', sans-serif;
  background: #FFFFFF;
  border: 1px solid #989898;
  pointer-events: none;
}

.block {
  width:18%;
  height: 15px;
  display:inline-block;
}

</style>

//Sets dimensions
/*var margin = {top: 10, left: 10, bottom: 10, right: 10}, 
  width = window.outerWidth, 
  width = width - margin.left - margin.right, 
  mapRatio = .5, 
  height = width * mapRatio;*/
var width = 960,
    height = 600;

//Tells the nap what projection to use
var projection = d3.geo.albersUsa()
  .scale(width)
  .translate([width / 2, height / 2]);

// Allows for zooming
var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 8])
    .on("zoom", zoomed);

//Tells the map how to draw the paths from the projection
var path = d3.geo.path()
  .projection(projection);

//Appened svg to page
var map = d3.select(".g-chart").append("svg")
  .style('height', height + 'px')
  .style('width', width + 'px');

//Load the files
queue()
  .defer(d3.json, "us.json")
  .defer(d3.csv, "highrisk.csv")
  .await(ready);

//Moves selection to front
d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

//Moves selection to back
d3.selection.prototype.moveToBack = function() { 
  return this.each(function() { 
    var firstChild = this.parentNode.firstChild; 
      if (firstChild) { 
        this.parentNode.insertBefore(this, firstChild); 
      } 
    }); 
  };

function zoomed() {
  console.log(d3.event.scale)
  map.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  map.select(".state-border").style("stroke-width", 1.5 / d3.event.scale + "px");
}

function ready(error, us, highrisk) {
  if (error) throw error;

//Appends chart headline
  d3.select(".g-hed").text("Colleges at Risk of Closing");

//Appends chart intro text
  d3.select(".g-intro").text("Large red dots represent high risk colleges. Smaller orange dots represent moderate risk colleges.");
	
  //Append states
  map.append("g")
    .attr("class", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
    .attr("d", path)
  	.call(zoom);

//Add cities
  map.selectAll("circle")
    .data(highrisk)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return projection([d.lon, d.lat])[0];
    })
    .attr("cy", function(d) {
      return projection([d.lon, d.lat])[1];
    })
    .attr("r", function(d){
      return d.moderate_risk*2 + d.high_risk*4;
    })
    .style("fill", function(d){
    	if(d.moderate_risk == 1) {
        return "#e17e41";
      }
    	if(d.high_risk == 1) {
        console.log(d.high_risk)
        return "#bc0019";
      }	
  	})
    .style("stroke", "#4fbac4")
    .style("stroke-width", 0.5)
    .style("opacity", 0.75)

//Hovers
    .on("mouseover", function(d) {
      var sel = d3.select(this);
      sel.moveToFront();
      d3.select(this).transition().duration(300).style("opacity", 0.8);
      div.transition().duration(300)
      .style("opacity", 1)
      div.text(d.name)
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY -30) + "px");
    })
    .on("mouseout", function() {
      var sel = d3.select(this);
      d3.select(this)
      .transition().duration(300)
      .style("opacity", 0.75);
      div.transition().duration(300)
      .style("opacity", 0);
    });

//Appends chart source
  d3.select(".g-source-bold")
    .text("SOURCE: ")
    .attr("class", "g-source-bold");

d3.select(".g-source-reg")
    .text("Prototype prediction model based on Department of Education data.")
    .attr("class", "g-source-reg");

//RESPONSIVENESS
d3.select(window).on('resize', resize);

function resize() {

var w = d3.select(".g-chart").node().clientWidth;
  console.log("resized", w);

// adjust things when the window size changes
  width = w - margin.left - margin.right;
  height = width * mapRatio;

console.log(width)
  // update projection
  var newProjection = d3.geo.albersUsa()
    .scale(width)
    .translate([width, height]);

//Update path
  path = d3.geo.path()
    .projection(newProjection);

//Update circles
  map.selectAll("circle")
    .attr("cx", function(d) {
      return newProjection([d.lon, d.lat])[0];
    })
    .attr("cy", function(d) {
      return newProjection([d.lon, d.lat])[1];
    })
    .attr("r", function(d){
      return d.moderate_risk*3 + d.high_risk*5
    })
  	.style("fill", function(d){
    	if(d.moderate_risk == 1) {
        return "#e17e41";
      }
    	if(d.high_risk == 1) {
        return "#bc0019";
      }
  })

// resize the map container
  map
    .style('width', width + 'px')
    .style('height', height + 'px');

// resize the map
  map.selectAll("path").attr('d', path);
}
}

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js