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