diff --git a/projects/project1/index.html b/projects/project1/index.html index 76662a7..69ce4ca 100644 --- a/projects/project1/index.html +++ b/projects/project1/index.html @@ -3,14 +3,17 @@ GeoVis - Project 1 - + + + +

Aufgabe 1

-
+
@@ -18,5 +21,7 @@
+

Aufgabe 2

+
\ No newline at end of file diff --git a/projects/project1/js/tree.js b/projects/project1/js/tree.js new file mode 100644 index 0000000..32483ce --- /dev/null +++ b/projects/project1/js/tree.js @@ -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=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=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;cj-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,[])}}()})(); \ No newline at end of file diff --git a/projects/project1/script.js b/projects/project1/script.js index 49268e0..03dabac 100644 --- a/projects/project1/script.js +++ b/projects/project1/script.js @@ -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 @@ -136,4 +139,42 @@ 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 +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)