deckerlr/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is a proof of concept that selecting flood zone will highlight specific elements.
Version 49

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Scaling the AlbersUSA projection</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
		<style type="text/css">
			/* No style rules here yet */
		</style>
	</head>
	<body>
		<table width="800" border="0">
			<tr height="300">
				<td id="list" width="300" style="margin-top:80px;">
					<p>Precipitation:<br>
					<select id="precipitation">
						<option selected value="0">No Rain</option>
  						<option value="0.25">0.25 inches</option>
  						<option value="0.5">0.5 inches</option>
  						<option value="0.75">0.75 inches</option>
					</select></p>
					<p>Tide:<br>
					<select id="tide">
						<option selected value="0">Normal</option>
  						<option value="1">1 foot</option>
  						<option value="2">2 foot</option>
  						<option value="3">3 foot</option>
					</select></p>
					<p>Storm Surge:<br>
					<select id="surge">
						<option selected value="0">No Surge</option>
  						<option value="1">1 foot</option>
  						<option value="2">2 foot</option>
  						<option value="3">3 foot</option>
					</select></p>
					<p>Sea Level:<br>
					<select id="sea">
						<option selected value="0">No Change</option>
  						<option value="1">1 foot</option>
  						<option value="2">2 foot</option>
  						<option value="3">3 foot</option>
					</select></p>
					<p><button id="submit">Submit</button></p>
				</td>
				<td id="map" width="500"></td>
			</tr>
		</table>

		<script type="text/javascript">
			var RealValue = 0.0;
			//Width and height
			var w = 500;
			var h = 300;
			//Define map projection
			var projection = d3.geo.albersUsa()
			   .translate([w/2, h/2])
			   .scale([500]);
			//Define path generator
			var path = d3.geo.path()
				.projection(projection);
			//Create SVG element
			var svg = d3.select("#map")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

			//Create SVG element
			var tsvg = d3.select("#list")
				.append("tsvg")
				.attr("width", "100")
				.attr("height","20")
				.text(RealValue);

			//Load in GeoJSON data
			d3.json("us-states.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("stroke", "black")
				   .style("fill", "steelblue");

				// Switch view based on selection
				d3.select("#submit").on("click", function() {
					var FloodZone = parseFloat(precipitation.value,10)
					              + parseFloat(tide.value,10)
					              + parseFloat(surge.value,10)
					              + parseFloat(sea.value,10);
					console.log("flood = " + FloodZone);
					svg.selectAll("path")
						.data(json.features)
			   			.transition()
			   			.style("fill", function(d) {
			   				if (d.flood <= FloodZone)
			   				{
			   					RealValue = parseFloat(RealValue,10)
			   				        	  + parseFloat(d.rvalue,10);
						        return "red"
							}
							else {return "steelblue"};
						})
						console.log("Value = " + RealValue);
					tsvg.selectAll("text")
						.append("tsvg")
						.text(RealValue);
		        });
			});
		</script>
	</body>
</html>

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.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.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3: Scaling the AlbersUSA projection</title>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	/* No style rules here yet */
	</style>
	</head>
	<body>
	<table width="800" border="0">
	<tr height="300">
	<td id="list" width="300" style="margin-top:80px;">
	<p>Precipitation:<br>
	<select id="precipitation">
	<option selected value="0">No Rain</option>
	<option value="0.25">0.25 inches</option>
	<option value="0.5">0.5 inches</option>
	<option value="0.75">0.75 inches</option>
	</select></p>
	<p>Tide:<br>
	<select id="tide">
	<option selected value="0">Normal</option>
	<option value="1">1 foot</option>
	<option value="2">2 foot</option>
	<option value="3">3 foot</option>
	</select></p>
	<p>Storm Surge:<br>
	<select id="surge">
	<option selected value="0">No Surge</option>
	<option value="1">1 foot</option>
	<option value="2">2 foot</option>
	<option value="3">3 foot</option>
	</select></p>
	<p>Sea Level:<br>
	<select id="sea">
	<option selected value="0">No Change</option>
	<option value="1">1 foot</option>
	<option value="2">2 foot</option>
	<option value="3">3 foot</option>
	</select></p>
	<p><button id="submit">Submit</button></p>
	</td>
	<td id="map" width="500"></td>
	</tr>
	</table>

	<script type="text/javascript">
	var RealValue = 0.0;
	//Width and height
	var w = 500;
	var h = 300;
	//Define map projection
	var projection = d3.geo.albersUsa()
	.translate([w/2, h/2])
	.scale([500]);
	//Define path generator
	var path = d3.geo.path()
	.projection(projection);
	//Create SVG element
	var svg = d3.select("#map")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Create SVG element
	var tsvg = d3.select("#list")
	.append("tsvg")
	.attr("width", "100")
	.attr("height","20")
	.text(RealValue);

	//Load in GeoJSON data
	d3.json("us-states.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("stroke", "black")
	.style("fill", "steelblue");

	// Switch view based on selection
	d3.select("#submit").on("click", function() {
	var FloodZone = parseFloat(precipitation.value,10)
	+ parseFloat(tide.value,10)
	+ parseFloat(surge.value,10)
	+ parseFloat(sea.value,10);
	console.log("flood = " + FloodZone);
	svg.selectAll("path")
	.data(json.features)
	.transition()
	.style("fill", function(d) {
	if (d.flood <= FloodZone)
	{
	RealValue = parseFloat(RealValue,10)
	+ parseFloat(d.rvalue,10);
	return "red"
	}
	else {return "steelblue"};
	})
	console.log("Value = " + RealValue);
	tsvg.selectAll("text")
	.append("tsvg")
	.text(RealValue);
	});
	});
	</script>
	</body>
	</html>