Skip to content

Commit 80bf8bc

Browse files
Till1983Till1983
authored
Merge pull request #33 from codeuniversity/feature/correlations
Feature/correlation-plots
2 parents 040a714 + d4754e1 commit 80bf8bc

File tree

11 files changed

+262
-9
lines changed

11 files changed

+262
-9
lines changed

‎frontend/src/components/CorrelationGraphs/TemperatureNdviBarAndLine.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<v-container>
3+
<h2 class="pb-10">Temperature vs. NDVI</h2>
4+
<v-row justify="center">
5+
<div
6+
id="plotlyGraphTemperatureNdvi"
7+
style="width: 100%; height: 400px"
8+
class="d-flex justify-center"
9+
></div>
10+
</v-row>
11+
</v-container>
12+
</template>
13+
14+
<script>
15+
import axios from 'axios'
16+
import Plotly from 'plotly.js-dist-min'
17+
import { onMounted, ref, render } from 'vue'
18+
19+
export default {
20+
name: 'TemperatureNdviBarAndLine',
21+
setup() {
22+
const temperatureData = ref(null)
23+
const ndviData = ref(null)
24+
const startDate = ref(1514761200) // 2018-01-01
25+
const endDate = ref(1704063599) // 2023-12-31
26+
const temporalResolution = ref("Monthly") // options: "Daily", "Monthly"
27+
const aggregation = ref("Mean") // options: "Mean", "Median", "Max", "Min"
28+
29+
const fetchTemperatureData = async () => {
30+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index'
31+
const params = {
32+
weatherVariable: "temperature_2m",
33+
startDate: startDate.value,
34+
endDate: endDate.value,
35+
location: "TEMPELHOFER_FELD",
36+
temporalResolution: temporalResolution.value.toUpperCase(),
37+
aggregation: aggregation.value.toUpperCase()
38+
}
39+
40+
try {
41+
const response = await axios.get(apiUrl, { params })
42+
temperatureData.value = response.data
43+
renderPlot()
44+
} catch (error) {
45+
console.error("Error fetching temperature data:", error)
46+
}
47+
}
48+
49+
const fetchNdviData = async () => {
50+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
51+
const params = {
52+
startDate: startDate.value,
53+
endDate: endDate.value,
54+
location: "TEMPELHOFER_FELD",
55+
temporalResolution: temporalResolution.value.toUpperCase(),
56+
aggregation: aggregation.value.toUpperCase()
57+
}
58+
59+
try {
60+
const response = await axios.get(apiUrl, { params })
61+
ndviData.value = response.data
62+
renderPlot()
63+
} catch (error) {
64+
console.error("Error fetching NDVI data:", error)
65+
}
66+
}
67+
68+
const renderPlot = () => {
69+
if (temperatureData.value && ndviData.value) {
70+
const tempTimestamps = temperatureData.value.data.map(entry =>
71+
new Date(entry.timestamp * 1000).toISOString().split('T')[0]
72+
)
73+
const tempValues = temperatureData.value.data.map(entry => entry.value)
74+
const ndviTimestamps = ndviData.value.data.map(entry => new Date(entry.timestamp * 1000))
75+
const ndviValues = ndviData.value.data.map(entry => entry.value)
76+
77+
const tempTrace = {
78+
x: tempTimestamps,
79+
y: tempValues,
80+
type: 'bar', // can change to lines+markers
81+
name: 'Temperature (°C)',
82+
marker: { color: 'red' }
83+
};
84+
85+
const ndviTrace = {
86+
x: ndviTimestamps,
87+
y: ndviValues,
88+
mode: 'lines+markers',
89+
name: 'NDVI',
90+
line: { color: 'blue' },
91+
yaxis: 'y2',
92+
};
93+
94+
const layout = {
95+
title: 'NDVI vs. Monthly Temperature for Tempelhofer Feld (2018-2023)',
96+
xaxis: { title: 'Date', type: 'date', rangeslider: { visible: true } },
97+
yaxis: { title: 'Temperature (°C)' },
98+
yaxis2: {
99+
title: 'NDVI',
100+
overlaying: 'y',
101+
side: 'right',
102+
},
103+
legend: { x: 1.1, y: 0.5 },
104+
template: 'plotly_white'
105+
};
106+
107+
Plotly.newPlot('plotlyGraphTemperatureNdvi', [tempTrace, ndviTrace], layout);
108+
}
109+
}
110+
111+
onMounted(() => {
112+
fetchTemperatureData()
113+
fetchNdviData()
114+
})
115+
}
116+
}
117+
</script>
118+
119+
<style scoped></style>

