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

Project 1: Adjust styling

Browse Source
This commit is contained in:
Marcel Schwarz 2020-10-28 00:02:12 +01:00
parent e7baf951e9
commit a05b26179b
1 changed files with 51 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
projects/project-1/index.html
View File

@ -8,47 +8,63 @@
<script src="https://cdn.jsdelivr.net/npm/underscore@1.11.0/underscore-min.js"></script>
<script src="js/tree.js"></script> <!-- Tree Maps-->
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" rel="stylesheet">
</head>
<body>
<body class="bg-dark">
<div class="m-5">
<div class="row">
<h1 class="col">Aufgabe 1</h1>
<h1 class="col text-center text-light">Aufgabe 1</h1>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<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">
<figure class="col-xl-6 col-sm figure border border-primary">
<div id="piechartYear" class="pr-3"></div>
<figcaption class="figure-caption">Kreisdiagramm 1</figcaption>
</figure>
<figure class="col-xl-6 col-sm figure border border-primary">
<div id="piechartMonth"></div>
<figcaption class="figure-caption">Kreisdiagramm 2</figcaption>
</figure>
</div>
<div class="row justify-content-center">
<figure class="col figure border border-primary">
<div id="linechart" class=""></div>
<figcaption class="figure-caption">Liniendiagramm</figcaption>
</figure>
</div>
<div class="row justify-content-center">
<figure class="col figure border border-primary">
<div id="scatterchart"></div>
<figcaption class="figure-caption">Punktdiagramm</figcaption>
</figure>
</div>
<div class="row justify-content-center">
<figure class="col figure border border-primary">
<div id="bubblechart"></div>
<figcaption class="figure-caption">Blasendiagramm</figcaption>
</figure>
<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>
</div>
</div>
<h1 class="m-5">Aufgabe 2</h1>
<div class="row">
<div id="foldermap" class="m-5 col"></div>
</div>
</body>
</html>