parent
ff669e8f56
commit
42c8d9c4e7
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<p><font-awesome-icon icon="balance-scale"/> Optimize Selection:<b-form-slider ref="basic1" v-model="basicValue" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue }}%</p> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bFormSlider from 'vue-bootstrap-slider/es/form-slider'; |
||||||
|
import 'bootstrap-slider/dist/css/bootstrap-slider.css' |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'BalancePredictions', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
basicValue: 0, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
slideStart () { |
||||||
|
}, |
||||||
|
slideStop () { |
||||||
|
//var basicValues = [] |
||||||
|
//EventBus.$emit('CallFactorsView', basicValues) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
p { |
||||||
|
margin: 0 !important; |
||||||
|
padding: 0 !important; |
||||||
|
} |
||||||
|
.slider.slider-horizontal { |
||||||
|
width: 150px !important; |
||||||
|
} |
||||||
|
.slider-handle { |
||||||
|
background: black; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<button |
||||||
|
id="Execute" |
||||||
|
v-on:click="execute"> |
||||||
|
<font-awesome-icon icon="play" /> |
||||||
|
{{ valueExecute }} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import { EventBus } from '../main.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Controller', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
value: 'Add to Stack', |
||||||
|
valueExecute: 'Execute Stacking Ensemble' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
execute () { |
||||||
|
EventBus.$emit('PCPCallDB') |
||||||
|
//EventBus.$emit('InitializeEnsembleLearningEvent') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div id="CircleChart"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
import CirclePack from 'circlepack-chart'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'CurrentStack', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
stack () { |
||||||
|
console.log('mpike') |
||||||
|
const CHILDREN_PROB_DECAY = 1; // per level |
||||||
|
const MAX_CHILDREN = 1000; |
||||||
|
const MAX_VALUE = 100; |
||||||
|
function genNode(name='root', probOfChildren=1) { |
||||||
|
if (Math.random() < probOfChildren) { |
||||||
|
return { |
||||||
|
name, |
||||||
|
children: [...Array(Math.round(Math.random() * MAX_CHILDREN))] |
||||||
|
.map((_, i) => genNode(i, probOfChildren - CHILDREN_PROB_DECAY)) |
||||||
|
} |
||||||
|
} else { |
||||||
|
return { |
||||||
|
name, |
||||||
|
value: Math.round(Math.random() * MAX_VALUE) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
const color = d3.scaleOrdinal(d3.schemePaired); |
||||||
|
CirclePack() |
||||||
|
.data(genNode()) |
||||||
|
.sort((a, b) => a.value - b.value) // sort ascending by size |
||||||
|
.color(d => color(d.name)) |
||||||
|
.showLabels(false) |
||||||
|
.excludeRoot(true) |
||||||
|
.tooltipContent((d, node) => `Size: <i>${node.value}</i>`) |
||||||
|
(document.getElementById('CircleChart')); |
||||||
|
}, |
||||||
|
mount () { |
||||||
|
this.stack() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,127 @@ |
|||||||
|
<template> |
||||||
|
<div id="PerMetricBar" class="PerMetricBar"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as Plotly from 'plotly.js' |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'PerMetricsBarChart', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
barchartmetrics: '', |
||||||
|
representationDefault: 'bar' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
LineBar () { |
||||||
|
var metricsPerModel = JSON.parse(this.barchartmetrics[9]) |
||||||
|
var vh = 80 |
||||||
|
|
||||||
|
if (this.representationDefault === 'bar'){ |
||||||
|
var type = 'bar'; |
||||||
|
} else if (this.representationDefault === 'line'){ |
||||||
|
var type = 'line'; |
||||||
|
} else { |
||||||
|
var type = 'difference'; |
||||||
|
} |
||||||
|
var difference = []; |
||||||
|
for (var i=0; i<metricsPerModel.length; i++){ |
||||||
|
difference.push(metricsPerModel[i] - metricsPerModel[i]); |
||||||
|
} |
||||||
|
|
||||||
|
if (type == 'difference'){ |
||||||
|
var trace = { |
||||||
|
x: kValuesLegend, |
||||||
|
y: difference, |
||||||
|
name: 'Delta(preservation)', |
||||||
|
showlegend: true, |
||||||
|
type: 'line', |
||||||
|
marker: { |
||||||
|
color: 'rgb(128,128,0)' |
||||||
|
} |
||||||
|
}; |
||||||
|
var LimitXaxis = Number(maxKNN) + 1; |
||||||
|
var data = [trace]; |
||||||
|
var layout = { |
||||||
|
barmode: 'group',autosize: false, |
||||||
|
width: 400, |
||||||
|
height: vh * 1.3, |
||||||
|
margin: { |
||||||
|
l: 50, |
||||||
|
r: 30, |
||||||
|
b: 30, |
||||||
|
t: 5, |
||||||
|
pad: 4 |
||||||
|
}, |
||||||
|
xaxis: {range: [0, LimitXaxis], |
||||||
|
title: 'Number of neighbors', |
||||||
|
titlefont: { |
||||||
|
size: 12, |
||||||
|
color: 'black' |
||||||
|
}}, |
||||||
|
yaxis: { |
||||||
|
title: '+/- Pres.', |
||||||
|
titlefont: { |
||||||
|
size: 12, |
||||||
|
color: 'black' |
||||||
|
}}}; |
||||||
|
|
||||||
|
Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true}); |
||||||
|
} else{ |
||||||
|
var trace1 = { |
||||||
|
x: ['Acc','F1s','Pre','Rec','Jac'], |
||||||
|
y: metricsPerModel, |
||||||
|
name: 'Projection average', |
||||||
|
type: type, |
||||||
|
marker: { |
||||||
|
color: 'rgb(0,0,0)' |
||||||
|
} |
||||||
|
}; |
||||||
|
var trace2 = { |
||||||
|
x: ['Acc','F1s','Pre','Rec','Jac'], |
||||||
|
y: metricsPerModel, |
||||||
|
name: 'Selected points', |
||||||
|
type: type, |
||||||
|
marker: { |
||||||
|
color: 'rgb(0, 187, 187)' |
||||||
|
} |
||||||
|
}; |
||||||
|
var data = [trace1, trace2]; |
||||||
|
var layout = { |
||||||
|
barmode: 'group',autosize: false, |
||||||
|
width: 400, |
||||||
|
height: vh * 1.3, |
||||||
|
margin: { |
||||||
|
l: 50, |
||||||
|
r: 30, |
||||||
|
b: 30, |
||||||
|
t: 5, |
||||||
|
pad: 4 |
||||||
|
}, |
||||||
|
xaxis: { |
||||||
|
title: 'Performance Metrics', |
||||||
|
titlefont: { |
||||||
|
size: 12, |
||||||
|
color: 'black' |
||||||
|
}}, |
||||||
|
yaxis: { |
||||||
|
title: 'Performance', |
||||||
|
titlefont: { |
||||||
|
size: 12, |
||||||
|
color: 'black' |
||||||
|
}}}; |
||||||
|
|
||||||
|
Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true}); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
EventBus.$on('InitializeMetricsBarChart', data => {this.barchartmetrics = data;}) |
||||||
|
EventBus.$on('InitializeMetricsBarChart', this.LineBar) |
||||||
|
EventBus.$on('RepresentationSelection', this.LineBar) |
||||||
|
EventBus.$on('RepresentationSelection', data => {this.representationDefault = data}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="squares-container"> |
||||||
|
<canvas id="main-canvas"></canvas> |
||||||
|
<svg id="main-svg"></svg> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Provenance', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
provenance () { |
||||||
|
var container = d3.select(".squares-container"); |
||||||
|
var vis = new SquaresVisualization(container.node()); |
||||||
|
loadData("mnist.csv", DATA => { |
||||||
|
vis.layout(); |
||||||
|
vis.setInstances(DATA.slice(0, 4000)); |
||||||
|
vis.setLayoutParameter({ |
||||||
|
y0: 10, |
||||||
|
numberBins: 10, |
||||||
|
squaresPerBin: 11, |
||||||
|
squareSize: 3, |
||||||
|
squareSpacing: 4, |
||||||
|
xSpacing: 88 |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
mount () { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue