Skip to content

Commit 8ceb420

Browse files
Reece-EdwardsReece-Edwards
committed
added temperature data and graph
1 parent 59fd240 commit 8ceb420

7 files changed

Lines changed: 342 additions & 4 deletions

File tree

‎Datasets/inflation-1989-2025.csv‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"year","rate"
2+
"1989","5.7"
3+
"1990","8.0"
4+
"1991","7.5"
5+
"1992","4.6"
6+
"1993","2.6"
7+
"1994","2.2"
8+
"1995","2.7"
9+
"1996","2.9"
10+
"1997","2.2"
11+
"1998","1.8"
12+
"1999","1.7"
13+
"2000","1.2"
14+
"2001","1.6"
15+
"2002","1.5"
16+
"2003","1.4"
17+
"2004","1.4"
18+
"2005","2.1"
19+
"2006","2.5"
20+
"2007","2.4"
21+
"2008","3.5"
22+
"2009","2.0"
23+
"2010","2.5"
24+
"2011","3.8"
25+
"2012","2.6"
26+
"2013","2.3"
27+
"2014","1.5"
28+
"2015","0.4"
29+
"2016","1.0"
30+
"2017","2.6"
31+
"2018","2.3"
32+
"2019","1.7"
33+
"2020","1.0"
34+
"2021","2.5"
35+
"2022","7.9"
36+
"2023","6.8"
37+
"2024","3.3"
38+
"2025","3.9"

‎Datasets/uk-mean-temperature.csv‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
Year,Annual mean temperature (°C)
2+
1884,8.48
3+
1885,7.36
4+
1886,7.45
5+
1887,7.51
6+
1888,7.28
7+
1889,8.01
8+
1890,7.96
9+
1891,7.60
10+
1892,7.01
11+
1893,8.78
12+
1894,8.19
13+
1895,7.55
14+
1896,8.26
15+
1897,8.23
16+
1898,8.88
17+
1899,8.57
18+
1900,8.28
19+
1901,8.08
20+
1902,7.73
21+
1903,8.02
22+
1904,7.99
23+
1905,8.19
24+
1906,8.29
25+
1907,7.83
26+
1908,8.31
27+
1909,7.52
28+
1910,8.09
29+
1911,8.81
30+
1912,8.17
31+
1913,8.59
32+
1914,8.70
33+
1915,7.81
34+
1916,8.11
35+
1917,7.52
36+
1918,8.33
37+
1919,7.42
38+
1920,8.45
39+
1921,9.24
40+
1922,7.63
41+
1923,7.96
42+
1924,8.19
43+
1925,8.12
44+
1926,8.58
45+
1927,8.06
46+
1928,8.35
47+
1929,7.98
48+
1930,8.29
49+
1931,7.98
50+
1932,8.35
51+
1933,8.82
52+
1934,8.87
53+
1935,8.52
54+
1936,8.26
55+
1937,8.33
56+
1938,8.92
57+
1939,8.57
58+
1940,8.01
59+
1941,7.96
60+
1942,8.03
61+
1943,8.88
62+
1944,8.44
63+
1945,9.13
64+
1946,8.35
65+
1947,8.37
66+
1948,8.81
67+
1949,9.34
68+
1950,8.30
69+
1951,8.11
70+
1952,7.99
71+
1953,8.91
72+
1954,8.13
73+
1955,8.23
74+
1956,7.90
75+
1957,8.84
76+
1958,8.25
77+
1959,9.24
78+
1960,8.54
79+
1961,8.67
80+
1962,7.56
81+
1963,7.41
82+
1964,8.31
83+
1965,7.76
84+
1966,8.19
85+
1967,8.47
86+
1968,8.16
87+
1969,8.12
88+
1970,8.31
89+
1971,8.73
90+
1972,8.10
91+
1973,8.43
92+
1974,8.38
93+
1975,8.77
94+
1976,8.74
95+
1977,8.27
96+
1978,8.23
97+
1979,7.60
98+
1980,8.26
99+
1981,8.10
100+
1982,8.65
101+
1983,8.83
102+
1984,8.58
103+
1985,7.79
104+
1986,7.68
105+
1987,8.00
106+
1988,8.73
107+
1989,9.23
108+
1990,9.38
109+
1991,8.54
110+
1992,8.69
111+
1993,8.33
112+
1994,8.88
113+
1995,9.18
114+
1996,8.19
115+
1997,9.41
116+
1998,9.16
117+
1999,9.37
118+
2000,9.10
119+
2001,8.80
120+
2002,9.44
121+
2003,9.47
122+
2004,9.44
123+
2005,9.41
124+
2006,9.70
125+
2007,9.56
126+
2008,9.02
127+
2009,9.14
128+
2010,7.94
129+
2011,9.61
130+
2012,8.74
131+
2013,8.74
132+
2014,9.88
133+
2015,9.18
134+
2016,9.29
135+
2017,9.53
136+
2018,9.45
137+
2019,9.39
138+
2020,9.62
139+
2021,9.28
140+
2022,10.03
141+
2023,9.97
142+
2024,9.79
143+
2025,10.09