‎frontend/src/components/CorrelationGraphs/TemperatureNdviScatter.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<template>
2+
<v-container>
3+
<v-row justify="center" class="pb-16">
4+
<div
5+
id="plotlyScatterTemperatureNdvi"
6+
style="width: 100%; height: 400px"
7+
class="d-flex justify-center"
8+
></div>
9+
</v-row>
10+
</v-container>
11+
</template>
12+
13+
<script>
14+
import axios from 'axios'
15+
import Plotly from 'plotly.js-dist-min'
16+
import { onMounted, ref, render } from 'vue'
17+
18+
export default {
19+
name: 'TemperatureNdviScatter',
20+
setup() {
21+
const temperatureData = ref(null)
22+
const ndviData = ref(null)
23+
const startDate = ref(1514761200) // 2018-01-01
24+
const endDate = ref(1704063599) // 2023-12-31
25+
const temporalResolution = ref("Monthly") // options: "Daily", "Monthly"
26+
const aggregation = ref("Mean") // options: "Mean", "Median", "Max", "Min"
27+
28+
const fetchTemperatureData = async () => {
29+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index'
30+
const params = {
31+
weatherVariable: "temperature_2m",
32+
startDate: startDate.value,
33+
endDate: endDate.value,
34+
location: "TEMPELHOFER_FELD",
35+
temporalResolution: temporalResolution.value.toUpperCase(),
36+
aggregation: aggregation.value.toUpperCase()
37+
}
38+
39+
try {
40+
const response = await axios.get(apiUrl, { params })
41+
temperatureData.value = response.data
42+
renderPlot()
43+
} catch (error) {
44+
console.error("Error fetching temperature data:", error)
45+
}
46+
}
47+
48+
const fetchNdviData = async () => {
49+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
50+
const params = {
51+
startDate: startDate.value,
52+
endDate: endDate.value,
53+
location: "TEMPELHOFER_FELD",
54+
temporalResolution: temporalResolution.value.toUpperCase(),
55+
aggregation: aggregation.value.toUpperCase()
56+
}
57+
58+
try {
59+
const response = await axios.get(apiUrl, { params })
60+
ndviData.value = response.data
61+
renderPlot()
62+
} catch (error) {
63+
console.error("Error fetching NDVI data:", error)
64+
}
65+
}
66+
67+
const calculateRegression = (xValues, yValues) => {
68+
const n = xValues.length
69+
const sumX = xValues.reduce((acc, val) => acc + val, 0)
70+
const sumY = yValues.reduce((acc, val) => acc + val, 0)
71+
const sumXY = xValues.reduce((acc, val, index) => acc + val * yValues[index], 0)
72+
const sumX2 = xValues.reduce((acc, val) => acc + val * val, 0)
73+
74+
const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX)
75+
const intercept = (sumY - slope * sumX) / n
76+
77+
return { slope, intercept }
78+
}
79+
80+
const renderPlot = () => {
81+
if (temperatureData.value && ndviData.value) {
82+
const tempValues = temperatureData.value.data.map(entry => entry.value)
83+
const ndviValues = ndviData.value.data.map(entry => entry.value)
84+
85+
const { slope, intercept } = calculateRegression(tempValues, ndviValues)
86+
const trendLineValues = tempValues.map(x => slope * x + intercept)
87+
const trendlineEquation = `y = ${slope.toFixed(2)}x + ${intercept.toFixed(2)}`;
88+
89+
const scatterTrace = {
90+
x: tempValues,
91+
y: ndviValues,
92+
mode: 'markers',
93+
marker: { color: 'green' },
94+
type: 'scatter',
95+
name: 'Temperature vs NDVI'
96+
}
97+
98+
const trendLineTrace = {
99+
x: tempValues,
100+
y: trendLineValues,
101+
mode: 'lines',
102+
line: { color: 'grey', dash: 'dash' },
103+
type: 'scatter',
104+
name: `Trend Line: ${trendlineEquation}`
105+
}
106+
107+
const layout = {
108+
title: 'Scatter Plot of Temperature vs. NDVI',
109+
xaxis: { title: 'Temperature (°C)' },
110+
yaxis: { title: 'NDVI' },
111+
template: 'plotly_white',
112+
legend: { x: 1.02, y: 0.5 },
113+
}
114+
115+
Plotly.newPlot('plotlyScatterTemperatureNdvi', [scatterTrace, trendLineTrace], layout)
116+
}
117+
}
118+
119+
onMounted(() => {
120+
fetchTemperatureData()
121+
fetchNdviData()
122+
})
123+
}
124+
}
125+
</script>
126+
127+
<style scoped></style>
128+

