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).
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.
**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:
For the backend:
- [Python 3](https://www.python.org/downloads/)
- [Python 3](https://www.python.org/downloads/)
- [Flask](https://palletsprojects.com/p/flask/)
- [Flask](https://palletsprojects.com/p/flask/)
- Other packages: `pymongo`, `numpy`, `scipy`, `scikit-learn`, `sk-dist`, `eli5`, and `pandas`.
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 #
# 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)
# first terminal: hosting the visualization side (client)
# with Node.js
# with Node.js
@ -43,10 +48,6 @@ npm run dev
```
```
# second terminal: hosting the computational side (server)
# second terminal: hosting the computational side (server)
FLASK_APP=run.py flask run
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.
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?
## Why perfect-scrollbar?
perfect-scrollbar is minimalistic but *perfect* (for us, and maybe for most
perfect-scrollbar is minimalistic but *perfect* (for us, and maybe for most
@ -37,341 +36,20 @@ We hope you will love it!
## Live preview
## 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.
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.
## 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)***
<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");
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>
<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