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

Make diagrams responsive, import data handling for tree map

Browse Source
This commit is contained in:
Marcel Schwarz 2020-10-21 22:18:23 +02:00
parent e59f78adea
commit e7baf951e9
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,10 +5,11 @@
<title>GeoVis - Project 1</title> <title>GeoVis - Project 1</title>
<script src="https://www.gstatic.com/charts/loader.js"></script> <!-- Google Charts--> <script src="https://www.gstatic.com/charts/loader.js"></script> <!-- Google Charts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <!-- Tree Maps--> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <!-- Tree Maps-->
<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="js/tree.js"></script> <!-- Tree Maps-->
<script src="script.js"></script> <script src="script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head> </head>
<body> <body>
<div class="m-5"> <div class="m-5">
@ -45,6 +46,9 @@
</div> </div>
</div> </div>
<h1 class="m-5">Aufgabe 2</h1> <h1 class="m-5">Aufgabe 2</h1>
<div id="foldermap" class="m-5"></div> <div class="row">
<div id="foldermap" class="m-5 col"></div>
</div>
</body> </body>
</html> </html>

15
projects/project-1/script.js
View File

@ -135,6 +135,13 @@ google.charts.setOnLoadCallback(drawPieChartMonth)
google.charts.setOnLoadCallback(drawLineChart) google.charts.setOnLoadCallback(drawLineChart)
google.charts.setOnLoadCallback(drawScatterChart) google.charts.setOnLoadCallback(drawScatterChart)
google.charts.setOnLoadCallback(drawBubbleChart) google.charts.setOnLoadCallback(drawBubbleChart)
window.addEventListener('resize', _.debounce(() => {
drawPieChartYear()
drawPieChartMonth()
drawLineChart()
drawScatterChart()
drawBubbleChart()
}))
// Tree Map // Tree Map
@ -162,12 +169,12 @@ function loadTreeMap() {
] ]
let data = [ let data = [
[...files[0].map(value => value.size)], //Folder 1 files[0].map(value => value.size), //Folder 1
[...files[1].map(value => value.size)] //Folder 2 files[1].map(value => value.size) //Folder 2
] ]
let labels = [ let labels = [
[...files[0].map(value => value.name)], //Folder 1 files[0].map(value => value.name), //Folder 1
[...files[1].map(value => value.name)] //Folder 2 files[1].map(value => value.name) //Folder 2
] ]
Treemap.draw("foldermap", 600, 400, data, labels, {"box": pickColor}) Treemap.draw("foldermap", 600, 400, data, labels, {"box": pickColor})
} }