This is a proof of concept that selecting flood zone will highlight specific elements.
Version 49
xxxxxxxxxx<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> https://d3js.org/d3.v3.min.js