‎Mainpages/dataPages/financeData.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@ <h1>Welcome to the Finance Data visualization Page!</h1>
4949
<canvas id="totalExport"></canvas>
5050
</div>
5151
<hr>
52+
<div class="textBoxMapping">
53+
<p>Inflation rates over a span of 1989 to 2025</p>
54+
</div>
55+
<div class="chartBig">
56+
<canvas id="inflationRateChart"></canvas>
57+
</div>
5258

5359
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
5460
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -135,6 +141,48 @@ <h1>Welcome to the Finance Data visualization Page!</h1>
135141
// getting IDs of the chart divs
136142
const importTot = document.getElementById('totalImport');
137143
const exportTot = document.getElementById('totalExport');
144+
145+
const inflationRateData = '/Datasets/inflation-1989-2025.csv';
146+
d3.csv(inflationRateData).then(function (datapoints){
147+
const year=[]
148+
const inflationRate=[]
149+
for (i = 0; i < datapoints.length; i++){
150+
year.push(datapoints[i].year)
151+
inflationRate.push(datapoints[i].rate)
152+
}
153+
const inflationRateChartData={
154+
labels: year,
155+
datasets: [{
156+
label: 'Inflation Rate',
157+
data: inflationRate,
158+
fill: false,
159+
borderColor: 'rgb(75, 192, 192)',
160+
tension: 0.0,
161+
}]
162+
}
163+
const inflationRateGraph = new Chart(inflateRate, {
164+
type: 'line',
165+
data: inflationRateChartData,
166+
options: {
167+
scales: {
168+
y: {
169+
title: {
170+
display: true,
171+
text: 'Inflation rate in %'
172+
}
173+
},
174+
x: {
175+
title: {
176+
display: true,
177+
text: 'Year'
178+
}
179+
}
180+
},
181+
pointRadius: 3,
182+
}
183+
})
184+
})
185+
const inflateRate= document.getElementById('inflationRateChart');
138186
</script>
139187
<div>
140188
<hr>

‎Mainpages/dataPages/propertyData.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ <h1>Welcome to the Housing Price Data visualization Page!</h1>
4242

4343
<div class="textBoxMapping">
4444
<p>
45-
This data represents some bs about housing in England
45+
This data shows a steady and sharp rise in the housing prices across England, especially towards the 2020s and beyond
4646
</p>
4747
</div>
4848

@@ -54,7 +54,8 @@ <h1>Welcome to the Housing Price Data visualization Page!</h1>
5454

5555
<div class="textBoxMapping">
5656
<p>
57-
This data represents some bs about housing in Wales
57+
This data shows a steady and sharp rise in the housing prices across Wales, especially towards the 2020s and beyond
58+
though notably to a lesser degree than England.
5859
</p>
5960
</div>
6061
<hr>
@@ -64,7 +65,8 @@ <h1>Welcome to the Housing Price Data visualization Page!</h1>
6465