‎frontend/src/components/MainSection.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
22
<v-container class="main-section" fluid>
3+
<TemperatureNdviBarAndLine />
4+
<TemperatureNdviScatter />
35
<Images />
46
<NdviComparisonGraph />
57
<NdviSelectMonthGraph />
@@ -22,6 +24,8 @@ import MeanSoilTempGraph from "./WeatherGraphs/SoilTempGraph.vue"
2224
import MeanSoilMoistureGraph from "./WeatherGraphs/SoilMoistureGraph.vue"
2325
import AugustMeanSoilTempGraph from "./WeatherGraphs/AugustSoilTempGraph.vue"
2426
import SelectMonthMeanSoilTempGraph from "./WeatherGraphs/SelectMonthSoilTempGraph.vue"
27+
import TemperatureNdviBarAndLine from "./CorrelationGraphs/TemperatureNdviBarAndLine.vue"
28+
import TemperatureNdviScatter from "./CorrelationGraphs/TemperatureNdviScatter.vue"
2529
2630
export default {
2731
name: 'MainSection',
@@ -34,7 +38,9 @@ export default {
3438
MeanSoilTempGraph,
3539
MeanSoilMoistureGraph,
3640
AugustMeanSoilTempGraph,
37-
SelectMonthMeanSoilTempGraph
41+
SelectMonthMeanSoilTempGraph,
42+
TemperatureNdviBarAndLine,
43+
TemperatureNdviScatter
3844
}
3945
}
4046
</script>

‎frontend/src/components/NdviGraphs/NdviComparisonGraph.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default {
5454
const aggregationOptions = ["Mean", "Median", "Max", "Min"]
5555
5656
const fetchNdviData = async (params) => {
57-
const apiUrl = 'http://localhost:8000/index/ndvi'
57+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
5858
try {
5959
const response = await axios.get(apiUrl, { params })
6060
ndviData.value = response.data

‎frontend/src/components/NdviGraphs/NdviOverlayGraph.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
const years = [2018, 2019, 2020, 2021, 2022, 2023]
2626
2727
const fetchNdviData = async (params) => {
28-
const apiUrl = 'http://localhost:8000/index/ndvi'
28+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
2929
try {
3030
const response = await axios.get(apiUrl, { params })
3131
ndviData.value = response.data

‎frontend/src/components/NdviGraphs/NdviSelectMonthGraph.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default {
4242
const endDate = ref(1704063599) // 2023-12-31
4343
4444
const fetchNdviData = async () => {
45-
const apiUrl = 'http://localhost:8000/index/ndvi'
45+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
4646
try {
4747
const response = await axios.get(apiUrl, {
4848
params: {

‎frontend/src/components/WeatherGraphs/AugustSoilTempGraph.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default {
2020
const plotlyChart = ref(null);
2121
2222
const fetchData = async () => {
23-
const apiUrl = 'http://localhost:8000/weather/index';
23+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
2424
2525
const params = {
2626
weatherVariable: "soil_temperature_0_to_7cm",

‎frontend/src/components/WeatherGraphs/MedianTempGraph.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default {
3636
const plotlyChart = ref(null);
3737
3838
const fetchTemperatureData = async () => {
39-
const apiUrl = 'http://localhost:8000/weather/index';
39+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
4040
4141
const params = {
4242
weatherVariable: "temperature_2m",

‎frontend/src/components/WeatherGraphs/SelectMonthSoilTempGraph.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default {
4141
const plotlyChart = ref(null);
4242
4343
const fetchData = async () => {
44-
const apiUrl = 'http://localhost:8000/weather/index';
44+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
4545
4646
const params = {
4747
weatherVariable: "soil_temperature_0_to_7cm",

‎frontend/src/components/WeatherGraphs/SoilMoistureGraph.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
const plotlyChart = ref(null);
3737
3838
const fetchData = async () => {
39-
const apiUrl = 'http://localhost:8000/weather/index';
39+
const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
4040
4141
const params = {
4242
weatherVariable: "soil_temperature_0_to_7cm",

0 commit comments

Comments
 (0)