Module 3 Geo USA/CAN/MEX

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Mercator projection</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<style type="text/css">

body {
				background-color: gray;
			}
            h1 {
                font-family: "Droid Sans";
                font-size: 32px;
                text-align: center;
            }
            p {
                font-family: "Droid Sans";
                font-size: 14px;
                text-align: center;
            }

svg {
				background-color: white;
			}
            
            .orange {
                fill: orange;
            }
            
            path {
                stroke-width: 1px;
                stroke: black;
                
            }
			#container {
                position: relative;
				width: 1000px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
                border-radius: 20px 20px 0 0;
				box-shadow: 4px 4px 13px 6px #ccc;
			}

</style>
	</head>
	<body style="background: #fff;">
    
  		<div id="container">
            <h1>An equal area projection, with some rotation and mouseover.</h1>
            <p>Centered over LAX, rotation [0,15]</p>
          
        </div>
     
    
		<script type="text/javascript">

function changeColor() {
                console.log($(this).length);
                d3.select(this).transition().duration(300).attr("fill","red");
            };
            
            function resetColor() {
                d3.select(this).transition().duration(500).attr("fill","orange");
            };
            
        </script>
    
		<script type="text/javascript">

//Width and height
			var w = 900;
			var h = 900;
            var pi = 3.14;

//Define map projection
			var projection = d3.geo.conicEqualArea()
                .center([ -118, 34 ])
                .rotate([0,15])                
                .translate([ w*2/5, h*2/4 ])
                .scale([ w*4/3 ])
                
                ;

//Define path generator
			var path = d3.geo.path()
                .projection(projection)
                ;
                
			//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Load in GeoJSON data
//			d3.json("../data/countries/mapshaper_output_50simplified.json", function(json) {
			d3.json("ne_10m_admin_1_states_provinces-USA-CAN-MEX.json", function(json) {
				
				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
                    .data(json.features)
                    .enter()
                    .append("path")
                    .attr("d", path)
                    //.attr("class","orange")
                    .attr("fill","orange")
                    .on("mouseover",changeColor)
                    .on("mouseout",resetColor)
                ;
		
			});

</script>
	</body>
</html>

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

https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js