demo.html 2.85 KB
Newer Older
Sascha Herzinger's avatar
Sascha Herzinger committed
1
<!doctype html>
2
<meta charset="UTF-8">
Sascha Herzinger's avatar
Sascha Herzinger committed
3
4

<head>
5
  <script src="http://localhost:8080/fractal.js"></script>
Sascha Herzinger's avatar
Sascha Herzinger committed
6
7
8
</head>

<body>
9
10
11
12
13
14
15
16
17
18
19
<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">
Sascha Herzinger's avatar
Sascha Herzinger committed
20
21
22
23
  <div class="chart chart-1"></div>
  <div class="chart chart-2"></div>
  <div class="chart chart-3"></div>
  <div class="chart chart-4"></div>
24
25
26
27
  <div class="chart chart-5"></div>
  <div class="chart chart-6"></div>
  <div class="chart chart-7"></div>
  <div class="chart chart-8"></div>
Sascha Herzinger's avatar
Sascha Herzinger committed
28
</div>
29

Sascha Herzinger's avatar
Sascha Herzinger committed
30
31
32
33
34
35
</body>

<script>
  /* eslint-disable */

  const fjs = fractal.init({
36
37
    handler: 'demo',
    dataSource: location.protocol + '//' + window.location.host,
38
    fractalisNode: 'http://localhost',
Sascha Herzinger's avatar
Sascha Herzinger committed
39
    getAuth () {
40
41
42
      return {token: ''}
    },
    options: {
43
44
      controlPanelPosition: 'right',
      controlPanelExpanded: true
Sascha Herzinger's avatar
Sascha Herzinger committed
45
46
    }
  })
47

48
  fjs.setSubsets([])
49

Sascha Herzinger's avatar
Sascha Herzinger committed
50
51
52
  function loadData () {
    fjs.loadData([
      {
53
54
        dataType: 'numerical',
        field: 'alcohol'
Sascha Herzinger's avatar
Sascha Herzinger committed
55
56
      },
      {
57
58
        dataType: 'numerical',
        field: 'chlorides'
Sascha Herzinger's avatar
Sascha Herzinger committed
59
60
      },
      {
61
62
        dataType: 'numerical',
        field: 'citric acid'
Sascha Herzinger's avatar
Sascha Herzinger committed
63
64
      },
      {
65
66
        dataType: 'numerical',
        field: 'density'
67
68
      },
      {
69
70
        dataType: 'numerical',
        field: 'fixed acidity'
Sascha Herzinger's avatar
Sascha Herzinger committed
71
72
      },
      {
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
        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'
Sascha Herzinger's avatar
Sascha Herzinger committed
103
104
105
106
107
108
109
110
      }
    ])
  }

  function deleteData () {
    fjs.clearCache()
  }

111
  function setCharts () {
112
    const vms = [
Sascha Herzinger's avatar
Sascha Herzinger committed
113
      fjs.setChart('correlation-analysis', '.chart-1'),
114
115
116
117
118
119
120
      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')
121
    ]
122
123
124
125
126
  }

  window.addEventListener('load', () => {
    setCharts()
  })
Sascha Herzinger's avatar
Sascha Herzinger committed
127
</script>
128
129

<style>
130
  .charts {
131
132
  }

Sascha Herzinger's avatar
Sascha Herzinger committed
133
  .chart {
134
135
136
    float: left;
    height: 20vw;
    width: 20vw;
137
138
  }
</style>