mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
burg temperature graph - clean up
This commit is contained in:
Azgaar
parent
5f0be0401e
commit
6beb262e91
2 changed files with 49 additions and 137 deletions
|
|
@ -98,147 +98,68 @@ function showBurgTemperatureGraph(id) {
|
||||||
function drawGraph() {
|
function drawGraph() {
|
||||||
alertMessage.innerHTML = "";
|
alertMessage.innerHTML = "";
|
||||||
|
|
||||||
|
const makeCurve = d3
|
||||||
|
.line()
|
||||||
|
.curve(d3.curveBasis)
|
||||||
|
.x(p => p.x)
|
||||||
|
.y(p => p.y);
|
||||||
|
const getCurve = data => round(makeCurve(data), 2);
|
||||||
|
|
||||||
const legendSize = 60;
|
const legendSize = 60;
|
||||||
const chart = d3
|
const chart = d3
|
||||||
.select("#alertMessage")
|
.select("#alertMessage")
|
||||||
.append("svg")
|
.append("svg")
|
||||||
.attr("width", chartWidth + 120)
|
.attr("width", chartWidth + 120)
|
||||||
.attr("height", chartHeight + yOffset + legendSize)
|
.attr("height", chartHeight + yOffset + legendSize);
|
||||||
.attr("id", "elevationSVG")
|
|
||||||
.attr("class", "epbackground");
|
|
||||||
|
|
||||||
// arrow-head definition
|
const curves = chart.append("g").attr("fill", "none").style("stroke-width", 2.5);
|
||||||
chart
|
curves.append("path").attr("d", getCurve(dataAverTmp)).attr("stroke", "orange").on("mousemove", printVal);
|
||||||
.append("defs")
|
curves.append("path").attr("d", getCurve(dataMinTmp)).attr("stroke", "blue").on("mousemove", printVal);
|
||||||
.append("marker")
|
curves.append("path").attr("d", getCurve(dataMaxTmp)).attr("stroke", "red").on("mousemove", printVal);
|
||||||
.attr("id", "arrowhead")
|
|
||||||
.attr("orient", "auto")
|
|
||||||
.attr("markerWidth", "2")
|
|
||||||
.attr("markerHeight", "4")
|
|
||||||
.attr("refX", "0.1")
|
|
||||||
.attr("refY", "2");
|
|
||||||
|
|
||||||
let Gen = d3
|
const legend = chart.append("g");
|
||||||
.line()
|
const legendY = chartHeight + yOffset + legendSize * 0.9;
|
||||||
.curve(d3.curveBasis)
|
const legendX = n => (chartWidth * n) / 4;
|
||||||
.x(p => p.x)
|
const legendTextPadding = 10;
|
||||||
.y(p => p.y);
|
const legendTextX = n => legendX(n) + legendTextPadding;
|
||||||
|
legend.append("circle").attr("cx", legendX(1)).attr("cy", legendY).attr("r", 4).style("fill", "red");
|
||||||
//print graphs
|
legend.append("text").attr("x", legendTextX(1)).attr("y", legendY).attr("alignment-baseline", "central").text("Day temperature");
|
||||||
chart
|
legend.append("circle").attr("cx", legendX(2)).attr("cy", legendY).attr("r", 4).style("fill", "orange");
|
||||||
.append("g")
|
legend.append("text").attr("x", legendTextX(2)).attr("y", legendY).attr("alignment-baseline", "central").text("Mean daily temperature");
|
||||||
.append("path")
|
legend.append("circle").attr("cx", legendX(3)).attr("cy", legendY).attr("r", 4).style("fill", "blue");
|
||||||
.attr("d", Gen(dataAverTmp))
|
legend.append("text").attr("x", legendTextX(3)).attr("y", legendY).attr("alignment-baseline", "central").text("Night temperature");
|
||||||
.attr("fill", "none")
|
|
||||||
.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
|
|
||||||
.append("text")
|
|
||||||
.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);
|
|
||||||
|
|
||||||
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||||
//Val under line
|
|
||||||
function printVal() {
|
function printVal() {
|
||||||
let m = d3.mouse(this);
|
const [x, y] = d3.mouse(this);
|
||||||
let tmp = convertTemperature(yscale_inv(m[1] - yOffset).toFixed(1));
|
const tmp = convertTemperature(yscale_inv(y - yOffset));
|
||||||
let month = months[parseInt((xscale_inv(m[0] - xOffset) / 360) * 12)];
|
const month = months[parseInt((xscale_inv(x - xOffset) / 360) * 12)];
|
||||||
chart.attr("data-tip", tmp + " in " + month);
|
chart.attr("data-tip", `${month} temperature: ${tmp}`);
|
||||||
clearTimeout(timerId);
|
|
||||||
timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const xAxis = d3
|
const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight);
|
||||||
.axisBottom(xscale)
|
const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth);
|
||||||
.ticks(10)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return months[parseInt((d / 360) * 12)];
|
|
||||||
});
|
|
||||||
const yAxis = d3
|
|
||||||
.axisLeft(yscale)
|
|
||||||
.ticks(5)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return convertTemperature(d);
|
|
||||||
});
|
|
||||||
|
|
||||||
const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight).tickFormat("");
|
const grid = chart.append("g").attr("class", "epgrid").attr("stroke-dasharray", "4 1");
|
||||||
const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth).tickFormat("");
|
grid
|
||||||
|
|
||||||
chart
|
|
||||||
.append("g")
|
.append("g")
|
||||||
.attr("id", "epxaxis")
|
.attr("transform", `translate(${xOffset}, ${chartHeight + yOffset})`)
|
||||||
.attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset + 20) + ")")
|
|
||||||
.call(xAxis)
|
|
||||||
.selectAll("text")
|
|
||||||
.style("text-anchor", "center")
|
|
||||||
.attr("transform", function (d) {
|
|
||||||
return "rotate(0)"; // used to rotate labels, - anti-clockwise, + clockwise
|
|
||||||
});
|
|
||||||
|
|
||||||
chart
|
|
||||||
.append("g")
|
|
||||||
.attr("id", "epyaxis")
|
|
||||||
.attr("transform", "translate(" + parseInt(+xOffset - 10) + "," + parseInt(+yOffset) + ")")
|
|
||||||
.call(yAxis);
|
|
||||||
|
|
||||||
// add the X gridlines
|
|
||||||
chart
|
|
||||||
.append("g")
|
|
||||||
.attr("id", "epxgrid")
|
|
||||||
.attr("class", "epgrid")
|
|
||||||
.attr("stroke-dasharray", "4 1")
|
|
||||||
.attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset) + ")")
|
|
||||||
.call(xGrid);
|
.call(xGrid);
|
||||||
|
grid.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yGrid);
|
||||||
|
grid.selectAll("text").remove();
|
||||||
|
|
||||||
|
const formatX = d => months[parseInt((d / 360) * 12)];
|
||||||
|
const xAxis = d3.axisBottom(xscale).ticks(10).tickFormat(formatX);
|
||||||
|
|
||||||
|
const formatY = d => convertTemperature(d);
|
||||||
|
const yAxis = d3.axisLeft(yscale).ticks(5).tickFormat(formatY);
|
||||||
|
|
||||||
|
chart
|
||||||
|
.append("g")
|
||||||
|
.attr("transform", `translate(${xOffset}, ${chartHeight + yOffset})`)
|
||||||
|
.call(xAxis);
|
||||||
|
chart.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yAxis);
|
||||||
|
|
||||||
if (minT < 0 && maxT > 0) {
|
if (minT < 0 && maxT > 0) {
|
||||||
//add zero lv
|
//add zero lv
|
||||||
|
|
@ -251,14 +172,5 @@ function showBurgTemperatureGraph(id) {
|
||||||
.attr("y2", yscale(0) + yOffset)
|
.attr("y2", yscale(0) + yOffset)
|
||||||
.attr("stroke", "black");
|
.attr("stroke", "black");
|
||||||
}
|
}
|
||||||
|
|
||||||
// add the Y gridlines
|
|
||||||
chart
|
|
||||||
.append("g")
|
|
||||||
.attr("id", "epygrid")
|
|
||||||
.attr("class", "epgrid")
|
|
||||||
.attr("stroke-dasharray", "4 1")
|
|
||||||
.attr("transform", "translate(" + xOffset + "," + yOffset + ")")
|
|
||||||
.call(yGrid);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
function convertTemperature(temp) {
|
function convertTemperature(temp) {
|
||||||
switch (temperatureScale.value) {
|
switch (temperatureScale.value) {
|
||||||
case "°C":
|
case "°C":
|
||||||
return temp + "°C";
|
return rn(temp) + "°C";
|
||||||
case "°F":
|
case "°F":
|
||||||
return rn((temp * 9) / 5 + 32) + "°F";
|
return rn((temp * 9) / 5 + 32) + "°F";
|
||||||
case "K":
|
case "K":
|
||||||
|
|
@ -21,7 +21,7 @@ function convertTemperature(temp) {
|
||||||
case "°Rø":
|
case "°Rø":
|
||||||
return rn((temp * 21) / 40 + 7.5) + "°Rø";
|
return rn((temp * 21) / 40 + 7.5) + "°Rø";
|
||||||
default:
|
default:
|
||||||
return temp + "°C";
|
return rn(temp) + "°C";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue