Us dot map

forked from jadiehm'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;

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

//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, "massshootings.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 ready(error, us, massshootings) {
  if (error) throw error;

console.log(us, massshootings);

//Appends chart headline
  d3.select(".g-hed").text("Map headline goes here");

//Appends chart intro text
  d3.select(".g-intro").text("Map intro text goes here. Write a short sentence describing the map here.");

//Append states
  map.append("g")
    .attr("class", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
    .attr("d", path);

//Add cities
  map.selectAll("circle")
    .data(massshootings)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return projection([d.longitude, d.latitude])[0];
    })
    .attr("cy", function(d) {
      return projection([d.longitude, d.latitude])[1];
    })
    .attr("r", function(d){
      return Math.sqrt(d.dead)*7;
    })
    .style("fill", "#5e8dc9")
    .style("stroke", "#305491")
    .style("stroke-width", 1)
    .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.location + ": " + d.dead)
      .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("Chart source info goes here")
    .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 / 2, height / 2]);

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

//Update circles
  map.selectAll("circle")
    .attr("cx", function(d) {
      return newProjection([d.longitude, d.latitude])[0];
    })
    .attr("cy", function(d) {
      return newProjection([d.longitude, d.latitude])[1];
    })
    .attr("r", function(d){
      return Math.sqrt(d.dead)*3;
    })

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