D3 Examples - Us dot map

xxxxxxxxxx
 
<!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>
​
<body>
  <h5 class="g-hed"></h5>
  <p class="g-intro"></p>
  <div class="g-chart"></div>
  <div class="g-source"><span class="g-source-bold"></span><span class="g-source-reg"></span></div>
</body>  
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
​
<script>
//Creates tooltip and makes it invisiblae
var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);
​
//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>
    