hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Project 1 Aufgabe 2

Browse Source
This commit is contained in:
Marcel Schwarz 2020-10-18 15:32:35 +02:00
parent 7ba385dea4
commit be63365a7f
3 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
projects/project1/index.html
View File

@ -3,14 +3,17 @@
<head>
<meta charset="UTF-8">
<title>GeoVis - Project 1</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script> <!-- Google Charts-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script> <!-- Tree Maps-->
<script src="js/tree.js"></script> <!-- Tree Maps-->
<script src="script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1 class="m-5">Aufgabe 1</h1>
<div class="container m-5">
<div class="row justify-content-center">
<div class="row">
<div id="piechartYear" class="col-lg-6"></div>
<div id="piechartMonth" class="col-lg-6"></div>
</div>
@ -18,5 +21,7 @@
<div id="scatterchart"></div>
<div id="bubblechart"></div>
</div>
<h1 class="m-5">Aufgabe 2</h1>
<div id="foldermap" class="m-5"></div>
</body>
</html>

9
projects/project1/js/tree.js Normal file
View File

@ -0,0 +1,9 @@
var Treemap={};
(function(){Treemap.generate=function(){function q(a,b,c,e){this.xoffset=a;this.yoffset=b;this.height=e;this.width=c;this.shortestEdge=function(){return Math.min(this.height,this.width)};this.getCoordinates=function(a){var b=[],c=this.xoffset,f=this.yoffset,m=l(a)/this.height,e=l(a)/this.width,d;if(this.width>=this.height)for(d=0;d<a.length;d++)b.push([c,f,c+m,f+a[d]/m]),f+=a[d]/m;else for(d=0;d<a.length;d++)b.push([c,f,c+a[d]/e,f+e]),c+=a[d]/e;return b};this.cutArea=function(a){this.width>=this.height?
(a/=this.height,a=new q(this.xoffset+a,this.yoffset,this.width-a,this.height)):(a/=this.width,a=new q(this.xoffset,this.yoffset+a,this.width,this.height-a));return a}}function r(a,b,c,e,h){var e="undefined"===typeof e?0:e,h="undefined"===typeof h?0:h,d=[],i=[],f;if(a[0]&&a[0].constructor===Array){for(f=0;f<a.length;f++)d[f]=k(a[f]);b=g(d,b,c,e,h);for(f=0;f<a.length;f++)i.push(r(a[f],b[f][2]-b[f][0],b[f][3]-b[f][1],b[f][0],b[f][1]))}else i=g(a,b,c,e,h);return i}function g(a,b,c,e,h){for(var e="undefined"===
typeof e?0:e,h="undefined"===typeof h?0:h,p=d,i=b*c,f=[],m=l(a),i=i/m,m=0;m<a.length;m++)f[m]=a[m]*i;a=p(f,[],new q(e,h,b,c),[]);b=[];for(c=0;c<a.length;c++)for(e=0;e<a[c].length;e++)b.push(a[c][e]);return b}function d(a,b,c,e){var h,p;if(0===a.length)e.push(c.getCoordinates(b));else{h=c.shortestEdge();p=a[0];var i;var f;0===b.length?i=!0:(f=b.slice(),f.push(p),i=j(b,h),h=j(f,h),i=i>=h);i?(b.push(p),d(a.slice(1),b,c,e)):(p=c.cutArea(l(b),e),e.push(c.getCoordinates(b)),d(a,[],p,e));return e}}function j(a,
b){var c=Math.min.apply(Math,a),d=Math.max.apply(Math,a),h=l(a);return Math.max(Math.pow(b,2)*d/Math.pow(h,2),Math.pow(h,2)/(Math.pow(b,2)*c))}function l(a){var b=0,c;for(c=0;c<a.length;c++)b+=a[c];return b}function k(a){var b,c=0;if(a[0]&&a[0].constructor===Array)for(b=0;b<a.length;b++)c+=k(a[b]);else c=l(a);return c}return r}()})();
(function(){Treemap.draw=function(){function q(g,d){for(var j in d)d.hasOwnProperty(j)&&(g[j]=d[j]);return g}function r(g,d,j,l,k){var a,b,c;if(d[0][0]&&d[0][0].constructor===Array)for(a=0;a<d.length;a++)b=k.slice(),b.push(a),r(g,d[a],j,l,b);else for(a=0;a<d.length;a++){b=k.slice();b.push(a);c=j;for(g=0;g<b.length;g++)c=c[b[g]];l.draw(d[a],c,b)}}return function(g,d,j,l,k,a){var b,c,e,a="undefined"===typeof a?[]:a;c=function(){function a(b){var c,d=0;if(b[0]&&b[0].constructor===Array)for(c=0;c<b.length;c++)d+=
a(b[c]);else for(c=0;c<b.length;c++)d+=b[c].length;return d}function b(a){var c,d=0;if(a[0]&&a[0].constructor===Array)for(c=0;c<a.length;c++)d+=b(a[c]);else for(c=0;c<a.length;c++)d+=1;return d}var c=a(k)/b(k);return function(a){a=Math.pow((a[2]-a[0])*(a[3]-a[1]),0.5);return{fill:"#FCFCFC","font-size":Math.min(a/c,20)}}}();e=function(){return function(d,e,i){var f=d[0],g=d[1],j=d[2],l=d[3],k,n,o;k=b.rect(f,g,j-f,l-g);n=a.box&&a.box.constructor===Function?a.box(d,i):a.box;o=["hsb(0,1,0.4)","hsb(0.2,1,0.4)",
"hsb(0.4,1,0.4)","hsb(0.6,1,0.4)","hsb(0.8,1,0.4)"];n=q({stroke:"FEFEFE",fill:1===i.length?o[2]:o[(i[0]+2)%5]},n);"fill-opacity"in n&&(o=Raphael.getRGB(n.fill),o.error||(n.fill="rgba("+o.r+","+o.g+","+o.b+","+n["fill-opacity"]+")"));k.attr(n);e=b.text((f+j)/2,(g+l)/2,e);k=a.label&&a.label.constructor===Function?a.label(d,i):a.label;k=q(c(d,i),k);e.attr(k);e.getBBox().width>j-f&&e.getBBox().width<=l-g&&e.rotate(-90)}}();a.background="undefined"===typeof a.background?{}:a.background;a.label="undefined"===
typeof a.label?{}:a.label;a.box="undefined"===typeof a.box?{}:a.box;a.draw="undefined"===typeof a.draw?e:a.draw;b=new Raphael(g,d,j);b.rect(0,0,d,j).attr(a.background);g=Treemap.generate(l,d,j);r(b,g,k,a,[])}}()})();

