2020-10-17 21:46:49 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>GeoVis - Project 1</title>
|
2020-10-18 15:32:35 +02:00
|
|
|
<script src="https://www.gstatic.com/charts/loader.js"></script> <!-- Google Charts-->
|
2020-10-18 18:38:22 +02:00
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <!-- Tree Maps-->
|
2020-10-21 22:18:23 +02:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/underscore@1.11.0/underscore-min.js"></script>
|
2020-10-18 15:32:35 +02:00
|
|
|
<script src="js/tree.js"></script> <!-- Tree Maps-->
|
2020-10-17 21:46:49 +02:00
|
|
|
<script src="script.js"></script>
|
2020-10-28 00:02:12 +01:00
|
|
|
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
|
|
|
|
|
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" rel="stylesheet">
|
2020-10-17 21:46:49 +02:00
|
|
|
</head>
|
2020-10-28 00:02:12 +01:00
|
|
|
<body class="bg-dark">
|
2020-10-18 18:38:22 +02:00
|
|
|
<div class="m-5">
|
2020-10-18 15:32:35 +02:00
|
|
|
<div class="row">
|
2020-10-28 00:02:12 +01:00
|
|
|
<h1 class="col text-center text-light">Aufgabe 1</h1>
|
2020-10-18 18:38:22 +02:00
|
|
|
</div>
|
2020-10-28 00:02:12 +01:00
|
|
|
<div class="row my-3">
|
|
|
|
|
<div class="col-xl-6 col-sm my-md-3 my-sm-3 my-3">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h4 class="card-header">Kreisdiagramm - Verbrauch pro Jahr</h4>
|
|
|
|
|
<div class="card-body" id="piechartYear"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xl-6 col-sm my-md-3 my-sm-3 my-3">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h4 class="card-header">Kreisdiagramm - Verbrauch pro Monat</h4>
|
|
|
|
|
<div class="card-body" id="piechartMonth"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-10-18 18:38:22 +02:00
|
|
|
</div>
|
2020-10-28 00:02:12 +01:00
|
|
|
<div class="row my-3">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h4 class="card-header">Liniendiagramm</h4>
|
|
|
|
|
<div class="card-body" id="linechart"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-10-18 18:38:22 +02:00
|
|
|
</div>
|
2020-10-28 00:02:12 +01:00
|
|
|
<div class="row my-3">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h4 class="card-header">Punktdiagramm</h4>
|
|
|
|
|
<div class="card-body" id="scatterchart"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-10-18 18:38:22 +02:00
|
|
|
</div>
|
2020-10-28 00:02:12 +01:00
|
|
|
<div class="row my-3">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h4 class="card-header">Blasendiagramm</h4>
|
|
|
|
|
<div class="card-body" id="bubblechart"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-5 mb-3">
|
|
|
|
|
<h1 class="col text-center text-light">Aufgabe 2</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h4 class="card-header">Folder Tree Map</h4>
|
|
|
|
|
<div class="card-body text-center" id="foldermap"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-10-17 21:46:49 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
