burg temperature graph - corrections

index.html

@@ -1990,7 +1990,7 @@
       <div id="burgBody" style="padding-bottom: .3em">
         <div style="display: flex; align-items: center">
           <svg data-tip="Burg emblem. Click to edit" class="pointer" viewBox="0 0 200 200" width="13em" height="13em"><use id="burgEmblem"></use></svg>
-          <div>
+          <div style="display: grid; grid-auto-rows: minmax(1.6em, auto)">
             <div id="burgProvinceAndState" style="font-style: italic; max-width: 16em"></div>
 
             <div>
@@ -2039,6 +2039,7 @@
               <div class="label">Temperature:</div>
               <span id="burgTemperature"></span>, like in
               <span id="burgTemperatureLikeIn"></span>
+              <i id="burgTemperatureGraph" data-tip="Show temperature graph for the burg" class="icon-chart-area pointer"></i>
             </div>
 
             <div data-tip="Burg height above mean sea level">
@@ -2085,7 +2086,6 @@
         <button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
         <button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
         <button id="burgRemove" data-tip="Remove non-capital burg. Shortcut: Delete" class="icon-trash fastDelete"></button>
-        <button id="burgTemperatureGraph" data-tip="Shows the temperature graph in the burg" class="icon-chart-area"></button>
       </div>
     </div>
 

modules/ui/burg-editor.js

