Week 4

by RolloRallo

HTML

<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="container">

  <h1>
    Simple forecasting
  </h1>

  <div id="graph"></div>

  <h6>Month</h6>
  <input id="month" type="range" value="1" min="1" max="12">

  <h6>Day</h6>
  <input id="day" type="range" value="1" min="1" max="30">

  <h6>Hour</h6>
  <input id="hour" type="range" value="0" min="0" max="23">

  <h5>
    Average temperature for
    <br>
    <span id="display_month">{month}</span>
    /
    <span id="display_day">{day}</span>
    /
    <span id="display_hour">{hour}</span>:00 is:

  </h5>

  <h3>

    <span id="display_temp">{temp}</span>&deg; celsius

  </h3>

</div>

CSS

#container
{
  width:300px;
  text-align:center;
  margin:auto;
  font-family:Helvetica;
}

#graph
{
  border:1px solid #000;
}

input
{
  width:100%;
}

h6
{
  margin-bottom:0px;
}

JavaScript

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

// FUNCTION
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 = "hochan.ryu/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")

}

/* https://ocadu.goodcodeclub.com/temperature/?path=hochan.ryu/temperature/main.py&input=071312 */

// D3 CODE

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

...