6566
<div class="textBoxMapping">
6667
<p>
67-
This data represents some bs about housing in Scotland
68+
This data shows a steady and sharp rise in the housing prices across Scotland, especially towards the 2020s and beyond
69+
though notably to a lesser degree than England and Wales.
6870
</p>
6971
</div>
7072
<hr>

‎Mainpages/dataPages/temperatureData.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Temperature Data</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="/styles.css">
9+
<link href='https://fonts.googleapis.com/css?family=Michroma' rel='stylesheet'>
10+
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
11+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
12+
</head>
13+
14+
<body>
15+
<ul class="navigationBar">
16+
<li><a href="/index.html">Home</a></li>
17+
<li><a href="/mapping.html">Open Data</a></li>
18+
<li class="right"><a href="/about.html">About</a></li>
19+
</ul>
20+
21+
<div class=mappingTitle>
22+
<h1>Welcome to the Temperature Data visualization Page!</h1>
23+
<p>These charts represent data taken from <a
24+
href="https://www.data.gov.uk/collections/environment/weather">The weather data page of the
25+
data.gov website</a></p>
26+
<hr>
27+
</div>
28+
29+
30+
<div class="chartBig">
31+
<canvas id="temperatureMeanAnnual"></canvas>
32+
</div>
33+
<div class="textBox">
34+
<p>
35+
The data above represents the mean average temperature across the years 1884 - 2020, representing the largest
36+
time range currently hosted on the website and showing how temperatures have gradually risen over the course of many years
37+
in the UK
38+
</p>
39+
</div>
40+
41+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
42+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
43+
44+
<script>
45+
const meanTempData = '/Datasets/uk-mean-temperature.csv'
46+
d3.csv(meanTempData).then(function (datapoints) {
47+
// Prep the variables and then push data into them.
48+
const year = []
49+
const meanTemp = []
50+
51+
for (i = 0; i < datapoints.length; i++) {
52+
year.push(datapoints[i].Year)
53+
meanTemp.push(datapoints[i]['Annual mean temperature (°C)'])
54+
};
55+
56+
// prep the data for our chart
57+
const tempMeanTotal = {
58+
labels: year,
59+
datasets: [{
60+
label: 'Mean Temp (in celsius)',
61+
data: meanTemp,
62+
fill: false,
63+
borderColor: 'rgb(75, 192, 192)',
64+
tension: 0.1,
65+
}]
66+
}
67+
// draw the chart
68+
const tempMeanChart = new Chart(meanTempTot, {
69+
type: 'line',
70+
data: tempMeanTotal,
71+
options: {
72+
scales: {
73+
y: {
74+
title: {
75+
display: true,
76+
text: 'Temperature in celsius'
77+
}
78+
},
79+
x: {
80+
title: {
81+
display: true,
82+
text: 'Year'
83+
}
84+
}
85+
}
86+
}
87+
})
88+
89+
90+
})
91+
const meanTempTot = document.getElementById('temperatureMeanAnnual');
92+
93+
</script>
94+
<div>
95+
<hr>
96+
</div>
97+
<div class=textBox>
98+
<p>
99+
<u>
100+
All data is provided by the UK government at <a href="https://www.data.gov.uk/">The open data project</a>
101+
</u>
102+
</p>
103+
</div>
104+
</body>
105+
106+
</html>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<li class="right"><a href="/about.html">About</a></li>
1818
</ul>
1919
<div class="textBox">
20-
<h1>An Example Chart!</h1>
20+
<h1>An Example Chart Of Data-Driven!</h1>
2121
</div>
2222
<div class="imgBox">
2323
</div>

‎mapping.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<div class="dataBtns">
2929
<button class="dataButton" onclick="document.location='/Mainpages/dataPages/woodlandArea.html'">Woodland Area</button>
3030
<button class="dataButton" onclick="document.location='/Mainpages/dataPages/airQuality.html'">Air Quality</button>
31+
<button class="dataButton" onclick="document.location='/Mainpages/dataPages/temperatureData.html'">Temperature</button>
3132
</div>
3233
<div class="textBoxMapping">
3334
<p>Birth / Deaths Datasets</p>

0 commit comments

Comments
 (0)