choropleth usa map adding drop shadow d3 code example
Example: choropleth usa map adding drop shadow d3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
body {
font: 11px sans-serif;
background-color: #ffffff;
}
.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">
var width = 960;
var height = 500;
var lowColor = '#f9f9f9'
var highColor = '#bc2a66'
var projection = d3.geoAlbersUsa()
.translate([width / 2, height / 2])
.scale([1000]);
var path = d3.geoPath()
.projection(projection);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("statesdata.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])
d3.json("us-states.json", function(json) {
for (var i = 0; i < data.length; i++) {
var dataState = data[i].state;
var dataValue = data[i].value;
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
json.features[j].properties.value = dataValue;
break;
}
}
}
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) });
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);
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>