Old school D3 from simpler times

All examples By author By category About

stevenwmarks

Full window Github gist

health care $$$ by state

Built with blockbuilder.org

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    span {
			color: white;
		}
  </style>
</head>
<body>
	<h2>Health Care Expenditures per Capita by State, 2014</h2>
	<p><span style="background-color:rgb(255,26,26);">Over $10,500</span>.....<span style="background-color:rgb(255,77,77);">$9,000-$10,499</span>.....	
			<span style="background-color:rgb(255,128,128);">$7,500-$8,999</span>.....<span style="background-color:rgb(255,179,179);">$5,950-$7,499</span></p>
	<div id="map">
	<script type="text/javascript">
	var width = 910;
	var height = 475;
					
	var projection = d3.geoAlbersUsa()
		.translate([width/2, height/2]);
		
	var path = d3.geoPath()
		.projection(projection);
		
	var svg = d3.select("#map").append("svg")
		.attr("width", width)
		.attr("height", height);
		
	d3.csv("hlthCare.csv", function(error, data) {
		if(error) throw error;

var color = d3.scaleQuantize()
			.domain([5982, 11944])
			.range(
						[ 
							"rgb(255,179,179)",
							"rgb(255,128,128)",
							"rgb(255,77,77)",
							"rgb(255,26,26)",
						]
					);
		
	d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/us-states.json", function(error, json) {
		
		// merge health expenditures and GeoJSON
		for (var i = 0, max = data.length; i < max; i++) {
		
			// get state name
			var dataState = data[i].state;
			
			// get data value and convert to float
			var dataValue = parseFloat(data[i].value);
			
			// find corresponding state i GeoJSON
			for(var j = 0, jmax = json.features.length; j < jmax; j++) {
				jsonState = json.features[j].properties.name;
				
				if (dataState == jsonState) {
					//copy data value into JSON
					json.features[j].properties.value = dataValue;
					
					break;
				}
			}
		}
		svg.selectAll("path")
		.data(json.features)
		.enter()
		.append("path")
		.attr("d", path)
		.style("stroke", "white")
		.style("fill", function(d) {
			var value = d.properties.value;
			
			if(value) {
				return color(value);
			} else {
				return "#ccc";
			}
		});
		
		});
	});	
		
	</script>
	
  </div>
		<h5>Source: Henry J. Kaiser Family Foundation</h5>
</body>
</html>

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