This Git repository contains the code that accompanies the research paper "StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics". The details of the experiments and the research outcome are described in [the paper](https://doi.org/10.1109/TVCG.2020.3030352).
**Note:** StackGenVis is optimized to work better for standard resolutions (such as 1440p/QHD (Quad High Definition)). Any other resolution might need manual adjustment of your browser's zoom level to work properly.
**Note:** StackGenVis is optimized to work better for standard resolutions (such as 1440p/QHD (Quad High Definition) and 1080p). For lower resolutions, our recommendation is to use the collapsible functionality of the top dark gray panels. Finally, any other resolution might need manual adjustment of your browser's zoom level to work properly.
**Note:** The tag `paper-version` matches the implementation at the time of the paper's publication. The current version might look significantly different depending on how much time has passed since then.
@ -17,22 +16,28 @@ Most of them are available online from the [UCI Machine Learning Repository](htt
For the backend:
- [Python 3](https://www.python.org/downloads/)
- [Flask](https://palletsprojects.com/p/flask/)
- Other packages: `pymongo`, `numpy`, `scipy`, `scikit-learn`, `sk-dist`, `eli5`, and `pandas`.
- [Node.js](https://nodejs.org/en/) (including Webpack; to install it, `npm install webpack-dev-server@3.10.3`)
There is no need to install anything for the frontend, since all modules are in the repository.
There is no need to install anything further for the frontend (e.g., D3 and Plotly.js), since all modules are in the repository.
For the reproducibility of the first use case, the red wine quality data set should be inserted to MongoDB by using the commands below:
```
# recommendation: use insertMongo script to add a data set in Mongo database
# for Python3
python3 insertMongo.py
```
# Usage #
Below is an example of how you can get StackGenVis running using Python for both frontend and backend. The frontend is written in JavaScript/HTML, so it could be hosted in any other web server of your preference. The only hard requirement (currently) is that both frontend and backend must be running on the same machine.
Below is an example of how you can get StackGenVis running using Python and Node.js for the backend and frontend, respectively. The frontend is written in JavaScript/HTML with the help of Vue.js framework, so it could be hosted in any other web server of your preference. The only hard requirement (currently) is that both frontend and backend must be running on the same machine.
```
# first terminal: hosting the visualization side (client)
# with Node.js
@ -43,10 +48,6 @@ npm run dev
```
# second terminal: hosting the computational side (server)
FLASK_APP=run.py flask run
# (optional) recommendation: use insertMongo script to add a data set in Mongo database
# for Python3
python3 insertMongo.py
```
Then, open your browser and point it to `localhost:8080`. We recommend using an up-to-date version of Google Chrome.
<ahref="https://www.youtube.com/watch?v=c9B4TPnak1A"><imgalt="YouTube Video Views"src="https://img.shields.io/youtube/views/c9B4TPnak1A?label=Bootstrap%205%20Tutorial%20Views&style=social"></a>
***The official documentation can be found [here](https://mdbootstrap.com/freebies/perfect-scrollbar/?utm_source=GitHub&utm_medium=PerfectScrollbar).***
***To read documentation for versions <1.0,pleasevisit [`v0.8.1`](https://github.com/mdbootstrap/perfect-scrollbar/tree/0.8.1).***
________
## Why perfect-scrollbar?
perfect-scrollbar is minimalistic but *perfect* (for us, and maybe for most
@ -37,341 +36,20 @@ We hope you will love it!
## Live preview
Check out the [Live Preview](https://mdbootstrap.com/snippets/jquery/filipkapusta/765760/?utm_source=GitHub&utm_medium=PerfectScrollbar) snippet. You can fork it right away for testing and experimenting purposes.
## More useful plugins
***You'll find some example plugins below, you can explore all of them [here](https://mdbootstrap.com/plugins/jquery/?utm_source=GitHub&utm_medium=PerfectScrollbar)***
If this option is true, when the scroll reaches the end of the side, mousewheel
event will be propagated to parent element.
**Default**: `false`
### `swipeEasing {Boolean}`
If this option is true, swipe scrolling will be eased.
**Default**: `true`
### `minScrollbarLength {Number?}`
When set to an integer value, the thumb part of the scrollbar will not shrink
below that number of pixels.
Check out the [Live Preview](https://mdbootstrap.com/snippets/standard/marveluck/3498209?utm_source=GitHub&utm_medium=PerfectScrollbar) snippet. You can fork it right away for testing and experimenting purposes.
**Default**: `null`
### `maxScrollbarLength {Number?}`
When set to an integer value, the thumb part of the scrollbar will not expand
over that number of pixels.
**Default**: `null`
### `scrollingThreshold {Number}`
This sets threshold for `ps--scrolling-x` and `ps--scrolling-y` classes to
remain. In the default CSS, they make scrollbars shown regardless of hover
state. The unit is millisecond.
**Default**: `1000`
### `useBothWheelAxes {Boolean}`
When set to true, and only one (vertical or horizontal) scrollbar is visible
then both vertical and horizontal scrolling will affect the scrollbar.
**Default**: `false`
### `suppressScrollX {Boolean}`
When set to true, the scrollbar in X-axis will not be available, regardless of
the content width.
**Default**: `false`
### `suppressScrollY {Boolean}`
When set to true, the scroll bar in Y-axis will not be available, regardless of
the content height.
**Default**: `false`
### `scrollXMarginOffset {Number}`
The number of pixels the content width can surpass the container width without
enabling the X-axis scroll bar. Allows some "wiggle room" or "offset break", so
that X-axis scroll bar is not enabled just because of a few pixels.
**Default**: `0`
### `scrollYMarginOffset {Number}`
The number of pixels the content height can surpass the container height without
enabling the Y-axis scroll bar. Allows some "wiggle room" or "offset break", so
that Y-axis scroll bar is not enabled just because of a few pixels.
<li>Material Design 2.0 + latest Bootstrap 5 based on plain JavaScript. 700+ material UI components, super simple, 1 minute installation, free templates & much more</li>
</ul>
</td>
</tr>
</tbody>
</table>
## Free Tutorials
Huge collection of free and high-quality tutorials. Learn Bootstrap, Angular, React, Vue, WordPress and many more. Create your own websites and apps.
- [Material Design for Bootstrap PRO](https://mdbootstrap.com/products/jquery-ui-kit/?utm_source=GitHub&utm_medium=PerfectScrollbar)
[Check it out](https://www.youtube.com/c/Mdbootstrap)
svg.append("text").attr("transform","rotate(-90)").attr("x",-89).attr("y",-45).style("text-anchor","middle").style("font-size","16px").text("Number of Models");
<labelid="data"for="param-dataset"data-toggle="tooltip"data-placement="right"title="Tip: use one of the data sets already provided or upload a new file.">{{dataset}}</label>
Angelos Chatzimparmpas
Angelos Chatzimparmpas