This week MakeoverMonday has pulled an interesting dataset on the subject of Turkey Vulture migration. Turns out there is plenty of interesting things we can learn from these creatures as it pertains to our climate and their ability to adapt. You can read the full article here. The dataset we used can be found here.
I was swimming in the deep end this week. I honestly didn't want to try and develop D3 maps so soon, but this dataset needs a map. So, I went to with a globe to show a more honest representation of the land covered. I also allowed users to select with bird they would like to track.
You can see my public work in progess on Twitter @robcrock
This project would be what it is without the efforts of Andy Kriebel and Eva Murray, so be sure to give a shout out.
I depended in the D3 community more than ever this week. The dataset and what I was trying to accomplish was very difficult for me. If you're working with D3 I can't recommend joining the Slack channel enough. I asked them countless questions.
Big shout out to:
This project is licensed under the MIT License - see the LICENSE.md file for details
xxxxxxxxxx
<html>
<head>
<meta charset='utf-8' />
<title>Turkey Migration</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<!-- <script src="https://d3js.org/d3-array.v1.min.js"></script> -->
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script>var aitoff = d3.geoAitoff();</script>
</head>
<body>
<div class="container">
<div id="dropdown" class="input-field">
<select>
<option value="" selected>Choose your Turkey</option>
<option value="Irma">Irma</option>
<option value="Rosalie">Rosalie</option>
<option value="Morongo">Morongo</option>
<option value="Mac">Mac</option>
<option value="Leo">Leo</option>
<option value="Young Luro">Young Luro</option>
<option value="Domingo">Domingo</option>
<option value="Steamhouse 1">Steamhouse 1</option>
<option value="Steamhouse 2">Steamhouse 2</option>
<option value="Mark">Mark</option>
<option value="Mary">Mary</option>
<option value="Disney">Disney</option>
<option value="Schaumboch">Schaumboch</option>
<option value="La Pampa">La Pampa</option>
<option value="Whitey">Whitey</option>
<option value="Argentina">Argentina</option>
<option value="Prado">Prado</option>
<option value="Sarkis">Sarkis</option>
</select>
</select>
<label>Which Turkey do you want to take off?</label>
</div>
<div id="map" class="col s1"></div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="app.js"></script>
</body>
</html>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v1.min.js
https://d3js.org/d3-array.v1.min.js
https://d3js.org/d3-geo.v1.min.js
https://d3js.org/d3-geo-projection.v2.min.js
https://code.jquery.com/jquery-3.2.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js