parent
b203a417ae
commit
0b2262cffd
Binary file not shown.
@ -1 +1 @@ |
|||||||
{"duration": 0.13759469985961914, "input_args": {"clf": "KNeighborsClassifier(algorithm='auto', leaf_size=30, metric='minkowski',\n metric_params=None, n_jobs=None, n_neighbors=5, p=2,\n weights='uniform')", "params": "{'n_neighbors': [1, 2, 10]}", "scoring": "{'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}", "FI": "0"}} |
{"duration": 0.26462531089782715, "input_args": {"clf": "KNeighborsClassifier(algorithm='auto', leaf_size=30, metric='minkowski',\n metric_params=None, n_jobs=None, n_neighbors=5, p=2,\n weights='uniform')", "params": "{'n_neighbors': [1, 2, 10]}", "scoring": "{'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}", "FI": "0"}} |
||||||
Binary file not shown.
@ -1 +1 @@ |
|||||||
{"duration": 0.6970040798187256, "input_args": {"clf": "RandomForestClassifier(bootstrap=True, class_weight=None, criterion='gini',\n max_depth=None, max_features='auto', max_leaf_nodes=None,\n min_impurity_decrease=0.0, min_impurity_split=None,\n min_samples_leaf=1, min_samples_split=2,\n min_weight_fraction_leaf=0.0, n_estimators='warn',\n n_jobs=None, oob_score=False, random_state=None,\n verbose=0, warm_start=False)", "params": "{'n_estimators': [10, 50]}", "scoring": "{'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}", "FI": "1"}} |
{"duration": 0.792708158493042, "input_args": {"clf": "RandomForestClassifier(bootstrap=True, class_weight=None, criterion='gini',\n max_depth=None, max_features='auto', max_leaf_nodes=None,\n min_impurity_decrease=0.0, min_impurity_split=None,\n min_samples_leaf=1, min_samples_split=2,\n min_weight_fraction_leaf=0.0, n_estimators='warn',\n n_jobs=None, oob_score=False, random_state=None,\n verbose=0, warm_start=False)", "params": "{'n_estimators': [10, 50]}", "scoring": "{'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}", "FI": "1"}} |
||||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 539 B |
@ -0,0 +1,230 @@ |
|||||||
|
<template> |
||||||
|
<b-row> |
||||||
|
<b-col cols="4"> |
||||||
|
<div id="barChartPrecision0" class="barChartPrecision0"></div> |
||||||
|
<div id="barChartPrecision1" class="barChartPrecision1"></div> |
||||||
|
<div id="barChartPrecision2" class="barChartPrecision2"></div> |
||||||
|
</b-col> |
||||||
|
<b-col cols="4"> |
||||||
|
<div id="barChartRecall0" class="barChartRecall0"></div> |
||||||
|
<div id="barChartRecall1" class="barChartRecall1"></div> |
||||||
|
<div id="barChartRecall2" class="barChartRecall2"></div> |
||||||
|
</b-col> |
||||||
|
<b-col cols="4"> |
||||||
|
<div id="barChartf1Score0" class="barChartf1Score0"></div> |
||||||
|
<div id="barChartf1Score1" class="barChartf1Score1"></div> |
||||||
|
<div id="barChartf1Score2" class="barChartf1Score2"></div> |
||||||
|
</b-col> |
||||||
|
</b-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as Plotly from 'plotly.js' |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'BarChart', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
BarChartResults: '', |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
BarChartView () { |
||||||
|
const PerClassMetrics = JSON.parse(this.BarChartResults[4]) |
||||||
|
const ClassNames = JSON.parse(this.BarChartResults[5]) |
||||||
|
|
||||||
|
const precisionPerClass = [] |
||||||
|
const recallPerClass = [] |
||||||
|
const f1ScorePerClass = [] |
||||||
|
|
||||||
|
for (let j = 0; j < ClassNames.length; j++) { |
||||||
|
precisionPerClass[j] = [] |
||||||
|
recallPerClass[j] = [] |
||||||
|
f1ScorePerClass[j] = [] |
||||||
|
for (let i = 0; i < PerClassMetrics.length; i++) { |
||||||
|
precisionPerClass[j].push(PerClassMetrics[i][ClassNames[j]].precision) |
||||||
|
recallPerClass[j].push(PerClassMetrics[i][ClassNames[j]].recall) |
||||||
|
f1ScorePerClass[j].push(PerClassMetrics[i][ClassNames[j]]['f1-score']) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var precisionData |
||||||
|
var recallData |
||||||
|
var f1ScoreData |
||||||
|
|
||||||
|
var layoutPrec = { |
||||||
|
autosize: false, |
||||||
|
width: 400, |
||||||
|
height: 400, |
||||||
|
xaxis: { |
||||||
|
title: 'Classifier ID', |
||||||
|
type:"category", |
||||||
|
titlefont: { |
||||||
|
family: 'Arial, sans-serif', |
||||||
|
size: 18, |
||||||
|
color: 'lightgrey' |
||||||
|
}, |
||||||
|
showticklabels: true, |
||||||
|
tickangle: 'auto', |
||||||
|
tickfont: { |
||||||
|
family: 'Old Standard TT, serif', |
||||||
|
size: 14, |
||||||
|
color: 'black' |
||||||
|
}, |
||||||
|
exponentformat: 'e', |
||||||
|
showexponent: 'all' |
||||||
|
}, |
||||||
|
yaxis: { |
||||||
|
title: 'Precision', |
||||||
|
titlefont: { |
||||||
|
family: 'Arial, sans-serif', |
||||||
|
size: 18, |
||||||
|
color: 'lightgrey' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var layoutRec = { |
||||||
|
autosize: false, |
||||||
|
width: 400, |
||||||
|
height: 400, |
||||||
|
xaxis: { |
||||||
|
title: 'Classifier ID', |
||||||
|
type:"category", |
||||||
|
titlefont: { |
||||||
|
family: 'Arial, sans-serif', |
||||||
|
size: 18, |
||||||
|
color: 'lightgrey' |
||||||
|
}, |
||||||
|
showticklabels: true, |
||||||
|
tickangle: 'auto', |
||||||
|
tickfont: { |
||||||
|
family: 'Old Standard TT, serif', |
||||||
|
size: 14, |
||||||
|
color: 'black' |
||||||
|
}, |
||||||
|
exponentformat: 'e', |
||||||
|
showexponent: 'all' |
||||||
|
}, |
||||||
|
yaxis: { |
||||||
|
title: 'Recall', |
||||||
|
titlefont: { |
||||||
|
family: 'Arial, sans-serif', |
||||||
|
size: 18, |
||||||
|
color: 'lightgrey' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var layoutf1Score = { |
||||||
|
autosize: false, |
||||||
|
width: 400, |
||||||
|
height: 400, |
||||||
|
xaxis: { |
||||||
|
title: 'Classifier ID', |
||||||
|
type:"category", |
||||||
|
titlefont: { |
||||||
|
family: 'Arial, sans-serif', |
||||||
|
size: 18, |
||||||
|
color: 'lightgrey' |
||||||
|
}, |
||||||
|
showticklabels: true, |
||||||
|
tickangle: 'auto', |
||||||
|
tickfont: { |
||||||
|
family: 'Old Standard TT, serif', |
||||||
|
size: 14, |
||||||
|
color: 'black' |
||||||
|
}, |
||||||
|
exponentformat: 'e', |
||||||
|
showexponent: 'all' |
||||||
|
}, |
||||||
|
yaxis: { |
||||||
|
title: 'F1-Score', |
||||||
|
titlefont: { |
||||||
|
family: 'Arial, sans-serif', |
||||||
|
size: 18, |
||||||
|
color: 'lightgrey' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
for (let j = 0; j < ClassNames.length; j++) { |
||||||
|
let len = precisionPerClass[j].length |
||||||
|
let indices = new Array(len) |
||||||
|
for (let i = 0; i < len; ++i) indices[i] = i |
||||||
|
indices.sort(function (a, b) { return precisionPerClass[j][b] < precisionPerClass[j][a] ? -1 : precisionPerClass[j][b] > precisionPerClass[j][a] ? 1 : 0 }) |
||||||
|
precisionPerClass[j].sort((function(a, b){return b-a})) |
||||||
|
precisionData = [ |
||||||
|
{ |
||||||
|
x: indices.map(String), |
||||||
|
y: precisionPerClass[j], |
||||||
|
type: 'bar', |
||||||
|
marker: { |
||||||
|
color: 'rgb(158,202,225)', |
||||||
|
opacity: 0.6, |
||||||
|
line: { |
||||||
|
color: 'rgb(8,48,107)', |
||||||
|
width: 1.5 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
Plotly.newPlot('barChartPrecision' + j, precisionData, layoutPrec) |
||||||
|
} |
||||||
|
for (let j = 0; j < ClassNames.length; j++) { |
||||||
|
let len = recallPerClass[j].length |
||||||
|
let indices = new Array(len) |
||||||
|
for (let i = 0; i < len; ++i) indices[i] = i |
||||||
|
indices.sort(function (a, b) { return recallPerClass[j][b] < recallPerClass[j][a] ? -1 : recallPerClass[j][b] > recallPerClass[j][a] ? 1 : 0 }) |
||||||
|
recallPerClass[j].sort((function(a, b){return b-a})) |
||||||
|
recallData = [ |
||||||
|
{ |
||||||
|
x: indices.map(String), |
||||||
|
y: recallPerClass[j], |
||||||
|
type: 'bar', |
||||||
|
marker: { |
||||||
|
color: 'rgb(158,202,225)', |
||||||
|
opacity: 0.6, |
||||||
|
line: { |
||||||
|
color: 'rgb(8,48,107)', |
||||||
|
width: 1.5 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
Plotly.newPlot('barChartRecall' + j, recallData, layoutRec) |
||||||
|
} |
||||||
|
for (let j = 0; j < ClassNames.length; j++) { |
||||||
|
let len = f1ScorePerClass[j].length |
||||||
|
let indices = new Array(len) |
||||||
|
for (let i = 0; i < len; ++i) indices[i] = i |
||||||
|
indices.sort(function (a, b) { return f1ScorePerClass[j][b] < f1ScorePerClass[j][a] ? -1 : f1ScorePerClass[j][b] > f1ScorePerClass[j][a] ? 1 : 0 }) |
||||||
|
f1ScorePerClass[j].sort((function(a, b){return b-a})) |
||||||
|
f1ScoreData = [ |
||||||
|
{ |
||||||
|
x: indices.map(String), |
||||||
|
y: f1ScorePerClass[j], |
||||||
|
type: 'bar', |
||||||
|
marker: { |
||||||
|
color: 'rgb(158,202,225)', |
||||||
|
opacity: 0.6, |
||||||
|
line: { |
||||||
|
color: 'rgb(8,48,107)', |
||||||
|
width: 1.5 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
Plotly.newPlot('barChartf1Score' + j, f1ScoreData, layoutf1Score) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
EventBus.$on('emittedEventCallingBarChart', data => { this.BarChartResults = data }) |
||||||
|
EventBus.$on('emittedEventCallingBarChart', this.BarChartView) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -1,32 +1,209 @@ |
|||||||
<!-- Main Visualization View --> |
<!-- Main Visualization View --> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<div> |
<b-container fluid class="bv-example-row"> |
||||||
|
<b-row class="md-3"> |
||||||
|
<b-col cols="3"> |
||||||
|
<mdb-card> |
||||||
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Set Selection</mdb-card-header> |
||||||
|
<mdb-card-body> |
||||||
|
<mdb-card-text class="text-center" > |
||||||
<LoadFile |
<LoadFile |
||||||
|
v-on:RetrieveValueCSVEvent="updateCSVName($event)" |
||||||
/> |
/> |
||||||
</div> |
</mdb-card-text> |
||||||
|
</mdb-card-body> |
||||||
|
</mdb-card> |
||||||
|
</b-col> |
||||||
|
<b-col cols="4"> |
||||||
|
<mdb-card> |
||||||
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Base Classifiers Overview</mdb-card-header> |
||||||
|
<mdb-card-body> |
||||||
|
<ScatterPlot/> |
||||||
|
</mdb-card-body> |
||||||
|
</mdb-card> |
||||||
|
</b-col> |
||||||
|
<b-col cols="5"> |
||||||
|
<mdb-card> |
||||||
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Classifiers, Features, and Classes Chord Visualization</mdb-card-header> |
||||||
|
<mdb-card-body> |
||||||
|
<StretchedChord/> |
||||||
|
</mdb-card-body> |
||||||
|
</mdb-card> |
||||||
|
</b-col> |
||||||
|
</b-row> |
||||||
|
<b-row class="mb-3 mt-3"> |
||||||
|
<b-col cols="3"> |
||||||
|
<mdb-card > |
||||||
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Hyper-Parameters Setting</mdb-card-header> |
||||||
|
<mdb-card-body> |
||||||
|
<mdb-card-text class="text-center"> |
||||||
|
<ParametersSetting |
||||||
|
v-on:InitializeEnsembleLearningEvent="DataBaseRequestDataSetName()" |
||||||
|
/> |
||||||
|
</mdb-card-text> |
||||||
|
</mdb-card-body> |
||||||
|
</mdb-card> |
||||||
|
</b-col> |
||||||
|
<b-col cols="6"> |
||||||
|
<mdb-card> |
||||||
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Per Class Metrics Exploration</mdb-card-header> |
||||||
|
<mdb-card-body> |
||||||
|
<BarChart/> |
||||||
|
</mdb-card-body> |
||||||
|
</mdb-card> |
||||||
|
</b-col> |
||||||
|
</b-row> |
||||||
|
<b-row> |
||||||
|
<b-col cols="3"> |
||||||
|
<mdb-card> |
||||||
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Visual Mapping</mdb-card-header> |
||||||
|
<mdb-card-body> |
||||||
|
<mdb-card-text class="text-center"> |
||||||
|
<Tuning/> |
||||||
|
</mdb-card-text> |
||||||
|
</mdb-card-body> |
||||||
|
</mdb-card> |
||||||
|
</b-col> |
||||||
|
</b-row> |
||||||
|
</b-container> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import Vue from 'vue' |
import Vue from 'vue' |
||||||
import LoadFile from './LoadFile.vue' |
import LoadFile from './LoadFile.vue' |
||||||
|
import ParametersSetting from './ParametersSetting.vue' |
||||||
|
import ScatterPlot from './ScatterPlot.vue' |
||||||
|
import BarChart from './BarChart.vue' |
||||||
|
import StretchedChord from './StretchedChord.vue' |
||||||
|
import Tuning from './Tuning.vue' |
||||||
|
import axios from 'axios' |
||||||
|
import { mdbCard, mdbCardBody, mdbCardText, mdbCardHeader } from 'mdbvue' |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
|
||||||
export default Vue.extend({ |
export default Vue.extend({ |
||||||
name: 'Main', |
name: 'Main', |
||||||
components: { |
components: { |
||||||
LoadFile |
LoadFile, |
||||||
|
ParametersSetting, |
||||||
|
ScatterPlot, |
||||||
|
BarChart, |
||||||
|
StretchedChord, |
||||||
|
Tuning, |
||||||
|
mdbCard, |
||||||
|
mdbCardBody, |
||||||
|
mdbCardHeader, |
||||||
|
mdbCardText |
||||||
}, |
}, |
||||||
data: function () { |
data () { |
||||||
return { |
return { |
||||||
nothing: 0 |
Collection: 0, |
||||||
|
OverviewResults: 0, |
||||||
|
RetrieveValueFile: 'IrisC', |
||||||
|
ClassifierIDsList: '' |
||||||
} |
} |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
|
updateCSVName (retrieving) { |
||||||
|
this.RetrieveValueFile = retrieving |
||||||
|
}, |
||||||
|
DataBaseRequestDataSetName () { |
||||||
|
const path = `http://127.0.0.1:5000/data/ServerRequest` |
||||||
|
const postData = { |
||||||
|
fileName: this.RetrieveValueFile |
||||||
|
} |
||||||
|
const axiosConfig = { |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
'Access-Control-Allow-Origin': '*', |
||||||
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token', |
||||||
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS' |
||||||
|
} |
||||||
|
} |
||||||
|
axios.post(path, postData, axiosConfig) |
||||||
|
.then(response => { |
||||||
|
console.log('Send request to server! FileName was sent successfully!') |
||||||
|
}) |
||||||
|
.catch(error => { |
||||||
|
console.log(error) |
||||||
|
}) |
||||||
|
this.getCollection() |
||||||
|
this.getOverviewResults() |
||||||
|
}, |
||||||
|
getCollection () { |
||||||
|
this.Collection = this.getCollectionFromBackend() |
||||||
|
}, |
||||||
|
getCollectionFromBackend () { |
||||||
|
const path = `http://localhost:5000/data/ClientRequest` |
||||||
|
|
||||||
|
const axiosConfig = { |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
'Access-Control-Allow-Origin': '*', |
||||||
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token', |
||||||
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS' |
||||||
|
} |
||||||
|
} |
||||||
|
axios.get(path, axiosConfig) |
||||||
|
.then(response => { |
||||||
|
this.Collection = response.data.Collection |
||||||
|
console.log('Collection was overwritten with new data sent by the server!') |
||||||
|
}) |
||||||
|
.catch(error => { |
||||||
|
console.log(error) |
||||||
|
}) |
||||||
}, |
}, |
||||||
props: [], |
getOverviewResults () { |
||||||
computed: { |
this.OverviewResults = this.getScatterplotDataFromBackend() |
||||||
|
}, |
||||||
|
getScatterplotDataFromBackend () { |
||||||
|
const path = `http://localhost:5000/data/PlotClassifiers` |
||||||
|
|
||||||
|
const axiosConfig = { |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
'Access-Control-Allow-Origin': '*', |
||||||
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token', |
||||||
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS' |
||||||
|
} |
||||||
|
} |
||||||
|
axios.get(path, axiosConfig) |
||||||
|
.then(response => { |
||||||
|
this.OverviewResults = response.data.OverviewResults |
||||||
|
console.log('Server successfully sent all the data related to visualizations!') |
||||||
|
EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults) |
||||||
|
EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults) |
||||||
|
EventBus.$emit('emittedEventCallingChordView', this.OverviewResults) |
||||||
|
}) |
||||||
|
.catch(error => { |
||||||
|
console.log(error) |
||||||
|
}) |
||||||
|
}, |
||||||
|
SendSelectedPointsToServer () { |
||||||
|
const path = `http://127.0.0.1:5000/data/ServerRequestSelPoin` |
||||||
|
const postData = { |
||||||
|
ClassifiersList: this.ClassifierIDsList |
||||||
|
} |
||||||
|
const axiosConfig = { |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
'Access-Control-Allow-Origin': '*', |
||||||
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token', |
||||||
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS' |
||||||
|
} |
||||||
|
} |
||||||
|
axios.post(path, postData, axiosConfig) |
||||||
|
.then(response => { |
||||||
|
console.log('Sent the selected points to the server (scatterplot)!') |
||||||
|
}) |
||||||
|
.catch(error => { |
||||||
|
console.log(error) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
EventBus.$on('SendSelectedPointsToServerEvent', data => { this.ClassifierIDsList = data }) |
||||||
|
EventBus.$on('SendSelectedPointsToServerEvent', this.SendSelectedPointsToServer) |
||||||
} |
} |
||||||
}) |
}) |
||||||
</script> |
</script> |
||||||
|
|||||||
@ -0,0 +1,24 @@ |
|||||||
|
<template> |
||||||
|
<button |
||||||
|
id="Execute" |
||||||
|
v-on:click="execute"> |
||||||
|
<font-awesome-icon icon="play" /> |
||||||
|
Execute</button> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'ParametersSetting', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
InitializeEnsemble: false, |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
execute () { |
||||||
|
this.InitializeEnsemble = true |
||||||
|
this.$emit('InitializeEnsembleLearningEvent') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
<template> |
||||||
|
<div id="OverviewPlotly" class="OverviewPlotly"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as Plotly from 'plotly.js' |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'ScatterPlot', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
ScatterPlotResults: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
ScatterPlotView () { |
||||||
|
const colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0]) |
||||||
|
const MDSData = JSON.parse(this.ScatterPlotResults[1]) |
||||||
|
const classifiersInfo = JSON.parse(this.ScatterPlotResults[2]) |
||||||
|
|
||||||
|
var classifiersInfoProcessing = [] |
||||||
|
let step = 0 |
||||||
|
let doubleStep = 1 |
||||||
|
|
||||||
|
for (let i = 0; i < classifiersInfo.length / 2; i++) { |
||||||
|
classifiersInfoProcessing[i] = 'ClassifierID: ' + step + '; Details: ' |
||||||
|
step++ |
||||||
|
for (let j = 0; j < Object.values(classifiersInfo[doubleStep]).length; j++) { |
||||||
|
classifiersInfoProcessing[i] = classifiersInfoProcessing[i] + Object.keys(classifiersInfo[doubleStep])[j] + ': ' + Object.values(classifiersInfo[doubleStep])[j] |
||||||
|
} |
||||||
|
doubleStep = doubleStep + 2 |
||||||
|
} |
||||||
|
|
||||||
|
const DataforMDS = [{ |
||||||
|
x: MDSData[0], |
||||||
|
y: MDSData[1], |
||||||
|
mode: 'markers', |
||||||
|
text: classifiersInfoProcessing, |
||||||
|
marker: { |
||||||
|
color: colorsforScatterPlot, |
||||||
|
size: 12, |
||||||
|
colorscale: 'Viridis', |
||||||
|
colorbar: { |
||||||
|
title: 'Metrics Sum', |
||||||
|
titleside: 'Top' |
||||||
|
}, |
||||||
|
reversescale: true |
||||||
|
} |
||||||
|
}] |
||||||
|
const layout = { |
||||||
|
title: 'Classifiers Performance MDS', |
||||||
|
xaxis: { |
||||||
|
visible: false |
||||||
|
}, |
||||||
|
yaxis: { |
||||||
|
visible: false |
||||||
|
} |
||||||
|
} |
||||||
|
Plotly.newPlot('OverviewPlotly', DataforMDS, layout) |
||||||
|
|
||||||
|
this.selectedPointsOverview() |
||||||
|
}, |
||||||
|
selectedPointsOverview () { |
||||||
|
const OverviewPlotly = document.getElementById('OverviewPlotly') |
||||||
|
OverviewPlotly.on('plotly_selected', function (evt) { |
||||||
|
const ClassifierIDsList = [] |
||||||
|
for (let i = 0; evt.points.length; i++) { |
||||||
|
if (evt.points[i] === undefined) { |
||||||
|
break |
||||||
|
} else { |
||||||
|
const OnlyId = evt.points[i].text.split(';') |
||||||
|
ClassifierIDsList.push(OnlyId[0]) |
||||||
|
} |
||||||
|
} |
||||||
|
if (ClassifierIDsList != '') { |
||||||
|
EventBus.$emit('SendSelectedPointsToServerEvent', ClassifierIDsList) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
EventBus.$on('emittedEventCallingScatterPlot', data => { |
||||||
|
this.ScatterPlotResults = data}) |
||||||
|
EventBus.$on('emittedEventCallingScatterPlot', this.ScatterPlotView) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,582 @@ |
|||||||
|
<template> |
||||||
|
<div id="chart"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as d3Base from 'd3' |
||||||
|
import { loom, string } from 'd3-loom' |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
|
||||||
|
// attach all d3 plugins to the d3 library |
||||||
|
const d3 = Object.assign(d3Base, { loom, string }) |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "StretchedChord", |
||||||
|
data () { |
||||||
|
return { |
||||||
|
AllResults: '', |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
StretchChord () { |
||||||
|
const FeatureImportance = JSON.parse(this.AllResults[3]) |
||||||
|
const ClassNames = JSON.parse(this.AllResults[5]) |
||||||
|
|
||||||
|
var SortFeaturesPerClass = [] |
||||||
|
FeatureImportance.forEach(classifier => { |
||||||
|
for (let i = 0; i < length; i++) { |
||||||
|
SortFeaturesPerClass.push(this.sortObject(classifier[i])) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
var margin = {left:80, top:40, right:120, bottom:50}, |
||||||
|
width = Math.max( Math.min(window.innerWidth, 1100) - margin.left - margin.right - 20, 400), |
||||||
|
height = Math.max( Math.min(window.innerHeight - 250, 900) - margin.top - margin.bottom - 20, 400), |
||||||
|
innerRadius = Math.min(width * 0.33, height * .45), |
||||||
|
outerRadius = innerRadius * 1.05; |
||||||
|
|
||||||
|
//Recalculate the width and height now that we know the radius |
||||||
|
width = outerRadius * 2 + margin.right + margin.left; |
||||||
|
height = outerRadius * 2 + margin.top + margin.bottom; |
||||||
|
|
||||||
|
//Reset the overall font size |
||||||
|
var newFontSize = Math.min(70, Math.max(40, innerRadius * 62.5 / 250)); |
||||||
|
d3.select("html").style("font-size", newFontSize + "%"); |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
////////////////// Set-up Chord parameters ///////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
var pullOutSize = 20 + 30/135 * innerRadius; |
||||||
|
var numFormat = d3.format(",.0f"); |
||||||
|
var defaultOpacity = 0.85, |
||||||
|
fadeOpacity = 0.075; |
||||||
|
|
||||||
|
var loom = d3.loom() |
||||||
|
.padAngle(0.05) |
||||||
|
//.sortSubgroups(sortAlpha) |
||||||
|
//.heightInner(28) |
||||||
|
.emptyPerc(0.2) |
||||||
|
.widthInner(30) |
||||||
|
//.widthInner(function(d) { return 6 * d.length; }) |
||||||
|
.value(function(d) { return d.words; }) |
||||||
|
.inner(function(d) { return d.character; }) |
||||||
|
.outer(function(d) { return d.location; }); |
||||||
|
|
||||||
|
var arc = d3.arc() |
||||||
|
.innerRadius(innerRadius*1.01) |
||||||
|
.outerRadius(outerRadius); |
||||||
|
|
||||||
|
var string = d3.string() |
||||||
|
.radius(innerRadius) |
||||||
|
.pullout(pullOutSize); |
||||||
|
|
||||||
|
var characterNotes = []; |
||||||
|
|
||||||
|
characterNotes["Iris Setosa"] = "Speaking almost twice as many words as the second most abundant speaker, Gandalf is taking up a large portion of dialogue in almost every location he's in, but stays rather quiet in Mordor"; |
||||||
|
characterNotes["Iris Versicolour"] = "An unexpected runner up to having spoken the most words, Sam flourishes after the battle at Amon Hen, taking up a considerable portion of the words said in both Mordor and Gondor"; |
||||||
|
characterNotes["Iris Virginica"] = "Although eventually being crowned in Minas Tirith, Gondor, Aragorn is by far most talkative in that other human region, Rohan, fighting a battle at Helm's Deep and convincing an army of dead"; |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
////////////////////// Create SVG ////////////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
var svg = d3.select("#chart").append("svg") |
||||||
|
.attr("width", width + margin.left + margin.right) |
||||||
|
.attr("height", height + margin.top + margin.bottom); |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
///////////////////// Read in data ///////////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
///////////////////// Prepare the data ///////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
//Sort the inner characters based on the total number of words spoken |
||||||
|
var dataAgg = [ |
||||||
|
{ |
||||||
|
"location": "Classifier 1", |
||||||
|
"character": "Iris Setosa", |
||||||
|
"words": 94 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"location": "Classifier 1", |
||||||
|
"character": "Iris Versicolour", |
||||||
|
"words": 100 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"location": "Classifier 1", |
||||||
|
"character": "Iris Virginica", |
||||||
|
"words": 100 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"location": "Feature 1", |
||||||
|
"character": "Iris Virginica", |
||||||
|
"words": 40 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"location": "Feature 2", |
||||||
|
"character": "Iris Virginica", |
||||||
|
"words": 60 |
||||||
|
}, |
||||||
|
] |
||||||
|
//Find the total number of words per character |
||||||
|
var dataChar = d3.nest() |
||||||
|
.key(function(d) { return d.character; }) |
||||||
|
.rollup(function(leaves) { return d3.sum(leaves, function(d) { return d.words; }); }) |
||||||
|
.entries(dataAgg) |
||||||
|
.sort(function(a, b){ return d3.descending(a.value, b.value); }); |
||||||
|
//Unflatten the result |
||||||
|
var characterOrder = dataChar.map(function(d) { return d.key }) |
||||||
|
//Sort the characters on a specific order |
||||||
|
function sortCharacter(a, b) { |
||||||
|
return characterOrder.indexOf(a) - characterOrder.indexOf(b) |
||||||
|
}//sortCharacter |
||||||
|
|
||||||
|
//Set more loom functions |
||||||
|
loom |
||||||
|
.sortSubgroups(sortCharacter) |
||||||
|
.heightInner(innerRadius*0.75/characterOrder.length) |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
///////////////////////// Colors /////////////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
var locations = ["Iris Setosa", "Iris Versicolour", "Iris Virginica"] |
||||||
|
var colors = ["#5a3511", "#47635f", "#223e15"] |
||||||
|
var color = d3.scaleOrdinal() |
||||||
|
.domain(locations) |
||||||
|
.range(colors) |
||||||
|
|
||||||
|
//Create a group that already holds the data |
||||||
|
var g = svg.append("g") |
||||||
|
.attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")") |
||||||
|
.datum(loom(dataAgg)) |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
///////////////////// Set-up title ///////////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
var titles = g.append("g") |
||||||
|
.attr("class", "texts") |
||||||
|
.style("opacity", 0) |
||||||
|
|
||||||
|
titles.append("text") |
||||||
|
.attr("class", "name-title") |
||||||
|
.attr("x", 0) |
||||||
|
.attr("y", -innerRadius*5/6) |
||||||
|
|
||||||
|
titles.append("text") |
||||||
|
.attr("class", "value-title") |
||||||
|
.attr("x", 0) |
||||||
|
.attr("y", -innerRadius*5/6 + 25) |
||||||
|
|
||||||
|
//The character pieces |
||||||
|
titles.append("text") |
||||||
|
.attr("class", "character-note") |
||||||
|
.attr("x", 0) |
||||||
|
.attr("y", innerRadius/2) |
||||||
|
.attr("dy", "0.35em") |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
////////////////////// Draw outer arcs ///////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
var arcs = g.append("g") |
||||||
|
.attr("class", "arcs") |
||||||
|
.selectAll("g") |
||||||
|
.data(function(s) { |
||||||
|
return s.groups |
||||||
|
}) |
||||||
|
.enter().append("g") |
||||||
|
.attr("class", "arc-wrapper") |
||||||
|
.each(function(d) { |
||||||
|
d.pullOutSize = (pullOutSize * ( d.startAngle > Math.PI + 1e-2 ? -1 : 1)) |
||||||
|
}) |
||||||
|
.on("mouseover", function(d) { |
||||||
|
|
||||||
|
//Hide all other arcs |
||||||
|
d3.selectAll(".arc-wrapper") |
||||||
|
.transition() |
||||||
|
.style("opacity", function(s) { return s.outername === d.outername ? 1 : 0.5 }) |
||||||
|
|
||||||
|
//Hide all other strings |
||||||
|
d3.selectAll(".string") |
||||||
|
.transition() |
||||||
|
.style("opacity", function(s) { return s.outer.outername === d.outername ? 1 : fadeOpacity }) |
||||||
|
|
||||||
|
//Find the data for the strings of the hovered over location |
||||||
|
var locationData = loom(dataAgg).filter(function(s) { return s.outer.outername === d.outername }) |
||||||
|
//Hide the characters who haven't said a word |
||||||
|
d3.selectAll(".inner-label") |
||||||
|
.transition() |
||||||
|
.style("opacity", function(s) { |
||||||
|
//Find out how many words the character said at the hovered over location |
||||||
|
var char = locationData.filter(function(c) { return c.outer.innername === s.name }) |
||||||
|
return char.length === 0 ? 0.1 : 1 |
||||||
|
}) |
||||||
|
}) |
||||||
|
.on("mouseout", function(d) { |
||||||
|
|
||||||
|
//Sjow all arc labels |
||||||
|
d3.selectAll(".arc-wrapper") |
||||||
|
.transition() |
||||||
|
.style("opacity", 1) |
||||||
|
|
||||||
|
//Show all strings again |
||||||
|
d3.selectAll(".string") |
||||||
|
.transition() |
||||||
|
.style("opacity", defaultOpacity) |
||||||
|
|
||||||
|
//Show all characters again |
||||||
|
d3.selectAll(".inner-label") |
||||||
|
.transition() |
||||||
|
.style("opacity", 1) |
||||||
|
}) |
||||||
|
|
||||||
|
var outerArcs = arcs.append("path") |
||||||
|
.attr("class", "arc") |
||||||
|
.style("fill", function(d) { return color(d.innername) }) |
||||||
|
.attr("d", arc) |
||||||
|
.attr("transform", function(d, i) { //Pull the two slices apart |
||||||
|
return "translate(" + d.pullOutSize + ',' + 0 + ")" |
||||||
|
}) |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
//////////////////// Draw outer labels ///////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
//The text needs to be rotated with the offset in the clockwise direction |
||||||
|
var outerLabels = arcs.append("g") |
||||||
|
.each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2) }) |
||||||
|
.attr("class", "outer-labels") |
||||||
|
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null }) |
||||||
|
.attr("transform", function(d,i) { |
||||||
|
var c = arc.centroid(d) |
||||||
|
return "translate(" + (c[0] + d.pullOutSize) + "," + c[1] + ")" |
||||||
|
+ "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" |
||||||
|
+ "translate(" + 26 + ",0)" |
||||||
|
+ (d.angle > Math.PI ? "rotate(180)" : "") |
||||||
|
}) |
||||||
|
|
||||||
|
//The outer name |
||||||
|
outerLabels.append("text") |
||||||
|
.attr("class", "outer-label") |
||||||
|
.attr("dy", ".35em") |
||||||
|
.text(function(d,i){ return d.outername }) |
||||||
|
|
||||||
|
//The value below it |
||||||
|
outerLabels.append("text") |
||||||
|
.attr("class", "outer-label-value") |
||||||
|
.attr("dy", "1.5em") |
||||||
|
.text(function(d,i){ return numFormat(d.value) + " words" }) |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
////////////////// Draw inner strings ////////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
var strings = g.append("g") |
||||||
|
.attr("class", "stringWrapper") |
||||||
|
.style("isolation", "isolate") |
||||||
|
.selectAll("path") |
||||||
|
.data(function(strings) { |
||||||
|
return strings |
||||||
|
}) |
||||||
|
.enter().append("path") |
||||||
|
.attr("class", "string") |
||||||
|
.style("mix-blend-mode", "multiply") |
||||||
|
.attr("d", string) |
||||||
|
.style("fill", function(d) { return d3.rgb( color(d.outer.innername) ).brighter(0.2) }) |
||||||
|
.style("opacity", defaultOpacity) |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
//////////////////// Draw inner labels ///////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
//The text also needs to be displaced in the horizontal directions |
||||||
|
//And also rotated with the offset in the clockwise direction |
||||||
|
var innerLabels = g.append("g") |
||||||
|
.attr("class","inner-labels") |
||||||
|
.selectAll("text") |
||||||
|
.data(function(s) { |
||||||
|
return s.innergroups |
||||||
|
}) |
||||||
|
.enter().append("text") |
||||||
|
.attr("class", "inner-label") |
||||||
|
.attr("x", function(d,i) { return d.x }) |
||||||
|
.attr("y", function(d,i) { return d.y }) |
||||||
|
.style("text-anchor", "middle") |
||||||
|
.attr("dy", ".35em") |
||||||
|
.text(function(d,i) { return d.name }) |
||||||
|
.on("mouseover", function(d) { |
||||||
|
|
||||||
|
//Show all the strings of the highlighted character and hide all else |
||||||
|
d3.selectAll(".string") |
||||||
|
.transition() |
||||||
|
.style("opacity", function(s) { |
||||||
|
return s.outer.innername !== d.name ? fadeOpacity : 1 |
||||||
|
}) |
||||||
|
|
||||||
|
//Update the word count of the outer labels |
||||||
|
var characterData = loom(dataAgg).filter(function(s) { return s.outer.innername === d.name }) |
||||||
|
d3.selectAll(".outer-label-value") |
||||||
|
.text(function(s,i){ |
||||||
|
//Find which characterData is the correct one based on location |
||||||
|
var loc = characterData.filter(function(c) { return c.outer.outername === s.outername }) |
||||||
|
if(loc.length === 0) { |
||||||
|
var value = 0 |
||||||
|
} else { |
||||||
|
var value = loc[0].outer.value |
||||||
|
} |
||||||
|
return numFormat(value) + (value === 1 ? " word" : " words") |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
//Hide the arc where the character hasn't said a thing |
||||||
|
d3.selectAll(".arc-wrapper") |
||||||
|
.transition() |
||||||
|
.style("opacity", function(s) { |
||||||
|
//Find which characterData is the correct one based on location |
||||||
|
var loc = characterData.filter(function(c) { return c.outer.outername === s.outername }) |
||||||
|
return loc.length === 0 ? 0.1 : 1 |
||||||
|
}) |
||||||
|
|
||||||
|
//Update the title to show the total word count of the character |
||||||
|
d3.selectAll(".texts") |
||||||
|
.transition() |
||||||
|
.style("opacity", 1) |
||||||
|
d3.select(".name-title") |
||||||
|
.text(d.name) |
||||||
|
d3.select(".value-title") |
||||||
|
.text(function() { |
||||||
|
var words = dataChar.filter(function(s) { return s.key === d.name }) |
||||||
|
return numFormat(words[0].value) |
||||||
|
}) |
||||||
|
|
||||||
|
//Show the character note |
||||||
|
d3.selectAll(".character-note") |
||||||
|
.text(characterNotes[d.name]) |
||||||
|
.call(wrap, 2.25*pullOutSize) |
||||||
|
|
||||||
|
}) |
||||||
|
.on("mouseout", function(d) { |
||||||
|
|
||||||
|
//Put the string opacity back to normal |
||||||
|
d3.selectAll(".string") |
||||||
|
.transition() |
||||||
|
.style("opacity", defaultOpacity) |
||||||
|
|
||||||
|
//Return the word count to what it was |
||||||
|
d3.selectAll(".outer-label-value") |
||||||
|
.text(function(s,i){ return numFormat(s.value) + " words" }) |
||||||
|
|
||||||
|
//Show all arcs again |
||||||
|
d3.selectAll(".arc-wrapper") |
||||||
|
.transition() |
||||||
|
.style("opacity", 1) |
||||||
|
|
||||||
|
//Hide the title |
||||||
|
d3.selectAll(".texts") |
||||||
|
.transition() |
||||||
|
.style("opacity", 0) |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
///////////////////// Extra functions ////////////////////// |
||||||
|
//////////////////////////////////////////////////////////// |
||||||
|
|
||||||
|
//Sort alphabetically |
||||||
|
function sortAlpha(a, b){ |
||||||
|
if(a < b) return -1 |
||||||
|
if(a > b) return 1 |
||||||
|
return 0 |
||||||
|
}//sortAlpha |
||||||
|
|
||||||
|
//Sort on the number of words |
||||||
|
function sortWords(a, b){ |
||||||
|
if(a.words < b.words) return -1 |
||||||
|
if(a.words > b.words) return 1 |
||||||
|
return 0 |
||||||
|
}//sortWords |
||||||
|
|
||||||
|
/*Taken from http://bl.ocks.org/mbostock/7555321 |
||||||
|
//Wraps SVG text*/ |
||||||
|
function wrap(text, width) { |
||||||
|
text.each(function() { |
||||||
|
var text = d3.select(this), |
||||||
|
words = text.text().split(/\s+/).reverse(), |
||||||
|
word, |
||||||
|
line = [], |
||||||
|
lineNumber = 0, |
||||||
|
lineHeight = 1.2, // ems |
||||||
|
y = parseFloat(text.attr("y")), |
||||||
|
x = parseFloat(text.attr("x")), |
||||||
|
dy = parseFloat(text.attr("dy")), |
||||||
|
tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em") |
||||||
|
|
||||||
|
while (word = words.pop()) { |
||||||
|
line.push(word) |
||||||
|
tspan.text(line.join(" ")) |
||||||
|
if (tspan.node().getComputedTextLength() > width) { |
||||||
|
line.pop() |
||||||
|
tspan.text(line.join(" ")) |
||||||
|
line = [word] |
||||||
|
tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}//wrap |
||||||
|
}, |
||||||
|
sortObject (obj) { |
||||||
|
var arr = [] |
||||||
|
for (var prop in obj) { |
||||||
|
if (Object.prototype.hasOwnProperty.call(obj, prop)) { |
||||||
|
if ((this.LimitFeatureImportance/100) < Math.abs(obj[prop])) { |
||||||
|
arr.push({ |
||||||
|
'FeatureID': prop, |
||||||
|
'ImportanceValue': obj[prop] |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
arr = arr.sort(function (a, b) { return Math.abs(b.ImportanceValue) - Math.abs(a.ImportanceValue) }) |
||||||
|
return arr |
||||||
|
}, |
||||||
|
ObjectSize (obj) { |
||||||
|
let size = 0 |
||||||
|
let key |
||||||
|
for (key in obj) { |
||||||
|
if (Object.prototype.hasOwnProperty.call(obj, key)) size++ |
||||||
|
} |
||||||
|
return size |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
EventBus.$on('emittedEventCallingChordView', data => { this.AllResults = data }) |
||||||
|
EventBus.$on('emittedEventCallingChordView', this.StretchChord) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||||
|
<style scoped> |
||||||
|
html { font-size: 62.5%; } |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: 'Cormorant', serif; |
||||||
|
font-size: 1.2rem; |
||||||
|
fill: #b9b9b9; |
||||||
|
} |
||||||
|
|
||||||
|
.lotr-content-wrapper { |
||||||
|
max-width: 900px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
#lotr-title { |
||||||
|
font-size: 42px; |
||||||
|
font-weight: 300; |
||||||
|
margin: 40px 30px 0px 30px; |
||||||
|
color: #272727; |
||||||
|
} |
||||||
|
|
||||||
|
#lotr-subtitle { |
||||||
|
font-size: 14px; |
||||||
|
color: #b1b1b1; |
||||||
|
margin: 0px 30px 20px 30px; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
#lotr-intro { |
||||||
|
font-size: 16px; |
||||||
|
margin: 0px 30px 10px 30px; |
||||||
|
max-width: 800px; |
||||||
|
} |
||||||
|
|
||||||
|
#lotr-note { |
||||||
|
font-size: 14px; |
||||||
|
margin: 0px 30px 10px 30px; |
||||||
|
max-width: 800px; |
||||||
|
color: #b1b1b1; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
#chart { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
#lotr-credit { |
||||||
|
font-size: 14px; |
||||||
|
margin: 10px 30px 5px 30px; |
||||||
|
} |
||||||
|
|
||||||
|
#lotr-sources { |
||||||
|
font-size: 11px; |
||||||
|
max-width: 300px; |
||||||
|
margin: 15px 30px 5px 30px; |
||||||
|
color: #9e9e9e; |
||||||
|
font-weight: 300; |
||||||
|
padding-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
a:hover { |
||||||
|
text-decoration: none; |
||||||
|
border-bottom: 1px solid black; |
||||||
|
} |
||||||
|
|
||||||
|
a, a:link, a:visited, a:active { |
||||||
|
text-decoration: none; |
||||||
|
color: black; |
||||||
|
border-bottom: 1px dotted rgba(0, 0, 0, .5); |
||||||
|
} |
||||||
|
|
||||||
|
.MiddleEarth { |
||||||
|
font-family: 'Macondo', cursive; |
||||||
|
color: #53821a; |
||||||
|
} |
||||||
|
|
||||||
|
/*--- chart ---*/ |
||||||
|
|
||||||
|
.name-title { |
||||||
|
font-family: 'Macondo Swash Caps', cursive; |
||||||
|
font-size: 2.8rem; |
||||||
|
fill: #232323; |
||||||
|
cursor: default; |
||||||
|
text-anchor: middle; |
||||||
|
} |
||||||
|
|
||||||
|
.value-title { |
||||||
|
text-anchor: middle; |
||||||
|
font-size: 1.8rem; |
||||||
|
fill: #b9b9b9; |
||||||
|
} |
||||||
|
|
||||||
|
.character-note { |
||||||
|
text-anchor: middle; |
||||||
|
font-size: 1.4rem; |
||||||
|
fill: #232323; |
||||||
|
} |
||||||
|
|
||||||
|
.inner-label { |
||||||
|
font-family: 'Macondo Swash Caps', cursive; |
||||||
|
font-size: 1.4rem; |
||||||
|
fill: #232323; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.outer-label { |
||||||
|
font-family: 'Macondo', cursive; |
||||||
|
font-size: 1.6rem; |
||||||
|
fill: #5f5f5f; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.outer-label-value { |
||||||
|
font-size: 1.2rem; |
||||||
|
fill: #b9b9b9; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div>Limiting Feature Importance<vue-slider v-model="LimitFeatureImportance"></vue-slider></div> |
||||||
|
<div>{{ LimitFeatureImportance }}</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import VueSlider from 'vue-slider-component' |
||||||
|
import 'vue-slider-component/theme/default.css' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Tuning', |
||||||
|
components: { |
||||||
|
VueSlider |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
LimitFeatureImportance: 10 |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||||
|
<style scoped> |
||||||
|
.slidecontainer { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.slider { |
||||||
|
-webkit-appearance: none; |
||||||
|
width: 100%; |
||||||
|
height: 15px; |
||||||
|
border-radius: 5px; |
||||||
|
background: #d3d3d3; |
||||||
|
outline: none; |
||||||
|
opacity: 0.7; |
||||||
|
-webkit-transition: .2s; |
||||||
|
transition: opacity .2s; |
||||||
|
} |
||||||
|
|
||||||
|
.slider:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.slider::-webkit-slider-thumb { |
||||||
|
-webkit-appearance: none; |
||||||
|
appearance: none; |
||||||
|
width: 25px; |
||||||
|
height: 25px; |
||||||
|
border-radius: 50%; |
||||||
|
background: #4CAF50; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.slider::-moz-range-thumb { |
||||||
|
width: 25px; |
||||||
|
height: 25px; |
||||||
|
border-radius: 50%; |
||||||
|
background: #4CAF50; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
module.exports = { |
||||||
|
chainWebpack: config => { |
||||||
|
config |
||||||
|
.plugin('html') |
||||||
|
.tap(args => { |
||||||
|
args[0].chunksSortMode = 'none' |
||||||
|
return args |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue