D3: Texas Tornado Map (2014)

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

});

//Load in Texas tornado data
       d3.csv("tornadoData2014.csv",function(data) {
         
         //Create image for each tornado
         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");

});

</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js