| license: MIT |
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
forked from thulse's block: US National Park Visits 2016
| <!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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //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 div = 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){ | |
| console.log("hover in " + d.properties.value); | |
| }) | |
| .on("mouseout", function (d){ | |
| console.log("hover out " + d.properties.value); | |
| }); | |
| //HOVER HERE?// | |
| }); | |
| //title | |
| 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> |
| state | value | ||
|---|---|---|---|
| Alabama | 1022696.00 | ||
| Alaska | 2783011.00 | ||
| American Samoa | 28892.00 | ||
| Arizona | 12007543.00 | ||
| Arkansas | 3787198.00 | ||
| California | 41977184.00 | ||
| Colorado | 7457420.00 | ||
| Connecticut | 39079.00 | ||
| District of Columbia | 42700158.00 | ||
| Florida | 10855363.00 | ||
| Georgia | 7040865.00 | ||
| Guam | 488988.00 | ||
| Hawaii | 5786318.00 | ||
| Idaho | 629191.00 | ||
| Illinois | 239719.00 | ||
| Indiana | 1949880.00 | ||
| Iowa | 229577.00 | ||
| Kansas | 121249.00 | ||
| Kentucky | 1882702.00 | ||
| Louisiana | 500797.00 | ||
| Maine | 3317250.00 | ||
| Maryland | 6668215.00 | ||
| Massachusetts | 10127182.00 | ||
| Michigan | 2702934.00 | ||
| Minnesota | 1016336.00 | ||
| Mississippi | 6618913.00 | ||
| Missouri | 2824117.00 | ||
| Montana | 5655262.00 | ||
| Nebraska | 307208.00 | ||
| Nevada | 5526764.00 | ||
| New Hampshire | 42377.00 | ||
| New Jersey | 4829258.00 | ||
| New Mexico | 1872044.00 | ||
| New York | 18904528.00 | ||
| North Carolina | 18493719.00 | ||
| North Dakota | 784710.00 | ||
| Ohio | 2818683.00 | ||
| Oklahoma | 1688733.00 | ||
| Oregon | 1328643.00 | ||
| Pennsylvania | 11070571.00 | ||
| Puerto Rico | 1456553.00 | ||
| Rhode Island | 65588.00 | ||
| South Carolina | 1680015.00 | ||
| South Dakota | 4464251.00 | ||
| Tennessee | 9401901.00 | ||
| Texas | 5432749.00 | ||
| Utah | 14409739.00 | ||
| Vermont | 55716.00 | ||
| Virgin Islands | 582167.00 | ||
| Virginia | 27092479.00 | ||
| Washington | 8522006.00 | ||
| West Virginia | 1683649.00 | ||
| Wisconsin | 537925.00 | ||
| Wyoming | 7461665.00 |
| state | value | |
|---|---|---|
| Alabama | 7.9 | |
| Alaska | 1.4 | |
| Arkansas | 14.7 | |
| Arizona | 13.4 | |
| California | 14.1 | |
| Colorado | 12.9 | |
| Connecticut | 9.5 | |
| Delaware | 13.7 | |
| District of Columbia | 6.6 | |
| Florida | 4.4 | |
| Georgia | 11.6 | |
| Hawaii | 17.4 | |
| Iowa | 5.9 | |
| Idaho | 16.4 | |
| Illinois | 18.6 | |
| Indiana | 3.9 | |
| Kansas | 14.2 | |
| Kentucky | 10.5 | |
| Louisiana | 17.2 | |
| Maine | 15.7 | |
| Maryland | 4.9 | |
| Massachusetts | 13.7 | |
| Michigan | 19.7 | |
| Minnesota | 12.8 | |
| Missouri | 2.2 | |
| Mississippi | 6.8 | |
| Montana | 13.8 | |
| North Carolina | 14.7 | |
| North Dakota | 11.1 | |
| Nebraska | 13.7 | |
| New Hampshire | 9.7 | |
| New Jersey | 2.2 | |
| New Mexico | 3.1 | |
| Nevada | 18.2 | |
| New York | 12.8 | |
| Ohio | 5 | |
| Oklahoma | 12.4 | |
| Oregon | 13.3 | |
| Pennsylvania | 0.2 | |
| Rhode Island | 13 | |
| South Carolina | 1.8 | |
| South Dakota | 5.1 | |
| Tennessee | 6.6 | |
| Texas | 8.1 | |
| Utah | 11.3 | |
| Virginia | 4.8 | |
| Vermont | 18.4 | |
| Washington | 13.4 | |
| Wisconsin | 8.9 | |
| West Virginia | 18.1 | |
| Wyoming | 0 |