Value-by-alpha map example by wboykinm

index.html

<html>
	<head>
		<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<script>

var svg = d3.select("body")
  .append("svg")
  .attr("width",800)
  .attr("height",500);
var projection = d3.geoAlbersUsa()
  .translate([400,250])
  .scale(1000);
var path = d3.geoPath()
  .projection( projection );


var colorScale = d3.scaleThreshold()
  .domain( [ .4, .5, .6 ] )
  .range( [ "#ca0020", "#f4a582", "#92c5de", "#0571b0" ] );

var grayScale = d3.scaleThreshold()
  .domain( [ 50000, 100000, 500000, 1000000 ] )
  .range( [ .15, .30, .60, .90, 1 ] );

d3.json( "election.geojson", function(json){
  svg.selectAll( "path" )
    .data( json.features )
    .enter()
    .append( "path" )
    .attr( "d", path )
    .attr( "fill", function(d){
      return colorScale( d.properties.Obama_pct);
    })
    .attr( "fill-opacity", function(d){
      return grayScale( d.properties.POP2010 );
    });
});
	</script>

	</body>
</html>