D3 Examples - D3: Texas Tornado Map (2014) v2

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Texas Tornados</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <style type="text/css">
      @import url(https://fonts.googleapis.com/css?family=Oswald:700,400);
            body {
                font-family: oswald, arial, sans-serif;
          color: #333;
            }
      a:link {
        color: #3A96B7;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:visited {
        color: #3A96B7;
      }
      a:active {
        color: steelBlue;
      }
            #container {
                width: 900px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 50px;
                margin-bottom: 50px;
                padding: 20px 50px;
                background: #d3d3d3;
                box-shadow: 0 0 5px #999999;
            }
            #container h1 {
                text-align: center;
            }
            svg {
                background: #d3d3d3;
            }
      .source {
        font-family: oswald, arial, sans-serif;
        font-weight: bold;
        font-size: .75em;
        text-align: center;
      }
​
        </style>
    </head>
    <body>
        <div id="container">
            <h1>Tornados in Texas - 2014</h1>
      <p class="source">Source: <a href='https://www.tornadohistoryproject.com/'>Tornado History Project</a></p>
        </div>
        <script type="text/javascript">
​
            //Width and height
            var w = 900,
                h = 500;
​
      //Define projection
            var projection = d3.geo.mercator()
                 .center([ -99.43,31.47 ])
                 .translate([ w/2, h/2 ])
                 .scale([ 2000 ]);
​
            //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("texas.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("fill","#fff");
          //  .attr("stroke-width","5")
                    //  .attr("stroke","#fff");
​
          //Load in Texas tornado data
          d3.csv("tornadoData2014.csv",function(data) {
​
            var imgs = svg.selectAll("image")
                   .data(data)
                   .enter()
                   .append("svg:image")
                   .attr("xlink:href", "tornado.svg")
                   .attr("x", function(d) {
                       //[0] returns the first coordinate (x) of the projected value
                     return projection([d.TouchdownLon, d.TouchdownLat])[0];
                   })
                   .attr("y", function(d) {
                       //[1] returns the second coordinate (y) of the projected value
                     return projection([d.TouchdownLon, d.TouchdownLat])[1]-15;
                   })
                   .attr("width", "15")
                   .attr("height", "15");
                   //.style("opacity",0.75);
​
​
        });
​
         });
​
​
​
​
​
        </script>
    </body>
</html>
    