US National Park Visits 2016

This data is from The National Park Service Visitor Use Statistics Resource.

The data presented in this visualization show Recreation Visitation by State in 2016.

forked from wboykinm's block: Modular US State Choropleth with features inspired by Justin Palmer's block: Using d3-tip to add tooltips to a d3 bar chart

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">

/* Legend Font Style */
body {
	font: 11px sans-serif;
	background-color: #ffffff;
  
}
        
/* Legend Position Style */
.legend {
	position:absolute;
	left:20px;
	top:30px;
}

.axis text {
	font: 10px sans-serif;
}

.axis line, .axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
  
  div.tooltip {
    position:absolute;
    text-align:center;
    width:100px;
    height:50px;
    padding:2px;
    font: 12px sans-serif;
    background: #eddfb0;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }

</style>
</head>
<body>
<script type="text/javascript">
commaFormat = d3.format(",d");
  
  
//Width and height of map
var width = 960;
var height = 500;

var lowColor = '#b4fcbf'
var highColor = '#00600c'

// D3 Projection
var projection = d3.geoAlbersUsa()
  .translate([width / 2, height / 2]) // translate to center of screen
  .scale([1000]); // scale things down so see entire US

// Define path generator
var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths
  .projection(projection); // tell path generator to use albersUsa projection

//Create SVG element and append map to the SVG
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// Define 'div' for tooltips
var cheese = d3.select("body")
	.append("div")  // declare the tooltip div 
	.attr("class", "tooltip")              // apply the 'tooltip' class
	.style("opacity", 0);                  // set the opacity to nil

// Load in my states data!
d3.csv("nationalparksdatashort2.csv", function(data) {
	var dataArray = [];
	for (var d = 0; d < data.length; d++) {
		dataArray.push(parseFloat(data[d].value))
	}
	var minVal = d3.min(dataArray)
	var maxVal = d3.max(dataArray)
	var ramp = d3.scaleLinear().domain([minVal,maxVal]).range([lowColor,highColor])
	
  // Load GeoJSON data and merge with states data
  d3.json("us-states.json", function(json) {

// Loop through each state data value in the .csv file
    for (var i = 0; i < data.length; i++) {

// Grab State Name
      var dataState = data[i].state;

// Grab data value 
      var dataValue = data[i].value;

// Find the corresponding state inside the GeoJSON
      for (var j = 0; j < json.features.length; j++) {
        var jsonState = json.features[j].properties.name;

if (dataState == jsonState) {

// Copy the data value into the JSON
          json.features[j].properties.value = dataValue;

// Stop looking through the JSON
          break;
        }
      }
    }

// Bind the data to the SVG and create one path per GeoJSON feature
    svg.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("stroke", "#fff")
      .style("stroke-width", "1")
      .style("fill", function(d) { return ramp(d.properties.value) })
 			.on("mouseover", function (d)
      	{
      		cheese.transition().duration(200).style("opacity", .9);
      		cheese.html("<strong>"+d.properties.name+"</strong><br> "+commaFormat(d.properties.value)).style("left", (d3.event.pageX)+"px").style("top", (d3.event.pageY-28) + "px");
      	}
      )
      .on("mouseout", function (d){
      		cheese.transition().duration(500).style("opacity", 0);  
      
      });
    //HOVER HERE?//
    
    });
    
  //titles
    svg.append("text")
        .attr("x", (width / 2))            
        .attr("y", 25)
        .attr("text-anchor", "middle")  
        .style("font-size", "30px") 
        .style("text-decoration", "bold")  
        .text("National Park Visits by State");
    svg.append("text")
        .attr("x", 55)            
        .attr("y", 340)
        .attr("text-anchor", "middle")  
        .style("font-size", "12px") 
        .style("text-decoration", "bold")  
        .text("Number of Visits");
    
		// add a legend
		var w = 140, h = 300;

var key = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h)
			.attr("class", "legend");

var legend = key.append("defs")
			.append("svg:linearGradient")
			.attr("id", "gradient")
			.attr("x1", "100%")
			.attr("y1", "0%")
			.attr("x2", "100%")
			.attr("y2", "100%")
			.attr("spreadMethod", "pad");

legend.append("stop")
			.attr("offset", "0%")
			.attr("stop-color", highColor)
			.attr("stop-opacity", 1);
			
		legend.append("stop")
			.attr("offset", "100%")
			.attr("stop-color", lowColor)
			.attr("stop-opacity", 1);
		
   // legend.append('text')
    //	.attr('class', 'legend-label')
    //      .attr('x', 500)
    //      .attr('y', 500)
    //      .text('legendTitle')
    //			.style("font",10)
                 
    
		key.append("rect")
			.attr("width", w - 100)
			.attr("height", h)
			.style("fill", "url(#gradient)")
			.attr("transform", "translate(0,10)");

var y = d3.scaleLinear()
			.range([h, 0])
			.domain([minVal, maxVal]);

var yAxis = d3.axisRight(y);

key.append("g")
			.attr("class", "y axis")
			.attr("transform", "translate(41,10)")
			.call(yAxis)
  });
;
</script>
</body>
</html>

https://d3js.org/d3.v4.min.js