Commit 740d5a8e authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

New welcome page and hands-on demo page + data set

parent 6b1c5bb6
<!doctype html>
<meta charset="UTF-8">
<head>
<script src="fractal-0.5.1.min.js"></script>
</head>
<body>
<h1>Fractalis Test Page</h1>
<p>
This page is for demonstration purpose only.
It showcases the functionality of Fractalis for researchers and
serves as an example on how to use the API for developers.
</p>
<input type="button" onclick="loadData()" value="Prepare data for analysis"/>
<input type="button" onclick="deleteData()" value="Clear analysis cache"/>
<br/>
<br/>
<div class="charts">
<div class="chart chart-1"></div>
<div class="chart chart-2"></div>
<div class="chart chart-3"></div>
<div class="chart chart-4"></div>
<div class="chart chart-5"></div>
<div class="chart chart-6"></div>
<div class="chart chart-7"></div>
<div class="chart chart-8"></div>
</div>
</body>
<script>
/* eslint-disable */
const fjs = fractal.init({
handler: 'demo',
dataSource: 'https://' + window.location.host,
fractalisNode: 'http://' + window.location.host,
getAuth () {
return {token: ''}
},
options: {
controlPanelPosition: 'right'
}
})
fjs.setSubsets([])
function loadData () {
fjs.loadData([
{
dataType: 'numerical',
field: 'alcohol'
},
{
dataType: 'numerical',
field: 'chlorides'
},
{
dataType: 'numerical',
field: 'citric acid'
},
{
dataType: 'numerical',
field: 'density'
},
{
dataType: 'numerical',
field: 'fixed acidity'
},
{
dataType: 'numerical',
field: 'free sulfur dioxide'
},
{
dataType: 'numerical',
field: 'pH'
},
{
dataType: 'numerical',
field: 'quality'
},
{
dataType: 'numerical',
field: 'residual sugar'
},
{
dataType: 'numerical',
field: 'sulphates'
},
{
dataType: 'numerical',
field: 'total sulfur dioxide'
},
{
dataType: 'categorical',
field: 'type'
},
{
dataType: 'numerical',
field: 'volatile acidity'
}
])
}
function deleteData () {
fjs.clearCache()
}
function setCharts () {
const vms = [
fjs.setChart('correlation-analysis', '.chart-1'),
fjs.setChart('correlation-analysis', '.chart-2'),
fjs.setChart('correlation-analysis', '.chart-3'),
fjs.setChart('correlation-analysis', '.chart-4'),
fjs.setChart('boxplot', '.chart-5'),
fjs.setChart('boxplot', '.chart-6'),
fjs.setChart('pca-analysis', '.chart-7'),
fjs.setChart('pca-analysis', '.chart-8')
]
}
window.addEventListener('load', () => {
setCharts()
})
</script>
<style>
.charts {
}
.chart {
float: left;
height: 20vw;
width: 20vw;
}
</style>
This diff is collapsed.
......@@ -7,16 +7,13 @@
<meta name="description" content="Fractalis Endpoint">
<meta name="author" content="Sascha Herzinger">
<link rel="icon" type="image/png" href="Fractalis_logo.png" sizes="96x96">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
body {
text-align: center;
margin: 0 auto;
}
.header {
width: 100%;
max-height: 150px;
}
.fractalis-logo {
height: 30vh;
}
......@@ -33,23 +30,32 @@
max-width: 800px;
margin: auto;
}
.links {
display: flex;
justify-content: center;
}
.links > div {
display: flex;
flex-direction: column;
padding: 15px;
}
.material-icons {
color: grey;
}
</style>
</head>
<style type="text/css">
</style>
<body>
<header>
<a href="https://wwwen.uni.lu/lcsb">
<img class="header" src="ul-header-with-lcsb.svg"/>
</a>
</header>
<a href="https://fractalis.lcsb.uni.lu/"><img class="fractalis-logo" src="Fractalis_logo.png"/></a>
<h1>Fractalis - A scalable open-source service for platform-independent interactive visual analytics</h1>
<br/>
<hr/>
<h3 class="welcome-message">
The fact that you see this message means that you successfully deployed Fractalis via the provided Docker image.
The fact that you see this message means that Fractalis has been successfully deployed via the provided Docker image.
This system serves from now on as a computational endpoint for the Fractalis stack.
</h3>
<hr/>
......@@ -58,26 +64,17 @@
<p>
Fractalis is a service and a library that work in tandem to equip existing platforms with visual analytical capabilities for explorative data analysis.
This is achieved by isolating all platform-dependent code into a single layer, which is responsible for migrating currently needed data into the Fractalis analysis cache.
Here are some videos that show the current state of the project: <a href="https://www.youtube.com/playlist?list=PLNvp9GB9uBmH1NNAf-qTyj_jN2aCPISFU">Playlist</a>.
</p>
<h2>Documentation</h2>
<p>
All documents are and will always be available within the project repositories.
<a href="https://git-r3lab.uni.lu/Fractalis/fractalis/blob/master/README.md">Fractalis README</a> and <a href="https://git-r3lab.uni.lu/Fractalis/fractal.js">Fractal.js README</a> are good points to begin with.
</p>
<h2>Repositories</h2>
<p>
The entire code base for this project is publicly available <a href="https://git-r3lab.uni.lu/Fractalis">here</a>.
</p>
<h2>License</h2>
<p>
This project is licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>
and may be freely downloaded, modified, and reused.
</p>
<h2>Citation</h2>
<p>
Manuscript in preparation.
</p>
<br/>
<br/>
<div class="links">
<div><a href="https://www.youtube.com/playlist?list=PLNvp9GB9uBmH1NNAf-qTyj_jN2aCPISFU"><i class="material-icons">video_library</i></a><span>Videos</span></div>
<div><a href="demo.html"><i class="material-icons">apps</i></a><span>Hands-on</span></div>
<div><a href="https://git-r3lab.uni.lu/Fractalis/fractalis/blob/master/README.md"><i class="material-icons">library_books</i></a><span>Fractalis</span></div>
<div><a href="https://git-r3lab.uni.lu/Fractalis/fractal.js/blob/master/README.md"><i class="material-icons">library_books</i></a><span>Fractal.js</span></div>
<div><a href="https://git-r3lab.uni.lu/Fractalis"><i class="material-icons">code</i></a><span>Repository</span></div>
<div><a href="https://www.apache.org/licenses/LICENSE-2.0"><i class="material-icons">book</i></a><span>Apache 2.0</span></div>
</div>
<footer>
<a href="http://lcsb.uni.lu"><img class="footer-logo" src="LCSB_UL_Logo.png"/></a>
</footer>
......
This diff is collapsed.
"""Provides CategoricalETL for wine quality demo data set."""
import os
import pandas as pd
from fractalis.data.etl import ETL
class CategoricalETL(ETL):
"""CategoricalETL implements support for the
categorical data of the wine quality data set. """
name = 'demo-wine-quality-etl'
produces = 'categorical'
@staticmethod
def can_handle(handler: str, descriptor: dict):
return handler == 'demo' and descriptor['dataType'] == 'categorical'
def extract(self, server: str, token: str, descriptor: dict):
path = os.path.dirname(os.path.abspath(__file__)) + '/wine_quality.csv'
csv = pd.read_csv(path, sep='\t')
raw_data = csv[descriptor['field']]
return raw_data
def transform(self, raw_data: pd.DataFrame, descriptor: dict):
df = raw_data.reset_index(level=0)
df['feature'] = descriptor['field']
df.columns = ['id', 'value', 'feature']
df[['id']] = df[['id']].astype(str)
df[['value']] = df[['value']].astype(str)
df[['feature']] = df[['feature']].astype(str)
return df
"""Provides NumericalETL for wine quality demo data set."""
import os
import pandas as pd
from fractalis.data.etl import ETL
class NumericalETL(ETL):
"""NumericalETL implements support for the
numerical data of the wine quality data set. """
name = 'demo-wine-quality-etl'
produces = 'numerical'
@staticmethod
def can_handle(handler: str, descriptor: dict):
return handler == 'demo' and descriptor['dataType'] == 'numerical'
def extract(self, server: str, token: str, descriptor: dict):
path = os.path.dirname(os.path.abspath(__file__)) + '/wine_quality.csv'
csv = pd.read_csv(path, sep='\t')
raw_data = csv[descriptor['field']]
return raw_data
def transform(self, raw_data: pd.DataFrame, descriptor: dict):
df = raw_data.reset_index(level=0)
df['feature'] = descriptor['field']
df.columns = ['id', 'value', 'feature']
df[['id']] = df[['id']].astype(str)
df[['value']] = df[['value']].astype(float)
df[['feature']] = df[['feature']].astype(str)
return df
from fractalis.data.etlhandler import ETLHandler
class DemoHandler(ETLHandler):
_handler = 'demo'
@staticmethod
def make_label(descriptor):
return descriptor.get('field')
def _get_token_for_credentials(self, server: str, auth: dict) -> str:
return 'foo'
def _heartbeat(self):
pass
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment