Country GDP Map

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>US Map</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.5.0/d3-legend.min.js" charset="utf-8"></script>
	<style type="text/css">
		body {
			background-color: white;
		}

svg {
			background-color: white;
		}

#container {
			width: 550px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 0px;
			padding: 20px 20px 10px 40px;
			background-color: white;
			box-shadow: 2px 2px 7px 3px #E5E5E5;
		}

h1 {
			font-size: 26px;
			margin: 0;
		}

p {
			font-size: 14px;
			margin: 15px 0 10px 0;
		}

p.title {
			font-size: 14px;
			margin: 5px 0 10px 0;
		}
	</style>
</head>

<body>
	<div id="container">
		<h1>Country GDP
		</h1>
		<p class="title"></p>
		<br>
		<div id="chart"></div>
		<p>
			<strong>Source:</strong> <a href="https://www.ggdc.net/maddison/maddison-project/data.htm"><i>Maddison Database</i></a></p>

</div>
	<script type="text/javascript">
		//Width and height
		var w = 550;
		var h = 400;

//Define map projection
		var projection = d3.geo.eckert4()
			.center([10, -5])
			.translate([w / 2, h / 2])
			.scale([w / 4]);

//Define path generator
		var path = d3.geo.path()
			.projection(projection);

//Create SVG
		var svg = d3.select("#chart")
			.append("svg")
			.attr("width", w)
			.attr("height", h);

//Load in GeoJSON data
		d3.json("ne_50m_admin_0_map_subunits.json", function(json) {
			var statesData = json.features

//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
			var color = d3.scale.quantize()
				.range(['#e5f5f9', '#99d8c9', '#2ca25f'])
				.domain([0, 15000000]);

//Bind data and create one path per GeoJSON feature
			svg.selectAll("path")
				.data(json.features)
				.enter()
				.append("path")
				.attr("d", path)
				.attr("stroke", "white")
				.style("fill", function(d) {

//Get data value
					var value = d.properties.gdp_md_est;

if (value) {
						//If value exists…
						return color(value);
					} else {
						//If value is undefined…
						return "#ccc";
					}

});

//			svg.append("g")
			//				.attr("class", "legendQuant")
			//				.attr("transform", "translate(350,350)");

//			var legend = d3.legend.color()
			//				.labelFormat(d3.format(".2f"))
			//				.useClass(true)
			//				.scale(color);

//			svg.select(".legendQuant")
			//				.call(legend);

var rectangle = svg.append("rect")
				.attr("x", 345).attr("y", 300)
				.attr("width", 140)
				.attr("height", 70)
				.attr("fill", "white");

svg.append("g")
				.attr("class", "legendLinear")
				.attr("transform", "translate(350, 300)");

var legendLinear = d3.legend.color()
				.shapeWidth(30)
				.shapeHeight(20)
				.labels(["Less than 5 trillion", "5 to 10 trillion", "10 to 15 trillion"])
				.labelAlign("start")
				.orient("vertical")
				.title("")
				.ascending(false)
				.scale(color);

svg.select(".legendLinear")
				.call(legendLinear);

});
	</script>
</body>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.5.0/d3-legend.min.js