TedYav · andreacarpibomber · Jul 11, 2016 · Jul 26, 2016 · Jul 26, 2016 · Jul 30, 2016
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,4 @@ output-monthly/
 json/
 includes/
 climate-data/
+Anomaly
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
-![Preview](https://raw.githubusercontent.com/TeomanDavid/HadCRUT3-Visualization/master/preview.jpg "Preview")
+![Preview](https://raw.githubusercontent.com/TedYav/HadCRUT3-Visualization/master/preview.jpg "Preview")
 
 # HadCRUT3 Climate Change Visualization
-##### Ted Yavuzkurt ([TeomanDavid.com](http://www.teomandavid.com))
+##### Ted Yavuzkurt ([TedY.io](http://www.tedy.io))
 
 This is a visualization of the [HadCRUT3 Global Temperature Record](http://www.metoffice.gov.uk/research/climate/climate-monitoring/land-and-atmosphere/surface-station-records) provided by the [World Meteorological Organization](http://www.wmo.int/pages/index_en.html). This visualization shows both monthly average temperatures and global temperature anomalies (differences from long term mean) from 1850-2010. More than 3000 land temperature stations are visualized.
 
@@ -11,7 +11,7 @@ The visualization is powered by [Mapbox GL](https://www.mapbox.com/blog/mapbox-g
 A friend of mine started working at Mapbox recently and has been singing their praises. When I saw the HadCRUT3 data posted on Reddit(?) I thought it would be a great opportunity to experiment with the API. This was pretty fun to make and the visualization code (```climate-sim.js```) is **heavily** commented to explain how it works.
 
 ## Live Demo
-[A live demo is available here.](http://www.evokeone.net/rprime/climate-sim.html)
+[A live demo is available here.](https://tedyav.com/demos/climate-vis/)
 
 ## How it Works
 The raw temperature data is contained in ```climate-data.tar.gz``` and was downloaded from the [UK Met Office](http://www.metoffice.gov.uk/research/climate/climate-monitoring/land-and-atmosphere/surface-station-records). I wrote a simple python script to parse these files (```parse.py```), turning them into [GeoJSON](http://geojson.org/) Feature Collections that could be uploaded to [Mapbox Studio](https://www.mapbox.com/studio/).
@@ -489,7 +489,7 @@ That's all there is to it! Seems like a lot going on, but it's basically pretty
 ## Running/Modifying the Code
 If you're interested in tinkering around with the visualization, first clone the repo:
 
-```git clone https://github.com/TeomanDavid/HadCRUT3-Visualization && cd ./HadCRUT3-Visualization```
+```git clone https://github.com/TedYav/HadCRUT3-Visualization && cd ./HadCRUT3-Visualization```
 
 There are a few things you can do:
 
@@ -521,4 +521,4 @@ If you want to fundamentally change the style of the map, the best way to do it
 Make sure you set your layer names to lowercase months (i.e. 'january'), or set the names accordingly in `layerNames` in `climate-sim.js`.
 
 ###Change Visualization Colors or Display###
-The best way to do this is to edit `climate-sim.js`. There are a set of constants at the top of the file that control most display options. If you want to dig in further, edit the code and have fun!
+The best way to do this is to edit `climate-sim.js`. There are a set of constants at the top of the file that control most display options. If you want to dig in further, edit the code and have fun!
diff --git a/demos/index.html b/demos/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+
+climate-sim.html
+HTML file to display HADCrut3 Climate Data using MapboxGL.js
+
+AUTHOR: Teoman (Ted) Yavuzkurt
+www.github.com/teomandavid
+www.teomandavid.com
+
+-->
+<html>
+<head>
+    <meta charset='utf-8' />
+    <title>HadCRUT3 Climate Data</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+    <!-- stylesheets -->
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' />
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css">
+    <link rel="stylesheet" href="climate-sim.css" />
+
+    <!-- scripts -->
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script>
+    <script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
+    <script src="climate-sim.js"></script>
+</head>
+<body>
+
+<main>
+  <div id='map'></div>
+</main>
+
+<footer>
+<div>
+<div class="map-controls">
+    <span class="map-text-title m2">Year: </span><span id="year" class="map-text m2"></span>
+    <div id="map-slider" class="m2"></div>
+    <select id="map-months" class="m2"></select>
+    <select id="map-display" class="m2"></select>
+    <span class="mini"> Anomaly: </span><input type="checkbox" id="toggle-anomaly" />
+</div>
+
+<div class="map-controls">
+  <span class="map-text-title m5-top">Anomaly: </span><span id="anomaly" class="map-text m6-top"></span>
+  <button id="playpause" class="m5">Play</button>
+  <span class="mini m5">Loop:</span> <input type="checkbox" class="m8-top" id="toggle-loop" disabled>
+  <div class="gradient-container"><span id="raw-temp-start"></span><div id="temp-gradient" class="gradient">Raw Temp</div><span id="raw-temp-end"></span></div>
+  <div class="gradient-container"><span id="anomaly-start"></span><div id="anomaly-gradient" class="gradient">Anomaly</div><span id="anomaly-end"></span></div>
+</div>
+</div>
+
+<div id="author-info">
+<a href="#" id="info-button"><img src="info.png" width="32" height="32" /></a>
+</div>
+</footer>
+
+</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,3 +40,4 @@ output-monthly/ @@
     json/
     includes/
     climate-data/
+    Anomaly