51
projects/project1/script.js
View File

@ -4,13 +4,13 @@ let dataset = {
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]
const monthNames = {
short: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
long: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
}
const lookupMonth = (num, short = false) => short ? monthNames.short[num] : monthNames.long[num];
function drawPieChartYear() {
let pieChartData = google.visualization.arrayToDataTable([
["Jahr", "MWh"],
@ -63,6 +63,7 @@ function drawLineChart() {
chart.draw(lineChartData, {
title: "Wärmebedarf 2012 - 2014 (in MWh)",
colors: ["#0040ff", "#ff0000", "#155a00"],
explorer: {},
height: 300,
width: 800
})
@ -87,6 +88,7 @@ function drawScatterChart() {
colors: ["#0040ff", "#ff0000", "#155a00"],
vAxis: {title: "MWh"},
hAxix: {title: "Month"},
explorer: {},
height: 300,
width: 800
}
@ -122,6 +124,7 @@ function drawBubbleChart() {
title: "Prozentualer MWh Anteil"
},
colors: ["#0040ff", "#ff0000", "#155a00"],
explorer: {},
bubble: {textStyle: {fontSize: 11}},
height: 300,
width: 800
@ -137,3 +140,41 @@ google.charts.setOnLoadCallback(drawPieChartMonth)
google.charts.setOnLoadCallback(drawLineChart)
google.charts.setOnLoadCallback(drawScatterChart)
google.charts.setOnLoadCallback(drawBubbleChart)
// Tree Map
function loadTreeMap() {
const colors = {doc: "#0035b3", png: "#bc0033", pdf: "#009486", dat: "#676767"}
function pickColor(coordinates, index) {
let folder = index[0]
let file = index[1]
let type = files[folder][file].type
return {"fill": colors[type]}
}
let files = [
[
{folder: "ordner1", name: "Datei 1", size: 90, type: "doc"},
{folder: "ordner1", name: "Datei 2", size: 60, type: "png"},
{folder: "ordner1", name: "Datei 3", size: 30, type: "pdf"},
],
[
{folder: "ordner2", name: "Datei 4", size: 40, type: "dat"},
{folder: "ordner2", name: "Datei 5", size: 20, type: "dat"}
]
]
let data = [
[...files[0].map(value => value.size)], //Folder 1
[...files[1].map(value => value.size)] //Folder 2
]
let labels = [
[...files[0].map(value => value.name)], //Folder 1
[...files[1].map(value => value.name)] //Folder 2
]
Treemap.draw("foldermap", 600, 400, data, labels, {"box": pickColor})
}
document.addEventListener('DOMContentLoaded', loadTreeMap, false)