cpopolo/index.html

## index.html

<!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">

            function changeColor() {
                d3.select(this).transition().duration(300).attr("fill","red");
            };

            function resetColor() {
                d3.select(this).transition().duration(500).attr("fill",function(d) {
                    return colors(+d.properties.latitude * +d.properties.longitude);
                });
            };

            function bounceMe() {
                d3.select(this).transition().duration(100).attr("r",function(d) {
                    return 1.5 * Math.sqrt(+d.WC2015AVG)/6;
                }).transition().duration(50).attr("r", function(d) {
                    return 1.0 * Math.sqrt(+d.WC2015AVG)/6;
                });
            }

        </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()
                .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 loadWf() {
                console.log("okay?");
                d3.csv("wf-01-electricity-gpsv.csv", function(wfdata) {
                    console.log("here");

                    var circles = g.selectAll("#states circle")
                        .data(wfdata)
                        .enter()
                        .append("circle")
                        .attr("class","wfdata")
                        .attr("cx", function(d) {
                            //[0] returns the first coordinate (x) of the projected value
                            return projection([d.Glongitude, d.Glatitude])[0];
                        })
                        .attr("cy", function(d) {
                            //[1] returns the second coordinate (y) of the projected value
                            return projection([d.Glongitude, d.Glatitude])[1];
                        })
                        .attr("r", function(d) {
                            return Math.sqrt(+d.WC2015AVG)/6;
                        })
                        .on('mouseover',bounceMe)
                        .append("title")
                        .text(function(d) {
                            return "id=" + d.Glongitude + ' ' + d.Glatitude + ' ' + d.LocationNr + ' ' + d.LocationName;
                        })
                        //.style("fill", "blue")
                        //.style("opacity", 0.75);
                });
            }

            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>

## ne_10m_admin_1_states_provinces-USA-CAN-MEX.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_10m_admin_1_states_provinces-USA-CAN-MEX.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## wf-01-electricity-gpsv.csv

      
    Raw
  

              wf-01-electricity-gpsv.csv
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)

	<!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">

	function changeColor() {
	d3.select(this).transition().duration(300).attr("fill","red");
	};

	function resetColor() {
	d3.select(this).transition().duration(500).attr("fill",function(d) {
	return colors(+d.properties.latitude * +d.properties.longitude);
	});
	};

	function bounceMe() {
	d3.select(this).transition().duration(100).attr("r",function(d) {
	return 1.5 * Math.sqrt(+d.WC2015AVG)/6;
	}).transition().duration(50).attr("r", function(d) {
	return 1.0 * Math.sqrt(+d.WC2015AVG)/6;
	});
	}

	</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()
	.scale(1070)
	.center([ -113, 24 ])
	.rotate([0,15])
	.translate([ w2/5, h2/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 loadWf() {
	console.log("okay?");
	d3.csv("wf-01-electricity-gpsv.csv", function(wfdata) {
	console.log("here");

	var circles = g.selectAll("#states circle")
	.data(wfdata)
	.enter()
	.append("circle")
	.attr("class","wfdata")
	.attr("cx", function(d) {
	//[0] returns the first coordinate (x) of the projected value
	return projection([d.Glongitude, d.Glatitude])[0];
	})
	.attr("cy", function(d) {
	//[1] returns the second coordinate (y) of the projected value
	return projection([d.Glongitude, d.Glatitude])[1];
	})
	.attr("r", function(d) {
	return Math.sqrt(+d.WC2015AVG)/6;
	})
	.on('mouseover',bounceMe)
	.append("title")
	.text(function(d) {
	return "id=" + d.Glongitude + ' ' + d.Glatitude + ' ' + d.LocationNr + ' ' + d.LocationName;
	})
	//.style("fill", "blue")
	//.style("opacity", 0.75);
	});
	}

	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>