Module 4 - Store Electricity geo plotted ... with issues.

<!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>
        <script src="//d3js.org/topojson.v1.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;
			}
            rect.background {
                fill: #fafafe;
            }
            
            .orange {
                fill: orange;
            }
            
            path {
                stroke-width: 1px;
                stroke: black;
                
            }
            circle.wfdata {
                fill: yellow;
                opacity: 0.6;
                stroke: black;
                stroke-width: 0.5px;
            }
            circle.wfdata:hover {
                fill: orange;
                opacity: 1;
            }
			#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>Electricity by Store, West Region</p>
            <p>Scrollwheel to zoom in/out; mouseover stores for description</p>
            <p>States are encoded with a colorscale based on Lon x Lat;  North and West is lighter than South and East</p>
          
        </div>
     
    
		<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()
                .scale(1070)
                .center([ -113, 24 ])
                .rotate([0,15])                
                .translate([ w*2/5, h*2/4 ])
                //.scale([ w*4/6 ]);
                ;
                
			var colors = d3.scale.quantize()
								.range(['#f7fcfd','#e5f5f9','#ccece6','#99d8c9','#66c2a4','#41ae76','#238b45','#006d2c','#00441b']);

//Define path generator
			var path = d3.geo.path()
                .projection(projection)
                ;
                
            var zoom = d3.behavior.zoom()
                .translate(projection.translate())
                .scale(projection.scale())
                .scaleExtent([h, 3 * h])
                .on("zoom", zoomed);
                                
			//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

var g = svg.append("g")
                    .call(zoom);
                    
            g.append("rect")
                .attr("class", "background")
                .attr("width", w)
                .attr("height", h);                    
                                            
            var json2;

//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) {
				
                json2 = json;
                
				colors.domain([
					d3.min(json.features, function(d) { return +d.properties.latitude * +d.properties.longitude; }), 
					d3.max(json.features, function(d) { return +d.properties.latitude * +d.properties.longitude; })
				]);
                
                console.log(colors.domain());
                
				//Bind data and create one path per GeoJSON feature
                g.append("g")
                    .attr("id","states")
				    .selectAll("path")
                    .data(json.features)
                    .enter()
                    .append("path")
                    .attr("d", path)
                    //.attr("class","orange")
                    .attr("fill",function(d) {
                        return colors(+d.properties.latitude * +d.properties.longitude);
                    })
                    .on("mouseover",changeColor)
                    .on("mouseout",resetColor)
                    .on("click",clicked)
                ;
                
                loadWf();

});

function clicked(d) {
                console.log("here in clicked");
                var centroid = path.centroid(d),
                    translate = projection.translate();
                
                projection.translate([
                    translate[0] - centroid[0] + w / 2,
                    translate[1] - centroid[1] + h / 2
                ]);
                
                zoom.translate(projection.translate());
                
                g.selectAll("path").transition()
                    .duration(100)
                    .attr("d", path);
            }
            
            function zoomed() {
                console.log("here in zoomed");
                projection.translate(d3.event.translate).scale(d3.event.scale);
                g.selectAll("path").attr("d", path);
            }

</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

https://d3js.org/topojson.v1.min.js