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