@@ -52,7 +52,7 @@ function editBurg(id) {
   document.getElementById("burglLegend").addEventListener("click", editBurgLegend);
   document.getElementById("burgLock").addEventListener("click", toggleBurgLockButton);
   document.getElementById("burgRemove").addEventListener("click", removeSelectedBurg);
-  document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraphs);
+  document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraph);
 
   function updateBurgValues() {
     const id = +elSelected.attr("data-id");
@@ -543,11 +543,11 @@ function editBurg(id) {
     const name = elSelected.text();
     editNotes("burg" + id, name);
   }
-  function showTemperatureGraphs() {
-    const id = elSelected.attr("data-id");
-	showTGForBurg(id);
-  }
 
+  function showTemperatureGraph() {
+    const id = elSelected.attr("data-id");
+    showBurgTemperatureGraph(id);
+  }
 
   function removeSelectedBurg() {
     const id = +elSelected.attr("data-id");

modules/ui/temperature-graph.js

@@ -1,14 +1,14 @@
 "use strict";
 
-function showTGForBurg(id) {
+function showBurgTemperatureGraph(id) {
   const b = pack.burgs[id];
   const lat = mapCoordinates.latN - (b.y / graphHeight) * mapCoordinates.latT;
   const temperature = grid.cells.temp[pack.cells.g[b.cell]];
   const prec = grid.cells.prec[pack.cells.g[b.cell]];
 
+  // prettier-ignore
   const weights = [
     [// Layer0
-			//IN0               IN1
       [10.782752257744338, 2.7100404240962126],
       [-2.8226802110591462, 51.62920138583541],
       [-6.6250956268643835, 4.427939197315455],
@@ -39,36 +39,39 @@ function showTGForBurg(id) {
 
   let lastIn = In1;
   let lstOut = [];
+
   for (let levelN = 0; levelN < weights.length; levelN++) {
-		let layerN = weights[levelN];
+    const layerN = weights[levelN];
     for (let i = 0; i < layerN.length; i++) {
       lstOut[i] = 0;
-			for (let j = 0; j < layerN[i].length ; j++)
+      for (let j = 0; j < layerN[i].length; j++) {
         lstOut[i] = lstOut[i] + lastIn[j] * layerN[i][j];
-			//Sigmoid
+      }
+      // sigmoid
       lstOut[i] = 1 / (1 + Math.exp(-lstOut[i]));
     }
     lastIn = lstOut.slice(0);
   }
 
-	//From [0,1] to [min,max]
+  // Standard deviation for average temperature for the year from [0,1] to [min,max]
-	//Standard deviation for average temperature for the year
   const yearSig = lstOut[0] * 62.9466411977018 + 0.28613807855649165;
   // Standard deviation for the difference between the minimum and maximum temperatures for the year
-	const yearDelTmpSig = (lstOut[1]*13.541688670361175+0.1414213562373084) > yearSig ? yearSig : (lstOut[1]*13.541688670361175+0.1414213562373084);
+  const yearDelTmpSig = lstOut[1] * 13.541688670361175 + 0.1414213562373084 > yearSig ? yearSig : lstOut[1] * 13.541688670361175 + 0.1414213562373084;
   // Expected value for the difference between the minimum and maximum temperatures for the year
   const yearDelTmpMu = lstOut[2] * 15.266666666666667 + 0.6416666666666663;
 
   // Temperature change shape
-	//const formTmp = -Math.cos(data*2*Math.PI) / 2;
+  const delT = yearDelTmpMu / 2 + (0.5 * yearDelTmpSig) / 2;
-	const delT = yearDelTmpMu/2+0.5*yearDelTmpSig/2;
+  const minT = temperature - (yearSig + delT > 15 ? yearSig + delT : 15);
-	const minT = temperature - ((yearSig+delT) > 15 ? (yearSig+delT) : 15);
   const maxT = temperature + (temperature - minT);
 
-	const chartWidth = window.innerWidth/2,
+  // height of land/sea profile, excluding the biomes data below
-	chartHeight = 300; // height of our land/sea profile, excluding the biomes data below
+  const chartWidth = window.innerWidth / 2;
-	const xOffset = 80,
+  const chartHeight = 300;
-    yOffset = 10; // this is our drawing starting point from top-left (y = 0) of SVG
+
+  // drawing starting point from top-left (y = 0) of SVG
+  const xOffset = 80;
+  const yOffset = 10;
 
   const xscale = d3.scaleLinear().domain([0, 360]).range([0, chartWidth]);
   const xscale_inv = d3.scaleLinear().domain([0, chartWidth]).range([0, 360]);
@@ -78,64 +81,108 @@ function showTGForBurg(id) {
   const dataAverTmp = [];
   const dataMinTmp = [];
   const dataMaxTmp = [];
+
   for (let i = 0; i < 360; i++) {
-		let formTmp = Math.cos(i/360*2*Math.PI) / 2;
+    let formTmp = Math.cos((i / 360) * 2 * Math.PI) / 2;
     if (lat > 0) formTmp = -formTmp;
     const averT = formTmp * yearSig + temperature;
-		const delT = yearDelTmpMu/2+formTmp*yearDelTmpSig/2;
+    const delT = yearDelTmpMu / 2 + (formTmp * yearDelTmpSig) / 2;
     dataAverTmp.push({x: xscale(i) + xOffset, y: yscale(averT) + yOffset});
     dataMinTmp.push({x: xscale(i) + xOffset, y: yscale(averT - delT) + yOffset});
     dataMaxTmp.push({x: xscale(i) + xOffset, y: yscale(averT + delT) + yOffset});
   }
 
-  document.getElementById("epControls").style.visibility = "hidden";
+  drawGraph();
+  $("#alert").dialog({title: "Anual temperature in " + b.name, position: {my: "center", at: "center", of: "svg"}});
 
-  $("#elevationProfile").dialog({
+  function drawGraph() {
-    title: "Seasonal temperature schedule",
+    alertMessage.innerHTML = "";
-    resizable: false,
-    width: window.width,
-    close: closeTGForBurg,
-    position: {my: "left top", at: "left+20 bottom-500", of: window, collision: "fit"}
-  });
 
-  draw();
-
-  function draw() {
-
-    document.getElementById("elevationGraph").innerHTML = "";
     const legendSize = 60;
     const chart = d3
-      .select("#elevationGraph")
+      .select("#alertMessage")
       .append("svg")
       .attr("width", chartWidth + 120)
       .attr("height", chartHeight + yOffset + legendSize)
       .attr("id", "elevationSVG")
       .attr("class", "epbackground");
-    // arrow-head definition
-    chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2");
 
-	let Gen = d3.line().curve(d3.curveBasis).x((p) => p.x).y((p) => p.y);
+    // arrow-head definition
+    chart
+      .append("defs")
+      .append("marker")
+      .attr("id", "arrowhead")
+      .attr("orient", "auto")
+      .attr("markerWidth", "2")
+      .attr("markerHeight", "4")
+      .attr("refX", "0.1")
+      .attr("refY", "2");
+
+    let Gen = d3
+      .line()
+      .curve(d3.curveBasis)
+      .x(p => p.x)
+      .y(p => p.y);
 
     //print graphs
-	chart.append("g").append("path").attr("d", Gen(dataAverTmp))
+    chart
-		.attr("fill", "none").attr("stroke", "orange").on("mousemove", printVal).style("stroke-width", "2");
+      .append("g")
-	chart.append("g").append("path").attr("d", Gen(dataMinTmp))
+      .append("path")
-		.attr("fill", "none").attr("stroke", "blue").on("mousemove", printVal).style("stroke-width", "2");
+      .attr("d", Gen(dataAverTmp))
-	chart.append("g").append("path").attr("d", Gen(dataMaxTmp))
+      .attr("fill", "none")
-		.attr("fill", "none").attr("stroke", "red").on("mousemove", printVal).style("stroke-width", "2");
+      .attr("stroke", "orange")
+      .on("mousemove", printVal)
+      .style("stroke-width", "2");
+    chart
+      .append("g")
+      .append("path")
+      .attr("d", Gen(dataMinTmp))
+      .attr("fill", "none")
+      .attr("stroke", "blue")
+      .on("mousemove", printVal)
+      .style("stroke-width", "2");
+    chart.append("g").append("path").attr("d", Gen(dataMaxTmp)).attr("fill", "none").attr("stroke", "red").on("mousemove", printVal).style("stroke-width", "2");
 
     //print legend
-	chart.append("circle").attr("cx",chartWidth*1/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "red")
+    chart
-	chart.append("text").attr("x", chartWidth*1/4+20).attr("y", chartHeight + yOffset + legendSize*0.8)
+      .append("circle")
-		.text("Day temperature").style("font-size", "10px").attr("alignment-baseline","middle")
+      .attr("cx", (chartWidth * 1) / 4)
-	chart.append("circle").attr("cx",chartWidth*2/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "orange")
+      .attr("cy", chartHeight + yOffset + legendSize * 0.8)
-	chart.append("text").attr("x", chartWidth*2/4+20).attr("y", chartHeight + yOffset + legendSize*0.8)
+      .attr("r", 4)
-		.text("Average daily temperature").style("font-size", "10px").attr("alignment-baseline","middle")
+      .style("fill", "red");
-	chart.append("circle").attr("cx",chartWidth*3/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "blue")
+    chart
-	chart.append("text").attr("x", chartWidth*3/4+20).attr("y", chartHeight + yOffset + legendSize*0.8)
+      .append("text")
-		.text("Night temperature").style("font-size", "10px").attr("alignment-baseline","middle")
+      .attr("x", (chartWidth * 1) / 4 + 20)
-	
+      .attr("y", chartHeight + yOffset + legendSize * 0.8)
-	
+      .text("Day temperature")
+      .style("font-size", "10px")
+      .attr("alignment-baseline", "middle");
+    chart
+      .append("circle")
+      .attr("cx", (chartWidth * 2) / 4)
+      .attr("cy", chartHeight + yOffset + legendSize * 0.8)
+      .attr("r", 4)
+      .style("fill", "orange");
+    chart
+      .append("text")
+      .attr("x", (chartWidth * 2) / 4 + 20)
+      .attr("y", chartHeight + yOffset + legendSize * 0.8)
+      .text("Average daily temperature")
+      .style("font-size", "10px")
+      .attr("alignment-baseline", "middle");
+    chart
+      .append("circle")
+      .attr("cx", (chartWidth * 3) / 4)
+      .attr("cy", chartHeight + yOffset + legendSize * 0.8)
+      .attr("r", 4)
+      .style("fill", "blue");
+    chart
+      .append("text")
+      .attr("x", (chartWidth * 3) / 4 + 20)
+      .attr("y", chartHeight + yOffset + legendSize * 0.8)
+      .text("Night temperature")
+      .style("font-size", "10px")
+      .attr("alignment-baseline", "middle");
 
     //print title
     let timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000);
@@ -145,7 +192,7 @@ function showTGForBurg(id) {
     function printVal() {
       let m = d3.mouse(this);
       let tmp = convertTemperature(yscale_inv(m[1] - yOffset).toFixed(1));
-		let month = months[parseInt(xscale_inv(m[0]-xOffset)/360*12)];
+      let month = months[parseInt((xscale_inv(m[0] - xOffset) / 360) * 12)];
       chart.attr("data-tip", tmp + " in " + month);
       clearTimeout(timerId);
       timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000);
@@ -155,7 +202,7 @@ function showTGForBurg(id) {
       .axisBottom(xscale)
       .ticks(10)
       .tickFormat(function (d) {
-        return months[parseInt(d/360*12)];
+        return months[parseInt((d / 360) * 12)];
       });
     const yAxis = d3
       .axisLeft(yscale)
@@ -195,7 +242,9 @@ function showTGForBurg(id) {
 
     if (minT < 0 && maxT > 0) {
       //add zero lv
-		chart.append("g").append("line")
+      chart
+        .append("g")
+        .append("line")
         .attr("x1", xscale(0) + xOffset)
         .attr("y1", yscale(0) + yOffset)
         .attr("x2", xscale(360) + xOffset)
@@ -212,9 +261,4 @@ function showTGForBurg(id) {
       .attr("transform", "translate(" + xOffset + "," + yOffset + ")")
       .call(yGrid);
   }
-  function closeTGForBurg() {
-	document.getElementById("epControls").style.visibility = "visible";
-    document.getElementById("elevationGraph").innerHTML = "";
-    modules.elevation = false;
-  }
 }