1 files changed, 171 insertions, 0 deletions
diff --git a/static/js/script.js b/static/js/script.js
new file mode 100644
index 0000000..5f4128b
--- /dev/null
+++ b/static/js/script.js
@@ -0,0 +1,171 @@
+/*global document, d3, XMLHttpRequest, navigator */
+"use strict";
+
+function gid(text) {
+    return document.getElementById(text);
+}
+
+function dilate(a) {
+    var delta = (a[1] - a[0]) * 0.1;
+    return [a[0] - delta, a[1] + delta];
+}
+
+function set_weather(d) {
+    gid("temperature").textContent = Math.round(d.temperature) + "°C";
+    gid("icon").className = "wi wi-forecast-io-" + d.icon;
+    gid("summary").textContent = d.summary;
+    gid("humidity").textContent = Math.round(d.humidity * 100) + "%";
+    gid("precipitation").textContent = (d.precipIntensity.toFixed(2) +
+            " mm/hr (" + Math.round(d.precipProbability * 100) + "%)");
+    gid("wind").textContent = Math.round(d.windSpeed) + " km/hr";
+    gid("wind-icon").className = "wi wi-wind from-" + d.windBearing + "-deg";
+    gid("date").textContent = (d3.time.format("%a %I %p"))(d.time);
+}
+
+function plot(data, current) {
+    data.forEach(function (d) {
+        d.time = new Date(d.time * 1000);
+    });
+
+    var margin = {top: 30, right: 30, bottom: 30, left: 30},
+        width = 390 - margin.left - margin.right,
+        height = 170 - margin.top - margin.bottom,
+
+        x = d3.time.scale().range([0, width]),
+        y1 = d3.scale.linear().range([height, 0]),
+        y2 = d3.scale.linear().range([height, 0]),
+
+        xAxis = d3.svg.axis().scale(x)
+            .orient("bottom").ticks(5),
+
+        y1Axis = d3.svg.axis().scale(y1)
+            .orient("left").ticks(3),
+
+        y2Axis = d3.svg.axis().scale(y2)
+            .orient("right").ticks(3),
+
+        templine = d3.svg.line()
+            .x(function (d) { return x(d.time); })
+            .y(function (d) { return y1(d.temperature); }),
+
+        precipline = d3.svg.line()
+            .x(function (d) { return x(d.time); })
+            .y(function (d) { return y2(d.precipIntensity); }),
+
+        svg = d3.select("#plot")
+            .append("svg")
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g")
+            .attr("transform", "translate(" +
+                    margin.left + "," + margin.top + ")"),
+
+        background,
+        tempspot,
+        precipspot;
+
+    x.domain(d3.extent(data, function (d) { return d.time; }));
+    y1.domain(dilate(d3.extent(data, function (d) { return d.temperature; })));
+    y2.domain(dilate(d3.extent(data, function (d) {
+        return d.precipIntensity;
+    })));
+
+    background = svg.append("g")
+        .attr("class", "background");
+
+
+    svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(xAxis);
+
+    svg.append("g")
+        .attr("class", "y axis")
+        .call(y1Axis);
+
+    svg.append("g")
+        .attr("class", "y2 axis")
+        .attr("transform", "translate(" + width + ",0)")
+        .call(y2Axis);
+
+    background.selectAll("rect")
+        .data(data.slice(0, -1))
+        .enter().append("rect")
+        .attr("class", function (d) { return d.icon; })
+        .attr("x", function (d) { return x(d.time); })
+        .attr("y", "0")
+        .attr("height", height)
+        .attr("width", width / data.length + 2)
+        .on("mouseover", function (d) {
+            set_weather(d);
+            tempspot
+                .style("display", "inherit")
+                .attr("cx", x(d.time))
+                .attr("cy", y1(d.temperature));
+            precipspot
+                .style("display", "inherit")
+                .attr("cx", x(d.time))
+                .attr("cy", y2(d.precipIntensity));
+        })
+        .on("mouseout", function () {
+            tempspot
+                .style("display", "none");
+            precipspot
+                .style("display", "none");
+            set_weather(current);
+        });
+
+    svg.append("path")
+        .datum(data)
+        .attr("class", "templine")
+        .attr("d", templine);
+
+    svg.append("path")
+        .datum(data)
+        .attr("class", "precipline")
+        .attr("d", precipline);
+
+    tempspot = svg.append("circle")
+        .attr("class", "spot tempspot")
+        .attr("r", 3.5);
+
+    precipspot = svg.append("circle")
+        .attr("class", "spot precipspot")
+        .attr("r", 3.5);
+}
+
+function process_data(text) {
+    var data = JSON.parse(text);
+    data.currently.time = new Date(data.currently.time * 1000);
+    console.log(data.hourly.data[0]);
+    set_weather(data.currently);
+    plot(data.hourly.data.slice(0, 26), data.currently);
+    gid("weather").style.display = "inherit";
+}
+
+function process_request(request) {
+    if (request.readyState === 4) {
+        if (request.status === 200) {
+            process_data(request.responseText);
+        } else {
+            console.log("There was a problem with the request.");
+        }
+    }
+}
+
+function get_weather(latitude, longitude) {
+    var httpRequest = new XMLHttpRequest(),
+        url = "weather/" + latitude + "/" + longitude;
+
+    httpRequest.onreadystatechange = function () {
+        process_request(httpRequest);
+    };
+    httpRequest.open("GET", url);
+    httpRequest.send();
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    navigator.geolocation.getCurrentPosition(function (position) {
+        get_weather(position.coords.latitude, position.coords.longitude);
+    });
+});