From 7ba385dea4e03deecad4fd77e571fb9922becd79 Mon Sep 17 00:00:00 2001 From: Marcel Schwarz Date: Sat, 17 Oct 2020 21:46:49 +0200 Subject: [PATCH] Implement project 1 --- projects/project1/index.html | 22 ++++++ projects/project1/script.js | 139 +++++++++++++++++++++++++++++++++++ 2 files changed, 161 insertions(+) create mode 100644 projects/project1/index.html create mode 100644 projects/project1/script.js diff --git a/projects/project1/index.html b/projects/project1/index.html new file mode 100644 index 0000000..76662a7 --- /dev/null +++ b/projects/project1/index.html @@ -0,0 +1,22 @@ + + + + + GeoVis - Project 1 + + + + + +
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/projects/project1/script.js b/projects/project1/script.js new file mode 100644 index 0000000..49268e0 --- /dev/null +++ b/projects/project1/script.js @@ -0,0 +1,139 @@ +let dataset = { + 2012: [128.52, 187.54, 63.16, 72.18, 0, 0, 0, 0, 6, 68.58, 84.54, 120.51], //Month from Jan to Dec + 2013: [144.44, 133.07, 121.78, 38.27, 35.53, 18.57, 0, 0, 16.56, 48.53, 91.88, 115.2], //Month from Jan to Dec + 2014: [113.77, 96.17, 77.74, 38.27, 29.79, 11.6, 0, 0, 16.85, 36.14, 67.55, 138] //Month from Jan to Dec +} + +function lookupMonth(num, short = false) { + if (short) { + return ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"][num] + } + return ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"][num] +} + +function drawPieChartYear() { + let pieChartData = google.visualization.arrayToDataTable([ + ["Jahr", "MWh"], + ["2012", dataset["2012"].reduce((acc, curr) => acc + curr)], + ["2013", dataset["2013"].reduce((acc, curr) => acc + curr)], + ["2014", dataset["2014"].reduce((acc, curr) => acc + curr)] + ]) + + let chart = new google.visualization.PieChart(document.getElementById("piechartYear")) + chart.draw(pieChartData, { + title: "Wärmebedarf 2012 - 2014 (in MWh)", + colors: ["#0040ff", "#ff0000", "#155a00"], + height: 300, + width: 800 + }) +} + +function drawPieChartMonth() { + let parsedData = [] + for (let i = 0; i < 12; i++) { + parsedData.push([lookupMonth(i), dataset["2012"][i] + dataset["2013"][i] + dataset["2014"][i]]) + } + + let pieChartData = google.visualization.arrayToDataTable([ + ["Monat", "MWh"], + ...parsedData + ]) + + let chart = new google.visualization.PieChart(document.getElementById("piechartMonth")) + chart.draw(pieChartData, { + title: "Akkumulierter Wärmebedarf 2012 - 2014 pro Monat (in MWh)", + height: 300, + width: 800 + }) +} + +function drawLineChart() { + let parsedData = [] + + for (let i = 0; i < 12; i++) { + parsedData.push([lookupMonth(i), dataset["2012"][i], dataset["2013"][i], dataset["2014"][i]]) + } + + let lineChartData = google.visualization.arrayToDataTable([ + ["Monat", "2012", "2013", "2014"], + ...parsedData + ]) + + let chart = new google.visualization.LineChart(document.getElementById("linechart")) + chart.draw(lineChartData, { + title: "Wärmebedarf 2012 - 2014 (in MWh)", + colors: ["#0040ff", "#ff0000", "#155a00"], + height: 300, + width: 800 + }) +} + +function drawScatterChart() { + let parsedData = [] + + for (let i = 0; i < 12; i++) { + parsedData.push([lookupMonth(i), dataset["2012"][i], dataset["2013"][i], dataset["2014"][i]]) + } + + let data = new google.visualization.arrayToDataTable([ + ["Monat", "2012", "2013", "2014"], + ...parsedData + ]) + + let options = { + chart: { + title: "Wärmebedarf 2012 - 2014 (in MWh)" + }, + colors: ["#0040ff", "#ff0000", "#155a00"], + vAxis: {title: "MWh"}, + hAxix: {title: "Month"}, + height: 300, + width: 800 + } + let chart = new google.charts.Scatter(document.getElementById("scatterchart")) + chart.draw(data, google.charts.Scatter.convertOptions(options)) +} + +function drawBubbleChart() { + let parsedData = [] + + for (let year in dataset) { + let complete = dataset[year].reduce((acc, curr) => acc + curr) + dataset[year].forEach((value, idx) => { + parsedData.push([ + lookupMonth(idx, true), idx + 1, (value / complete) * 100, year, value + ]) + }) + } + + let data = google.visualization.arrayToDataTable([ + //BubbleName, X-Axis, Y-Axis, Series/Color, BubbleSize + ["Monat", "Monat", "Prozent des Jahresverbrauchs", "Jahr", "MWh"], + ...parsedData + ]); + + let options = { + title: "Wärmebedarf 2012 - 2014 (in MWh)", + hAxis: { + title: "Monat", + ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] + }, + vAxis: { + title: "Prozentualer MWh Anteil" + }, + colors: ["#0040ff", "#ff0000", "#155a00"], + bubble: {textStyle: {fontSize: 11}}, + height: 300, + width: 800 + }; + + let chart = new google.visualization.BubbleChart(document.getElementById("bubblechart")); + chart.draw(data, options); +} + +google.charts.load("current", {packages: ["corechart", "scatter"]}) +google.charts.setOnLoadCallback(drawPieChartYear) +google.charts.setOnLoadCallback(drawPieChartMonth) +google.charts.setOnLoadCallback(drawLineChart) +google.charts.setOnLoadCallback(drawScatterChart) +google.charts.setOnLoadCallback(drawBubbleChart) \ No newline at end of file