Forecast: JavaScript

Events

$(document).on("input", "input[type='range']", display);
$(document).on("change", "input[type='range']", analyze);

Application Functions

function display() {

  var m = $("#month").val().padStart(2, "0");
  var d = $("#day").val().padStart(2, "0");
  var h = $("#hour").val().padStart(2, "0");

  $("#display_month").text(m);
  $("#display_day").text(d);
  $("#display_hour").text(h);

}

function analyze() {

  var m = $("#month").val().padStart(2, "0");
  var d = $("#day").val().padStart(2, "0");
  var h = $("#hour").val().padStart(2, "0");

  var mdh = m + d + h;

  $("#display_temp").text("...");

  var path = "chris.k/temperature/main.py";
  var input = mdh;

  $.ajax({
    url: "https://ocadu.goodcodeclub.com/temperature/?path=" + path + "&input=" + input,
    success: drawPrediction
  })

}

function drawPrediction(data) {

  data = parseFloat(data);

  var m = $("#month").val().padStart(2, "0");
  var d = $("#day").val().padStart(2, "0");
  var h = $("#hour").val().padStart(2, "0");

  var mdh = m + d + h;

  svg.selectAll("circle.current").remove();

  $("#display_temp").text(data.toFixed(2));

  svg.append("circle")
    .attr("class", "current")
    .attr("cx", function() {
      return x(mdh);
    })
    .attr("cy", function() {
      return y(data);
    })
    .attr("r", 2)
    .style("fill", "red");

}

D3 Visualization

var width = 300;
var height = 200;

var x = d3.scaleLinear()
  .domain([0, 123123])
  .range([20, width - 10])

var y = d3.scaleLinear()
  .domain([40, -40])
  .range([0, height - 20])

var svg = d3.select("#graph")
  .append("svg")
  .attr("width", width)
  .attr("height", height)

svg.append("g")
  .call(d3.axisLeft(y))
  .attr("transform", "translate(30, 10)")

var href = "https://ocadu.goodcodeclub.com/temperature/data.csv";

function drawDots(dot) {

  svg.append("circle")
    .attr("cx", function() {
      return x(dot.monthdayhour);
    })
    .attr("cy", function() {
      return y(dot.DegreeC);
    })
    .attr("r", 1)
    .style("fill", "lightgreen");

}

d3.csv(href, drawDots);