ISOVIS
/
VisEvol
9
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent 2bd14c6470
commit 5279b5b147
8 changed files with 358 additions and 1090 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      cachedir/joblib/run/randomSearch/27a2cfe3ccd1c8af73f4e7bc6238df2a/metadata.json
  2. BIN
      cachedir/joblib/run/randomSearch/32ca191ced3e3ea351d4805ae2631119/output.pkl
  3. 727
      frontend/src/components/AlgorithmsController.vue
  4. 668
      frontend/src/components/History.vue
  5. 6
      frontend/src/components/Main.vue
  6. 10
      frontend/src/components/Predictions.vue
  7. 2
      frontend/src/components/ValidationController.vue
  8. 2
      run.py

1
cachedir/joblib/run/randomSearch/27a2cfe3ccd1c8af73f4e7bc6238df2a/metadata.json
Unescape View File

@ -0,0 +1 @@
{"duration": 62.07993197441101, "input_args": {"XData": " Fbs Slope Trestbps Exang Thalach Age Chol Sex Oldpeak Restecg Cp Ca Thal\n0 1 0 145 0 150 63 233 1 2.3 0 3 0 1\n1 0 0 130 0 187 37 250 1 3.5 1 2 0 2\n2 0 2 130 0 172 41 204 0 1.4 0 1 0 2\n3 0 2 120 0 178 56 236 1 0.8 1 1 0 2\n4 0 2 120 1 163 57 354 0 0.6 1 0 0 2\n.. ... ... ... ... ... ... ... ... ... ... .. .. ...\n298 0 1 140 1 123 57 241 0 0.2 1 0 0 3\n299 0 1 110 0 132 45 264 1 1.2 1 3 0 3\n300 1 1 144 0 141 68 193 1 3.4 1 0 2 3\n301 0 1 130 1 115 57 131 1 1.2 1 0 1 3\n302 0 1 130 0 174 57 236 0 0.0 0 1 1 2\n\n[303 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "KNeighborsClassifier(algorithm='ball_tree', metric='chebyshev', n_neighbors=61,\n weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 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], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'weights': ['uniform', 'distance']}", "eachAlgor": "'KNN'", "AlgorithmsIDsEnd": "700"}}

BIN
cachedir/joblib/run/randomSearch/32ca191ced3e3ea351d4805ae2631119/output.pkl
View File

Binary file not shown.

727
frontend/src/components/AlgorithmsController.vue
Unescape View File

@ -1,5 +1,8 @@
<template>
<div id="containerForAllAlg">
<div id="Bees" class="chart-wrapper" style="min-height: 357px;"></div>
<div id="MainPlot"></div>
</div>
</template>
<script>
@ -27,6 +30,8 @@ export default {
reset () {
var svg = d3.select("#Bees");
svg.selectAll("*").remove();
var svg = d3.select("#MainPlot");
svg.selectAll("*").remove();
this.PerF = []
this.PerFCM = []
this.storedEnsem = []
@ -37,6 +42,8 @@ export default {
BeesFun () {
var svg = d3.select("#Bees");
svg.selectAll("*").remove();
var svg = d3.select("#MainPlot");
svg.selectAll("*").remove();
var chart1
var data = []
@ -121,6 +128,86 @@ export default {
}
}
var widthChr = 589;
var heightChr = 330;
let svgAlg = d3v5
.select("#MainPlot")
.append("svg")
.attr("height", heightChr)
.attr("width", widthChr);
let sectors = Array.from(new Set(data.map((d) => d.Algorithm)));
let xCoords = sectors.map((d, i) => 95 + i * 108);
let xScale = d3v5.scaleOrdinal().domain(sectors).range(xCoords);
let yScale = d3v5
.scaleLinear()
.domain(d3v5.extent(data.map((d) => d.value)))
.range([heightChr-30, 30]);
var colorsF = d3.scale.ordinal().range(['#ff7f00','#fdbf6f','#fb9a99','#b15928','#a6cee3'])
svgAlg
.selectAll(".circ")
.data(data)
.enter()
.append("circle")
.attr("class", "circ")
.attr("stroke", "black")
.attr("fill", function (d) {
if (d.sw) { return "#000000" }
else { return colorsF(d.Algorithm) }
})
.attr("r", (d) => d.size)
.attr("cx", (d) => xScale(d.Algorithm))
.attr("cy", (d) => yScale(d.value));
let simulation = d3v5
.forceSimulation(data)
.force(
"x",
d3v5
.forceX((d) => {
return xScale(d.Algorithm);
})
.strength(1)
)
.force(
"y",
d3v5
.forceY(function (d) {
return yScale(d.value);
})
.strength(1)
)
.force(
"collide",
d3v5.forceCollide((d) => {
return d.size;
})
)
.alphaDecay(0)
.alpha(1)
//.on("tick", tick);
function tick() {
d3v5.selectAll(".circ")
.attr("cx", (d) => {
return d.x;
})
.attr("cy", (d) => d.y);
}
function first() {
simulation.alphaDecay(0.1);
second()
setTimeout(function () {
tick();
}, 5000);
}
function second() {
chart1 = makeDistroChart({
data:data,
xName:'Algorithm',
@ -128,9 +215,14 @@ export default {
axisLabels: {xAxis: 'Algorithhm', yAxis: '# Performance (%) #'},
selector:"#Bees",
constrainExtremes:true});
chart1.renderDataPlots({showPlot:true,plotType:'beeswarm',showBeanLines:false, colors:null});
chart1.renderNotchBoxes({showNotchBox:false});
chart1.renderViolinPlot({showViolinPlot:false});
//chart1.renderDataPlots({showPlot:true,plotType:'beeswarm',showBeanLines:false, colors:null});
}
first()
/**
* Creates a box plot, violin plot, and or notched box plot
* @param settings Configuration options for the base plot
@ -509,552 +601,6 @@ export default {
chart.update();
}();
/**
* Render a violin plot on the current chart
* @param options
* @param [options.showViolinPlot=true] True or False, show the violin plot
* @param [options.resolution=100 default]
* @param [options.bandwidth=10 default] May need higher bandwidth for larger data sets
* @param [options.width=50] The max percent of the group rangeBand that the violin can be
* @param [options.interpolation=''] How to render the violin
* @param [options.clamp=0 default]
* 0 = keep data within chart min and max, clamp once data = 0. May extend beyond data set min and max
* 1 = clamp at min and max of data set. Possibly no tails
* -1 = extend chart axis to make room for data to interpolate to 0. May extend axis and data set min and max
* @param [options.colors=chart default] The color mapping for the violin plot
* @returns {*} The chart object
*/
chart.renderViolinPlot = function (options) {
chart.violinPlots = {};
var defaultOptions = {
show: true,
showViolinPlot: true,
resolution: 100,
bandwidth: 20,
width: 50,
interpolation: 'cardinal',
clamp: 1,
colors: chart.colorFunct,
_yDomainVP: null // If the Violin plot is set to close all violin plots, it may need to extend the domain, that extended domain is stored here
};
chart.violinPlots.options = shallowCopy(defaultOptions);
for (var option in options) {
chart.violinPlots.options[option] = options[option]
}
var vOpts = chart.violinPlots.options;
// Create violin plot objects
for (var cName in chart.groupObjs) {
chart.groupObjs[cName].violin = {};
chart.groupObjs[cName].violin.objs = {};
}
/**
* Take a new set of options and redraw the violin
* @param updateOptions
*/
chart.violinPlots.change = function (updateOptions) {
if (updateOptions) {
for (var key in updateOptions) {
vOpts[key] = updateOptions[key]
}
}
for (var cName in chart.groupObjs) {
chart.groupObjs[cName].violin.objs.g.remove()
}
chart.violinPlots.prepareViolin();
chart.violinPlots.update();
};
chart.violinPlots.reset = function () {
chart.violinPlots.change(defaultOptions)
};
chart.violinPlots.show = function (opts) {
if (opts !== undefined) {
opts.show = true;
if (opts.reset) {
chart.violinPlots.reset()
}
} else {
opts = {show: true};
}
chart.violinPlots.change(opts);
};
chart.violinPlots.hide = function (opts) {
if (opts !== undefined) {
opts.show = false;
if (opts.reset) {
chart.violinPlots.reset()
}
} else {
opts = {show: false};
}
chart.violinPlots.change(opts);
};
/**
* Update the violin obj values
*/
chart.violinPlots.update = function () {
var cName, cViolinPlot;
for (cName in chart.groupObjs) {
cViolinPlot = chart.groupObjs[cName].violin;
// Build the violins sideways, so use the yScale for the xScale and make a new yScale
var xVScale = chart.yScale.copy();
// Create the Kernel Density Estimator Function
cViolinPlot.kde = kernelDensityEstimator(eKernel(vOpts.bandwidth), xVScale.ticks(vOpts.resolution));
cViolinPlot.kdedata = cViolinPlot.kde(chart.groupObjs[cName].values);
var interpolateMax = chart.groupObjs[cName].metrics.max,
interpolateMin = chart.groupObjs[cName].metrics.min;
if (vOpts.clamp == 0 || vOpts.clamp == -1) { //
// When clamp is 0, calculate the min and max that is needed to bring the violin plot to a point
// interpolateMax = the Minimum value greater than the max where y = 0
interpolateMax = d3.min(cViolinPlot.kdedata.filter(function (d) {
return (d.x > chart.groupObjs[cName].metrics.max && d.y == 0)
}), function (d) {
return d.x;
});
// interpolateMin = the Maximum value less than the min where y = 0
interpolateMin = d3.max(cViolinPlot.kdedata.filter(function (d) {
return (d.x < chart.groupObjs[cName].metrics.min && d.y == 0)
}), function (d) {
return d.x;
});
// If clamp is -1 we need to extend the axises so that the violins come to a point
if (vOpts.clamp == -1) {
kdeTester = eKernelTest(eKernel(vOpts.bandwidth), chart.groupObjs[cName].values);
if (!interpolateMax) {
var interMaxY = kdeTester(chart.groupObjs[cName].metrics.max);
var interMaxX = chart.groupObjs[cName].metrics.max;
var count = 25; // Arbitrary limit to make sure we don't get an infinite loop
while (count > 0 && interMaxY != 0) {
interMaxY = kdeTester(interMaxX);
interMaxX += 1;
count -= 1;
}
interpolateMax = interMaxX;
}
if (!interpolateMin) {
var interMinY = kdeTester(chart.groupObjs[cName].metrics.min);
var interMinX = chart.groupObjs[cName].metrics.min;
var count = 25; // Arbitrary limit to make sure we don't get an infinite loop
while (count > 0 && interMinY != 0) {
interMinY = kdeTester(interMinX);
interMinX -= 1;
count -= 1;
}
interpolateMin = interMinX;
}
}
// Check to see if the new values are outside the existing chart range
// If they are assign them to the master _yDomainVP
if (!vOpts._yDomainVP) vOpts._yDomainVP = chart.range.slice(0);
if (interpolateMin && interpolateMin < vOpts._yDomainVP[0]) {
vOpts._yDomainVP[0] = interpolateMin;
}
if (interpolateMax && interpolateMax > vOpts._yDomainVP[1]) {
vOpts._yDomainVP[1] = interpolateMax;
}
}
if (vOpts.showViolinPlot) {
chart.update();
xVScale = chart.yScale.copy();
// Need to recalculate the KDE because the xVScale changed
cViolinPlot.kde = kernelDensityEstimator(eKernel(vOpts.bandwidth), xVScale.ticks(vOpts.resolution));
cViolinPlot.kdedata = cViolinPlot.kde(chart.groupObjs[cName].values);
}
cViolinPlot.kdedata = cViolinPlot.kdedata
.filter(function (d) {
return (!interpolateMin || d.x >= interpolateMin)
})
.filter(function (d) {
return (!interpolateMax || d.x <= interpolateMax)
});
}
for (cName in chart.groupObjs) {
cViolinPlot = chart.groupObjs[cName].violin;
// Get the violin width
var objBounds = getObjWidth(vOpts.width, cName);
var width = (objBounds.right - objBounds.left) / 2;
var yVScale = d3.scale.linear()
.range([width, 0])
.domain([0, d3.max(cViolinPlot.kdedata, function (d) {return d.y;})])
.clamp(true);
var area = d3.svg.area()
.interpolate(vOpts.interpolation)
.x(function (d) {return xVScale(d.x);})
.y0(width)
.y1(function (d) {return yVScale(d.y);});
var line = d3.svg.line()
.interpolate(vOpts.interpolation)
.x(function (d) {return xVScale(d.x);})
.y(function (d) {return yVScale(d.y)});
if (cViolinPlot.objs.left.area) {
cViolinPlot.objs.left.area
.datum(cViolinPlot.kdedata)
.attr("d", area);
cViolinPlot.objs.left.line
.datum(cViolinPlot.kdedata)
.attr("d", line);
cViolinPlot.objs.right.area
.datum(cViolinPlot.kdedata)
.attr("d", area);
cViolinPlot.objs.right.line
.datum(cViolinPlot.kdedata)
.attr("d", line);
}
// Rotate the violins
cViolinPlot.objs.left.g.attr("transform", "rotate(90,0,0) translate(0,-" + objBounds.left + ") scale(1,-1)");
cViolinPlot.objs.right.g.attr("transform", "rotate(90,0,0) translate(0,-" + objBounds.right + ")");
}
};
/**
* Create the svg elements for the violin plot
*/
chart.violinPlots.prepareViolin = function () {
var cName, cViolinPlot;
if (vOpts.colors) {
chart.violinPlots.color = getColorFunct(vOpts.colors);
} else {
chart.violinPlots.color = chart.colorFunct
}
if (vOpts.show == false) {return}
for (cName in chart.groupObjs) {
cViolinPlot = chart.groupObjs[cName].violin;
cViolinPlot.objs.g = chart.groupObjs[cName].g.append("g").attr("class", "violin-plot");
cViolinPlot.objs.left = {area: null, line: null, g: null};
cViolinPlot.objs.right = {area: null, line: null, g: null};
cViolinPlot.objs.left.g = cViolinPlot.objs.g.append("g");
cViolinPlot.objs.right.g = cViolinPlot.objs.g.append("g");
if (vOpts.showViolinPlot !== false) {
//Area
cViolinPlot.objs.left.area = cViolinPlot.objs.left.g.append("path")
.attr("class", "area")
.style("fill", chart.violinPlots.color(cName));
cViolinPlot.objs.right.area = cViolinPlot.objs.right.g.append("path")
.attr("class", "area")
.style("fill", chart.violinPlots.color(cName));
//Lines
cViolinPlot.objs.left.line = cViolinPlot.objs.left.g.append("path")
.attr("class", "line")
.attr("fill", 'none')
.style("stroke", chart.violinPlots.color(cName));
cViolinPlot.objs.right.line = cViolinPlot.objs.right.g.append("path")
.attr("class", "line")
.attr("fill", 'none')
.style("stroke", chart.violinPlots.color(cName));
}
}
};
function kernelDensityEstimator(kernel, x) {
return function (sample) {
return x.map(function (x) {
return {x:x, y:d3.mean(sample, function (v) {return kernel(x - v);})};
});
};
}
function eKernel(scale) {
return function (u) {
return Math.abs(u /= scale) <= 1 ? .75 * (1 - u * u) / scale : 0;
};
}
// Used to find the roots for adjusting violin axis
// Given an array, find the value for a single point, even if it is not in the domain
function eKernelTest(kernel, array) {
return function (testX) {
return d3.mean(array, function (v) {return kernel(testX - v);})
}
}
chart.violinPlots.prepareViolin();
d3.select(window).on('resize.' + chart.selector + '.violinPlot', chart.violinPlots.update);
chart.violinPlots.update();
return chart;
};
/**
* Render a notched box on the current chart
* @param options
* @param [options.show=true] Toggle the whole plot on and off
* @param [options.showNotchBox=true] Show the notch box
* @param [options.showLines=false] Show lines at the confidence intervals
* @param [options.boxWidth=35] The width of the widest part of the box
* @param [options.medianWidth=20] The width of the narrowist part of the box
* @param [options.lineWidth=50] The width of the confidence interval lines
* @param [options.notchStyle=null] null=traditional style, 'box' cuts out the whole notch in right angles
* @param [options.colors=chart default] The color mapping for the notch boxes
* @returns {*} The chart object
*/
chart.renderNotchBoxes = function (options) {
chart.notchBoxes = {};
//Defaults
var defaultOptions = {
show: true,
showNotchBox: true,
showLines: false,
boxWidth: 35,
medianWidth: 20,
lineWidth: 50,
notchStyle: null,
colors: null
};
chart.notchBoxes.options = shallowCopy(defaultOptions);
for (var option in options) {
chart.notchBoxes.options[option] = options[option]
}
var nOpts = chart.notchBoxes.options;
//Create notch objects
for (var cName in chart.groupObjs) {
chart.groupObjs[cName].notchBox = {};
chart.groupObjs[cName].notchBox.objs = {};
}
/**
* Makes the svg path string for a notched box
* @param cNotch Current notch box object
* @param notchBounds objBound object
* @returns {string} A string in the proper format for a svg polygon
*/
function makeNotchBox(cNotch, notchBounds) {
var scaledValues = [];
if (nOpts.notchStyle == 'box') {
scaledValues = [
[notchBounds.boxLeft, chart.yScale(cNotch.metrics.quartile1)],
[notchBounds.boxLeft, chart.yScale(cNotch.metrics.lowerNotch)],
[notchBounds.medianLeft, chart.yScale(cNotch.metrics.lowerNotch)],
[notchBounds.medianLeft, chart.yScale(cNotch.metrics.median)],
[notchBounds.medianLeft, chart.yScale(cNotch.metrics.upperNotch)],
[notchBounds.boxLeft, chart.yScale(cNotch.metrics.upperNotch)],
[notchBounds.boxLeft, chart.yScale(cNotch.metrics.quartile3)],
[notchBounds.boxRight, chart.yScale(cNotch.metrics.quartile3)],
[notchBounds.boxRight, chart.yScale(cNotch.metrics.upperNotch)],
[notchBounds.medianRight, chart.yScale(cNotch.metrics.upperNotch)],
[notchBounds.medianRight, chart.yScale(cNotch.metrics.median)],
[notchBounds.medianRight, chart.yScale(cNotch.metrics.lowerNotch)],
[notchBounds.boxRight, chart.yScale(cNotch.metrics.lowerNotch)],
[notchBounds.boxRight, chart.yScale(cNotch.metrics.quartile1)]
];
} else {
scaledValues = [
[notchBounds.boxLeft, chart.yScale(cNotch.metrics.quartile1)],
[notchBounds.boxLeft, chart.yScale(cNotch.metrics.lowerNotch)],
[notchBounds.medianLeft, chart.yScale(cNotch.metrics.median)],
[notchBounds.boxLeft, chart.yScale(cNotch.metrics.upperNotch)],
[notchBounds.boxLeft, chart.yScale(cNotch.metrics.quartile3)],
[notchBounds.boxRight, chart.yScale(cNotch.metrics.quartile3)],
[notchBounds.boxRight, chart.yScale(cNotch.metrics.upperNotch)],
[notchBounds.medianRight, chart.yScale(cNotch.metrics.median)],
[notchBounds.boxRight, chart.yScale(cNotch.metrics.lowerNotch)],
[notchBounds.boxRight, chart.yScale(cNotch.metrics.quartile1)]
];
}
return scaledValues.map(function (d) {
return [d[0], d[1]].join(",");
}).join(" ");
}
/**
* Calculate the confidence intervals
*/
!function calcNotches() {
var cNotch, modifier;
for (var cName in chart.groupObjs) {
cNotch = chart.groupObjs[cName];
modifier = (1.57 * (cNotch.metrics.iqr / Math.sqrt(cNotch.values.length)));
cNotch.metrics.upperNotch = cNotch.metrics.median + modifier;
cNotch.metrics.lowerNotch = cNotch.metrics.median - modifier;
}
}();
/**
* Take a new set of options and redraw the notch boxes
* @param updateOptions
*/
chart.notchBoxes.change = function (updateOptions) {
if (updateOptions) {
for (var key in updateOptions) {
nOpts[key] = updateOptions[key]
}
}
for (var cName in chart.groupObjs) {
chart.groupObjs[cName].notchBox.objs.g.remove()
}
chart.notchBoxes.prepareNotchBoxes();
chart.notchBoxes.update();
};
chart.notchBoxes.reset = function () {
chart.notchBoxes.change(defaultOptions)
};
chart.notchBoxes.show = function (opts) {
if (opts !== undefined) {
opts.show = true;
if (opts.reset) {
chart.notchBoxes.reset()
}
} else {
opts = {show: true};
}
chart.notchBoxes.change(opts)
};
chart.notchBoxes.hide = function (opts) {
if (opts !== undefined) {
opts.show = false;
if (opts.reset) {
chart.notchBoxes.reset()
}
} else {
opts = {show: false};
}
chart.notchBoxes.change(opts)
};
/**
* Update the notch box obj values
*/
chart.notchBoxes.update = function () {
var cName, cGroup;
for (cName in chart.groupObjs) {
cGroup = chart.groupObjs[cName];
// Get the box size
var boxBounds = getObjWidth(nOpts.boxWidth, cName);
var medianBounds = getObjWidth(nOpts.medianWidth, cName);
var notchBounds = {
boxLeft: boxBounds.left,
boxRight: boxBounds.right,
middle: boxBounds.middle,
medianLeft: medianBounds.left,
medianRight: medianBounds.right
};
// Notch Box
if (cGroup.notchBox.objs.notch) {
cGroup.notchBox.objs.notch
.attr("points", makeNotchBox(cGroup, notchBounds));
}
if (cGroup.notchBox.objs.upperLine) {
var lineBounds = null;
if (nOpts.lineWidth) {
lineBounds = getObjWidth(nOpts.lineWidth, cName)
} else {
lineBounds = objBounds
}
var confidenceLines = {
upper: chart.yScale(cGroup.metrics.upperNotch),
lower: chart.yScale(cGroup.metrics.lowerNotch)
};
cGroup.notchBox.objs.upperLine
.attr("x1", lineBounds.left)
.attr("x2", lineBounds.right)
.attr('y1', confidenceLines.upper)
.attr("y2", confidenceLines.upper);
cGroup.notchBox.objs.lowerLine
.attr("x1", lineBounds.left)
.attr("x2", lineBounds.right)
.attr('y1', confidenceLines.lower)
.attr("y2", confidenceLines.lower);
}
}
};
/**
* Create the svg elements for the notch boxes
*/
chart.notchBoxes.prepareNotchBoxes = function () {
var cName, cNotch;
if (nOpts && nOpts.colors) {
chart.notchBoxes.colorFunct = getColorFunct(nOpts.colors);
} else {
chart.notchBoxes.colorFunct = chart.colorFunct
}
if (nOpts.show == false) {
return
}
for (cName in chart.groupObjs) {
cNotch = chart.groupObjs[cName].notchBox;
cNotch.objs.g = chart.groupObjs[cName].g.append("g").attr("class", "notch-plot");
// Plot Box (default show)
if (nOpts.showNotchBox) {
cNotch.objs.notch = cNotch.objs.g.append("polygon")
.attr("class", "notch")
.style("fill", chart.notchBoxes.colorFunct(cName))
.style("stroke", chart.notchBoxes.colorFunct(cName));
//A stroke is added to the notch with the group color, it is
// hidden by default and can be shown through css with stroke-width
}
//Plot Confidence Lines (default hide)
if (nOpts.showLines) {
cNotch.objs.upperLine = cNotch.objs.g.append("line")
.attr("class", "upper confidence line")
.style("stroke", chart.notchBoxes.colorFunct(cName));
cNotch.objs.lowerLine = cNotch.objs.g.append("line")
.attr("class", "lower confidence line")
.style("stroke", chart.notchBoxes.colorFunct(cName));
}
}
};
chart.notchBoxes.prepareNotchBoxes();
d3.select(window).on('resize.' + chart.selector + '.notchBox', chart.notchBoxes.update);
chart.notchBoxes.update();
return chart;
};
/**
* Render a raw data in various forms
* @param options
@ -1171,17 +717,16 @@ export default {
if (cPlot.objs.points) {
if (dOpts.plotType == 'beeswarm') {
var swarmBounds = getObjWidth(100, cName);
console.log(swarmBounds)
var yPtScale = chart.yScale.copy()
.range([Math.floor(chart.yScale.range()[0] / dOpts.pointSize), 0])
//.interpolate(d3.interpolateRound)
.domain(chart.yScale.domain());
var maxWidth = Math.ceil(chart.xScale.rangeBand() / dOpts.pointSize);
console.log(maxWidth)
var ptsObj = {};
var cYBucket = null;
// Bucket points
// // Bucket points
for (var pt = 0; pt < cGroup.values.length; pt++) {
cYBucket = yPtScale(cGroup.values[pt]);
if (ptsObj.hasOwnProperty(cYBucket) !== true) {
@ -1191,7 +736,7 @@ export default {
.attr("cx", swarmBounds.middle)
.attr("cy", yPtScale(cGroup.values[pt]) * dOpts.pointSize));
}
// Plot buckets
// // Plot buckets
var rightMax = Math.min(swarmBounds.right - dOpts.pointSize);
for (var row in ptsObj) {
var leftMin = swarmBounds.left + (Math.max((maxWidth - ptsObj[row].length) / 2, 0) * dOpts.pointSize);
@ -1201,35 +746,8 @@ export default {
col++
}
}
// FIX THAT!
// let simulation = d3v5.forceSimulation(chart.data)
// .force("x", d3v5.forceX((d) => {
// return chart.xScale(d.Algorithm);
// }).strength(0.2))
// .force("y", d3v5.forceY((d) => {
// return chart.yScale(d.value);
// }).strength(1))
// .force("collide", d3v5.forceCollide((d) => {
// return d.size;
// }))
// .alphaDecay(0)
// .alpha(0.3)
// .on("tick", tick);
// function tick() {
// d3v5.selectAll(".CirclePoint")
// .attr("cx", (d) => d.x)
// .attr("cy", (d) => d.y);
// }
// let init_decay = setTimeout(function () {
// console.log("start alpha decay");
// simulation.alphaDecay(0.1);
// }, 3000); // start decay after 3 seconds
}
}
}
@ -1251,36 +769,6 @@ export default {
return
}
// Metrics lines
chart.dataPlots.objs.g = chart.objs.g.append("g").attr("class", "metrics-lines");
if (dOpts.showLines && dOpts.showLines.length > 0) {
chart.dataPlots.objs.lines = {};
var cMetric;
for (var line in dOpts.showLines) {
cMetric = dOpts.showLines[line];
chart.dataPlots.objs.lines[cMetric] = {};
chart.dataPlots.objs.lines[cMetric].values = [];
for (var cGroup in chart.groupObjs) {
chart.dataPlots.objs.lines[cMetric].values.push({
x: cGroup,
y: chart.groupObjs[cGroup].metrics[cMetric]
})
}
chart.dataPlots.objs.lines[cMetric].line = d3.svg.line()
.interpolate("cardinal")
.y(function (d) {
return chart.yScale(d.y)
});
chart.dataPlots.objs.lines[cMetric].g = chart.dataPlots.objs.g.append("path")
.attr("class", "line " + cMetric)
.attr("data-metric", cMetric)
.style("fill", 'none')
.style("stroke", chart.colorFunct(cMetric));
}
}
for (cName in chart.groupObjs) {
cPlot = chart.groupObjs[cName].dataPlots;
@ -1292,7 +780,7 @@ export default {
cPlot.objs.points.g = cPlot.objs.g.append("g").attr("class", "points-plot");
for (var pt = 0; pt < chart.groupObjs[cName].values.length; pt++) {
cPlot.objs.points.pts.push(cPlot.objs.points.g.append("circle")
.attr("class", "CirclePoint")
.attr("class", function () { return "CirclePoint" })
.attr('r', function () {
var dataLoc = data.filter( i => cName.includes( i.Algorithm ) );
return dataLoc[pt].size;
@ -1306,8 +794,8 @@ export default {
}
}
};
chart.dataPlots.preparePlots();
d3.select(window).on('resize.' + chart.selector + '.dataPlot', chart.dataPlots.update);
@ -1453,4 +941,19 @@ export default {
@media (max-width:500px){
.chart-options p {display: block;}
}
#containerForAllAlg {
height: 100px;
position: relative;
}
#MainPlot {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#MainPlot {
z-index: 10;
}
</style>

668
frontend/src/components/History.vue
Unescape View File

@ -317,13 +317,6 @@ export default {
var numberofModels = 6
var units = "Models";
var initialModels = this.RandomSearLoc * 5
var months = [{month:"RandSear",value:initialModels,loss:null},
{month:"Crossover_S1",value:250,loss:null},
{month:"Mutate_S1",value:250,loss:null},
{month:"Crossover_S2",value:125,loss:null},
{month:"Mutate_S2",value:125,loss:null},
{month:"Crossover_S2_Prime'",value:125,loss:null},
{month:"Mutate_S2_Prime",value:125,loss:null}];
//this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var :
width = 1250 - margin.left - margin.right,
@ -336,23 +329,6 @@ export default {
format = function(d) { return formatNumber(d) + " " + units; }
var color = d3.scale.category20b()
var startingAxis = this.RandomSearLoc
var axisScale = d3.scale.linear()
.domain([startingAxis*6,0])
.range([0, height]);
//Create the Axis
var yAxis = d3.svg.axis()
.scale(axisScale)
.orient("left")
.ticks(10);
// var lossScale = d3.scale.linear()
// .domain([.95,1,1.05])
// .range(["red","black","green"]);
// append the svg canvas to the page
var svg = d3.select("#SankeyInter").append("svg") //will select the id of cahrt from index.html ln:135 --> # looks for the id= from html
.attr("width", width + margin.left + margin.right)
@ -369,124 +345,91 @@ export default {
var path = sankey.link(); //sankey.link() is something happening in sankey.js
// svg.selectAll("text.values")
// .data(months)
// .enter()
// .append("text")
// .text(function(d){return formatNumber(d.value)})
// .attr("class", "innerText")
// .attr("x",function(d,i){return i*89-margin.left-5})
// .attr("y",20)
// .attr("transform", function(d){
// return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10+15) + ")";});
// svg.selectAll("text.loss")
// .data(months)
// .enter()
// .append("text")
// .text(function(d){return d.loss})
// .attr("class", "innerText")
// .attr("x",function(d,i){return i*89-margin.left-5})
// .attr("y",20)
// .attr("fill",function(d){ return lossScale(d.loss)})
// .attr("transform", function(d){
// return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10-5) + ")";});
// svg.selectAll("text.months")
// .data(months)
// .enter()
// .append("text")
// .attr("class", "innerText")
// .text(function(d){return d.month})
// .attr("x",function(d,i){return i*89-margin.left-10})
// .attr("y",20)
// .attr("transform",
// "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + margin.bottom + ")");
// load the data
var graph = {
"nodes":[
{"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3","dh":height/numberofModels},
{"name":"RF","node":1,"month":"RandSear","color":"#b15928","dh":height/numberofModels},
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99","dh":height/numberofModels},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f","dh":height/numberofModels},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00","dh":height/numberofModels},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff","dh":height/numberofModels},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff","dh":height/(numberofModels*localStep)},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
{"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
{"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
{"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
{"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
{"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
{"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
{"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
{"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
{"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
{"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
{"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
{"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
{"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
{"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
{"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
{"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
{"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
{"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
{"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
{"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3",valueN:this.RandomSearLoc},
{"name":"RF","node":1,"month":"RandSear","color":"#b15928",valueN:this.RandomSearLoc},
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99",valueN:this.RandomSearLoc},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f",valueN:this.RandomSearLoc},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00",valueN:this.RandomSearLoc},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff",valueN:this.RandomSearLoc},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
],
"links":[
{"source":5,"target":11,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[6]+valuesLoc[7]+valuesLoc[8]+valuesLoc[9]+valuesLoc[10]))},
{"source":5,"target":17,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[12]+valuesLoc[13]+valuesLoc[14]+valuesLoc[15]+valuesLoc[16]))},
{"source":0,"target":6,"value":valuesLoc[6],"dh":height/(numberofModels*localStep)*(valuesLoc[6]/50)},
{"source":0,"target":12,"value":valuesLoc[12],"dh":height/(numberofModels*localStep)*(valuesLoc[12]/50)},
{"source":1,"target":7,"value":valuesLoc[7],"dh":height/(numberofModels*localStep)*(valuesLoc[7]/50)},
{"source":1,"target":13,"value":valuesLoc[13],"dh":height/(numberofModels*localStep)*(valuesLoc[13]/50)},
{"source":2,"target":8,"value":valuesLoc[8],"dh":height/(numberofModels*localStep)*(valuesLoc[8]/50)},
{"source":2,"target":14,"value":valuesLoc[14],"dh":height/(numberofModels*localStep)*(valuesLoc[14]/50)},
{"source":3,"target":9,"value":valuesLoc[9],"dh":height/(numberofModels*localStep)*(valuesLoc[9]/50)},
{"source":3,"target":15,"value":valuesLoc[15],"dh":height/(numberofModels*localStep)*(valuesLoc[15]/50)},
{"source":4,"target":10,"value":valuesLoc[10],"dh":height/(numberofModels*localStep)*(valuesLoc[10]/50)},
{"source":4,"target":16,"value":valuesLoc[16],"dh":height/(numberofModels*localStep)*(valuesLoc[16]/50)},
{"source":11,"target":23,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[18]+valuesLoc[19]+valuesLoc[20]+valuesLoc[21]+valuesLoc[22]))},
{"source":11,"target":35,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[30]+valuesLoc[31]+valuesLoc[32]+valuesLoc[33]+valuesLoc[34]))},
{"source":6,"target":18,"value":valuesLoc[18],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[18]/25)},
{"source":6,"target":24,"value":valuesLoc[24],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[24]/25)},
{"source":7,"target":19,"value":valuesLoc[19],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[19]/25)},
{"source":7,"target":25,"value":valuesLoc[25],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[25]/25)},
{"source":8,"target":20,"value":valuesLoc[20],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[20]/25)},
{"source":8,"target":26,"value":valuesLoc[26],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[26]/25)},
{"source":9,"target":21,"value":valuesLoc[21],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[21]/25)},
{"source":9,"target":27,"value":valuesLoc[27],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[27]/25)},
{"source":10,"target":22,"value":valuesLoc[22],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[22]/25)},
{"source":10,"target":28,"value":valuesLoc[28],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[28]/25)},
{"source":17,"target":29,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[24]+valuesLoc[25]+valuesLoc[26]+valuesLoc[27]+valuesLoc[28]))},
{"source":17,"target":41,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[36]+valuesLoc[37]+valuesLoc[38]+valuesLoc[39]+valuesLoc[40]))},
{"source":12,"target":30,"value":valuesLoc[30],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[30]/25)},
{"source":12,"target":36,"value":valuesLoc[36],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[36]/25)},
{"source":13,"target":31,"value":valuesLoc[31],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[31]/25)},
{"source":13,"target":37,"value":valuesLoc[37],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[37]/25)},
{"source":14,"target":32,"value":valuesLoc[32],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[32]/25)},
{"source":14,"target":38,"value":valuesLoc[38],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[38]/25)},
{"source":15,"target":33,"value":valuesLoc[33],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[33]/25)},
{"source":15,"target":39,"value":valuesLoc[39],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[39]/25)},
{"source":16,"target":34,"value":valuesLoc[34],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[34]/25)},
{"source":16,"target":40,"value":valuesLoc[40],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[40]/25)},
{"source":5,"target":11,"value":0},
{"source":5,"target":17,"value":0},
{"source":0,"target":6,"value":valuesLoc[6]},
{"source":0,"target":12,"value":valuesLoc[12]},
{"source":1,"target":7,"value":valuesLoc[7]},
{"source":1,"target":13,"value":valuesLoc[13]},
{"source":2,"target":8,"value":valuesLoc[8]},
{"source":2,"target":14,"value":valuesLoc[14]},
{"source":3,"target":9,"value":valuesLoc[9]},
{"source":3,"target":15,"value":valuesLoc[15]},
{"source":4,"target":10,"value":valuesLoc[10]},
{"source":4,"target":16,"value":valuesLoc[16]},
{"source":11,"target":23,"value":0},
{"source":11,"target":35,"value":0},
{"source":6,"target":18,"value":valuesLoc[18]},
{"source":6,"target":24,"value":valuesLoc[24]},
{"source":7,"target":19,"value":valuesLoc[19]},
{"source":7,"target":25,"value":valuesLoc[25]},
{"source":8,"target":20,"value":valuesLoc[20]},
{"source":8,"target":26,"value":valuesLoc[26]},
{"source":9,"target":21,"value":valuesLoc[21]},
{"source":9,"target":27,"value":valuesLoc[27]},
{"source":10,"target":22,"value":valuesLoc[22]},
{"source":10,"target":28,"value":valuesLoc[28]},
{"source":17,"target":29,"value":0},
{"source":17,"target":41,"value":0},
{"source":12,"target":30,"value":valuesLoc[30]},
{"source":12,"target":36,"value":valuesLoc[36]},
{"source":13,"target":31,"value":valuesLoc[31]},
{"source":13,"target":37,"value":valuesLoc[37]},
{"source":14,"target":32,"value":valuesLoc[32]},
{"source":14,"target":38,"value":valuesLoc[38]},
{"source":15,"target":33,"value":valuesLoc[33]},
{"source":15,"target":39,"value":valuesLoc[39]},
{"source":16,"target":34,"value":valuesLoc[34]},
{"source":16,"target":40,"value":valuesLoc[40]},
]}
sankey.nodes(graph.nodes)
@ -578,8 +521,8 @@ export default {
return "#808080"
}
})
.style("stroke-width", function(d) { return Math.max(.5, d.dh); }) //setting the stroke length by the data . d.dh is defined in sankey.js
.sort(function(a, b) { return b.dh - a.dh; })
.style("stroke-width", function(d) { return Math.max(.5, d.dy); }) //setting the stroke length by the data . d.dy is defined in sankey.js
.sort(function(a, b) { return b.dy - a.dy; })
.on("mouseover",linkmouseover)
.on("mouseout",linkmouseout);
@ -596,15 +539,10 @@ export default {
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
//.call(d3.behavior.drag() <---------- THIS IS THE DRAG THING TO REMOVE!!
//.origin(function(d) { return d; })
// .on("dragstart", function() { //<-------- THIS IS MOUSEOVER DRAG CAPABILITIES .on(mousemove) called pointer events, look it up!
// this.parentNode.appendChild(this); })
// .on("drag", dragmove);
// add the rectangles for the nodes
node.append("rect")
.attr("height", function(d) { return d.dh; })
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth( ))
.style("fill", function(d) { return d.color; }) //matches name with the colors here! inside the replace is some sort of regex
// .style("stroke",function(d) { return d3.rgb(d.color).darker(1); }) //line around the box formatting
@ -617,11 +555,11 @@ export default {
.attr("x", -6)
.attr("y", function(d) {
if (d.node <= 5) {
return d.dh - 81;
return d.dy - 81;
} else if (d.node <= 17) {
return d.dh - 41;
return d.dy - 41;
} else {
return d.dh - 21;
return d.dy - 21;
}
})
.attr("dy", ".35em")
@ -641,15 +579,6 @@ export default {
.filter(function(d) { return d.x < width / 2; })//positioning left or right of node
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// // the function for moving the nodes
// function dragmove(d) {
// d3.select(this).attr("transform",
// "translate(" + d.x + "," + (
// d.y = Math.max(0, Math.min(height/2 - d.dy, d3.event.y))
// ) + ")");
// sankey.relayout();
// link.attr("d", path);
// }
var status=null;
@ -696,12 +625,6 @@ export default {
.attr("transform",
"translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ") rotate(-90 150 150)");
//y axis
// svg.append("g")
// .call(yAxis)
// .attr("class", "axis")
// .attr("transform",
// "translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ")");
},
computePerformanceDiff () {
@ -865,13 +788,6 @@ export default {
var numberofModels = 6
var units = "Models";
var initialModels = this.RandomSearLoc * 5
var months = [{month:"RandSear",value:initialModels,loss:null},
{month:"Crossover_S1",value:250,loss:null},
{month:"Mutate_S1",value:250,loss:null},
{month:"Crossover_S2",value:125,loss:null},
{month:"Mutate_S2",value:125,loss:null},
{month:"Crossover_S2_Prime'",value:125,loss:null},
{month:"Mutate_S2_Prime",value:125,loss:null}];
//this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var :
width = 1230 - margin.left - margin.right,
@ -885,15 +801,15 @@ export default {
var color = d3.scale.category20b()
var startingAxis = this.RandomSearLoc
var axisScale = d3.scale.linear()
.domain([startingAxis*6,0])
.range([0, height]);
// var axisScale = d3.scale.linear()
// .domain([startingAxis*6,0])
// .range([0, height]);
//Create the Axis
var yAxis = d3.svg.axis()
.scale(axisScale)
.orient("left")
.ticks(10);
// //Create the Axis
// var yAxis = d3.svg.axis()
// .scale(axisScale)
// .orient("left")
// .ticks(10);
@ -917,124 +833,90 @@ export default {
var path = sankey.link(); //sankey.link() is something happening in sankey.js
// svg.selectAll("text.values")
// .data(months)
// .enter()
// .append("text")
// .text(function(d){return formatNumber(d.value)})
// .attr("class", "innerText")
// .attr("x",function(d,i){return i*89-margin.left-5})
// .attr("y",20)
// .attr("transform", function(d){
// return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10+15) + ")";});
// svg.selectAll("text.loss")
// .data(months)
// .enter()
// .append("text")
// .text(function(d){return d.loss})
// .attr("class", "innerText")
// .attr("x",function(d,i){return i*89-margin.left-5})
// .attr("y",20)
// .attr("fill",function(d){ return lossScale(d.loss)})
// .attr("transform", function(d){
// return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10-5) + ")";});
// svg.selectAll("text.months")
// .data(months)
// .enter()
// .append("text")
// .attr("class", "innerText")
// .text(function(d){return d.month})
// .attr("x",function(d,i){return i*89-margin.left-10})
// .attr("y",20)
// .attr("transform",
// "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + margin.bottom + ")");
// load the data
var graph = {
"nodes":[
{"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3","dh":height/numberofModels},
{"name":"RF","node":1,"month":"RandSear","color":"#b15928","dh":height/numberofModels},
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99","dh":height/numberofModels},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f","dh":height/numberofModels},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00","dh":height/numberofModels},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff","dh":height/numberofModels},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff","dh":height/(numberofModels*localStep)},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
{"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
{"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
{"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
{"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
{"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
{"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
{"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
{"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
{"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
{"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
{"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
{"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
{"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
{"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
{"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
{"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
{"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
{"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
{"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
{"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
{"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3",valueN:this.RandomSearLoc},
{"name":"RF","node":1,"month":"RandSear","color":"#b15928",valueN:this.RandomSearLoc},
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99",valueN:this.RandomSearLoc},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f",valueN:this.RandomSearLoc},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00",valueN:this.RandomSearLoc},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff",valueN:this.RandomSearLoc},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
],
"links":[
{"source":5,"target":11,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[6]+valuesLoc[7]+valuesLoc[8]+valuesLoc[9]+valuesLoc[10]))},
{"source":5,"target":17,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[12]+valuesLoc[13]+valuesLoc[14]+valuesLoc[15]+valuesLoc[16]))},
{"source":0,"target":6,"value":valuesLoc[6],"dh":height/(numberofModels*localStep)*(valuesLoc[6]/50)},
{"source":0,"target":12,"value":valuesLoc[12],"dh":height/(numberofModels*localStep)*(valuesLoc[12]/50)},
{"source":1,"target":7,"value":valuesLoc[7],"dh":height/(numberofModels*localStep)*(valuesLoc[7]/50)},
{"source":1,"target":13,"value":valuesLoc[13],"dh":height/(numberofModels*localStep)*(valuesLoc[13]/50)},
{"source":2,"target":8,"value":valuesLoc[8],"dh":height/(numberofModels*localStep)*(valuesLoc[8]/50)},
{"source":2,"target":14,"value":valuesLoc[14],"dh":height/(numberofModels*localStep)*(valuesLoc[14]/50)},
{"source":3,"target":9,"value":valuesLoc[9],"dh":height/(numberofModels*localStep)*(valuesLoc[9]/50)},
{"source":3,"target":15,"value":valuesLoc[15],"dh":height/(numberofModels*localStep)*(valuesLoc[15]/50)},
{"source":4,"target":10,"value":valuesLoc[10],"dh":height/(numberofModels*localStep)*(valuesLoc[10]/50)},
{"source":4,"target":16,"value":valuesLoc[16],"dh":height/(numberofModels*localStep)*(valuesLoc[16]/50)},
{"source":11,"target":23,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[18]+valuesLoc[19]+valuesLoc[20]+valuesLoc[21]+valuesLoc[22]))},
{"source":11,"target":35,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[30]+valuesLoc[31]+valuesLoc[32]+valuesLoc[33]+valuesLoc[34]))},
{"source":6,"target":18,"value":valuesLoc[18],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[18]/25)},
{"source":6,"target":24,"value":valuesLoc[24],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[24]/25)},
{"source":7,"target":19,"value":valuesLoc[19],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[19]/25)},
{"source":7,"target":25,"value":valuesLoc[25],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[25]/25)},
{"source":8,"target":20,"value":valuesLoc[20],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[20]/25)},
{"source":8,"target":26,"value":valuesLoc[26],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[26]/25)},
{"source":9,"target":21,"value":valuesLoc[21],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[21]/25)},
{"source":9,"target":27,"value":valuesLoc[27],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[27]/25)},
{"source":10,"target":22,"value":valuesLoc[22],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[22]/25)},
{"source":10,"target":28,"value":valuesLoc[28],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[28]/25)},
{"source":17,"target":29,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[24]+valuesLoc[25]+valuesLoc[26]+valuesLoc[27]+valuesLoc[28]))},
{"source":17,"target":41,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[36]+valuesLoc[37]+valuesLoc[38]+valuesLoc[39]+valuesLoc[40]))},
{"source":12,"target":30,"value":valuesLoc[30],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[30]/25)},
{"source":12,"target":36,"value":valuesLoc[36],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[36]/25)},
{"source":13,"target":31,"value":valuesLoc[31],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[31]/25)},
{"source":13,"target":37,"value":valuesLoc[37],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[37]/25)},
{"source":14,"target":32,"value":valuesLoc[32],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[32]/25)},
{"source":14,"target":38,"value":valuesLoc[38],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[38]/25)},
{"source":15,"target":33,"value":valuesLoc[33],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[33]/25)},
{"source":15,"target":39,"value":valuesLoc[39],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[39]/25)},
{"source":16,"target":34,"value":valuesLoc[34],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[34]/25)},
{"source":16,"target":40,"value":valuesLoc[40],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[40]/25)},
{"source":5,"target":11,"value":0},
{"source":5,"target":17,"value":0},
{"source":0,"target":6,"value":valuesLoc[6]},
{"source":0,"target":12,"value":valuesLoc[12]},
{"source":1,"target":7,"value":valuesLoc[7]},
{"source":1,"target":13,"value":valuesLoc[13]},
{"source":2,"target":8,"value":valuesLoc[8]},
{"source":2,"target":14,"value":valuesLoc[14]},
{"source":3,"target":9,"value":valuesLoc[9]},
{"source":3,"target":15,"value":valuesLoc[15]},
{"source":4,"target":10,"value":valuesLoc[10]},
{"source":4,"target":16,"value":valuesLoc[16]},
{"source":11,"target":23,"value":0},
{"source":11,"target":35,"value":0},
{"source":6,"target":18,"value":valuesLoc[18]},
{"source":6,"target":24,"value":valuesLoc[24]},
{"source":7,"target":19,"value":valuesLoc[19]},
{"source":7,"target":25,"value":valuesLoc[25]},
{"source":8,"target":20,"value":valuesLoc[20]},
{"source":8,"target":26,"value":valuesLoc[26]},
{"source":9,"target":21,"value":valuesLoc[21]},
{"source":9,"target":27,"value":valuesLoc[27]},
{"source":10,"target":22,"value":valuesLoc[22]},
{"source":10,"target":28,"value":valuesLoc[28]},
{"source":17,"target":29,"value":0},
{"source":17,"target":41,"value":0},
{"source":12,"target":30,"value":valuesLoc[30]},
{"source":12,"target":36,"value":valuesLoc[36]},
{"source":13,"target":31,"value":valuesLoc[31]},
{"source":13,"target":37,"value":valuesLoc[37]},
{"source":14,"target":32,"value":valuesLoc[32]},
{"source":14,"target":38,"value":valuesLoc[38]},
{"source":15,"target":33,"value":valuesLoc[33]},
{"source":15,"target":39,"value":valuesLoc[39]},
{"source":16,"target":34,"value":valuesLoc[34]},
{"source":16,"target":40,"value":valuesLoc[40]},
]}
sankey.nodes(graph.nodes)
@ -1084,8 +966,8 @@ export default {
return "#808080"
}
})
.style("stroke-width", function(d) { return Math.max(.5, d.dh); }) //setting the stroke length by the data . d.dh is defined in sankey.js
.sort(function(a, b) { return b.dh - a.dh; })
.style("stroke-width", function(d) { return Math.max(.5, d.dy); }) //setting the stroke length by the data . d.dy is defined in sankey.js
.sort(function(a, b) { return b.dy - a.dy; })
.on("mouseover",linkmouseover)
.on("mouseout",linkmouseout);
@ -1110,7 +992,7 @@ export default {
// add the rectangles for the nodes
node.append("rect")
.attr("height", function(d) { return d.dh; })
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth( ))
.style("fill", function(d) { return d.color; }) //matches name with the colors here! inside the replace is some sort of regex
// .style("stroke",function(d) { return d3.rgb(d.color).darker(1); }) //line around the box formatting
@ -1134,7 +1016,7 @@ export default {
$("input[type='number']").change( function(d) {
valuesLoc[d.target.id] = parseInt(d.target.value)
EventBus.$emit('changeValues2', valuesLoc)
EventBus.$emit('changeValues2Run', valuesLoc)
});
}
// .append("title")
@ -1146,11 +1028,11 @@ export default {
.attr("x", -6)
.attr("y", function(d) {
if (d.node <= 5) {
return d.dh - 81;
return d.dy - 81;
} else if (d.node <= 17) {
return d.dh - 41;
return d.dy - 41;
} else {
return d.dh - 21;
return d.dy - 21;
}
})
.attr("dy", ".35em")
@ -1235,13 +1117,11 @@ export default {
},
SankeyView () {
var valuesLoc = this.values
var valuesLocSt2 = this.valuesStage2
var localStep = 2
var numberofModels = 6
var units = "Models";
var initialModels = this.RandomSearLoc * 5
var months = [{month:"RandSear",value:initialModels,loss:null},
{month:"Crossover_S1",value:250,loss:null},
{month:"Mutate_S1",value:250,loss:null}];
//this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var :
width = 1230 - margin.left - margin.right,
@ -1287,76 +1167,41 @@ export default {
var path = sankey.link(); //sankey.link() is something happening in sankey.js
// svg.selectAll("text.values")
// .data(months)
// .enter()
// .append("text")
// .text(function(d){return formatNumber(d.value)})
// .attr("class", "innerText")
// .attr("x",function(d,i){return i*89-margin.left-5})
// .attr("y",20)
// .attr("transform", function(d){
// return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10+15) + ")";});
// svg.selectAll("text.loss")
// .data(months)
// .enter()
// .append("text")
// .text(function(d){return d.loss})
// .attr("class", "innerText")
// .attr("x",function(d,i){return i*89-margin.left-5})
// .attr("y",20)
// .attr("fill",function(d){ return lossScale(d.loss)})
// .attr("transform", function(d){
// return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10-5) + ")";});
// svg.selectAll("text.months")
// .data(months)
// .enter()
// .append("text")
// .attr("class", "innerText")
// .text(function(d){return d.month})
// .attr("x",function(d,i){return i*89-margin.left-10})
// .attr("y",20)
// .attr("transform",
// "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + margin.bottom + ")");
// load the data
var graph = {
"nodes":[
{"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3","dh":height/numberofModels},
{"name":"RF","node":1,"month":"RandSear","color":"#b15928","dh":height/numberofModels},
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99","dh":height/numberofModels},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f","dh":height/numberofModels},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00","dh":height/numberofModels},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff","dh":height/numberofModels},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff","dh":height/(numberofModels*localStep)},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff","dh":height/(numberofModels*localStep)},
{"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3", valueN: this.RandomSearLoc},
{"name":"RF","node":1,"month":"RandSear","color":"#b15928", valueN: this.RandomSearLoc},
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99", valueN: this.RandomSearLoc},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f", valueN: this.RandomSearLoc},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00", valueN: this.RandomSearLoc},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff", valueN: this.RandomSearLoc},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3", valueN: this.RandomSearLoc/2},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928", valueN: this.RandomSearLoc/2},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99", valueN: this.RandomSearLoc/2},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f", valueN: this.RandomSearLoc/2},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00", valueN: this.RandomSearLoc/2},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff", valueN: this.RandomSearLoc/2},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3", valueN: this.RandomSearLoc/2},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928", valueN: this.RandomSearLoc/2},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99", valueN: this.RandomSearLoc/2},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f", valueN: this.RandomSearLoc/2},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00", valueN: this.RandomSearLoc/2},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff", valueN: this.RandomSearLoc/2},
],
"links":[
{"source":5,"target":11,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[6]+valuesLoc[7]+valuesLoc[8]+valuesLoc[9]+valuesLoc[10]))},
{"source":5,"target":17,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[12]+valuesLoc[13]+valuesLoc[14]+valuesLoc[15]+valuesLoc[16]))},
{"source":0,"target":6,"value":valuesLoc[6],"dh":height/(numberofModels*localStep)*(valuesLoc[6]/50)},
{"source":0,"target":12,"value":valuesLoc[12],"dh":height/(numberofModels*localStep)*(valuesLoc[12]/50)},
{"source":1,"target":7,"value":valuesLoc[7],"dh":height/(numberofModels*localStep)*(valuesLoc[7]/50)},
{"source":1,"target":13,"value":valuesLoc[13],"dh":height/(numberofModels*localStep)*(valuesLoc[13]/50)},
{"source":2,"target":8,"value":valuesLoc[8],"dh":height/(numberofModels*localStep)*(valuesLoc[8]/50)},
{"source":2,"target":14,"value":valuesLoc[14],"dh":height/(numberofModels*localStep)*(valuesLoc[14]/50)},
{"source":3,"target":9,"value":valuesLoc[9],"dh":height/(numberofModels*localStep)*(valuesLoc[9]/50)},
{"source":3,"target":15,"value":valuesLoc[15],"dh":height/(numberofModels*localStep)*(valuesLoc[15]/50)},
{"source":4,"target":10,"value":valuesLoc[10],"dh":height/(numberofModels*localStep)*(valuesLoc[10]/50)},
{"source":4,"target":16,"value":valuesLoc[16],"dh":height/(numberofModels*localStep)*(valuesLoc[16]/50)},
{"source":5,"target":11,"value":0},
{"source":5,"target":17,"value":0},
{"source":0,"target":6,"value":valuesLoc[6]},
{"source":0,"target":12,"value":valuesLoc[12]},
{"source":1,"target":7,"value":valuesLoc[7]},
{"source":1,"target":13,"value":valuesLoc[13]},
{"source":2,"target":8,"value":valuesLoc[8]},
{"source":2,"target":14,"value":valuesLoc[14]},
{"source":3,"target":9,"value":valuesLoc[9]},
{"source":3,"target":15,"value":valuesLoc[15]},
{"source":4,"target":10,"value":valuesLoc[10]},
{"source":4,"target":16,"value":valuesLoc[16]},
]}
sankey.nodes(graph.nodes)
@ -1376,8 +1221,8 @@ export default {
return "#808080"
}
})
.style("stroke-width", function(d) { return Math.max(.5, d.dh); }) //setting the stroke length by the data . d.dh is defined in sankey.js
.sort(function(a, b) { return b.dh - a.dh; })
.style("stroke-width", function(d) { return Math.max(.5, d.dy); }) //setting the stroke length by the data . d.dy is defined in sankey.js
.sort(function(a, b) { return b.dy - a.dy; })
.on("mouseover",linkmouseover)
.on("mouseout",linkmouseout);
@ -1402,7 +1247,7 @@ export default {
// add the rectangles for the nodes
node.append("rect")
.attr("height", function(d) { return d.dh; })
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth( ))
.style("fill", function(d) { return d.color; }) //matches name with the colors here! inside the replace is some sort of regex
// .style("stroke",function(d) { return d3.rgb(d.color).darker(1); }) //line around the box formatting
@ -1426,7 +1271,9 @@ export default {
$("input[type='number']").change( function(d) {
valuesLoc[d.target.id] = parseInt(d.target.value)
valuesLocSt2[d.target.id] = parseInt(d.target.value)
EventBus.$emit('changeValues', valuesLoc)
EventBus.$emit('changeValues2', valuesLocSt2)
});
}
// .append("title")
@ -1438,9 +1285,9 @@ export default {
.attr("x", -6)
.attr("y", function(d) {
if (d.node <= 5) {
return d.dh - 81;
return d.dy - 81;
} else {
return d.dh - 41;
return d.dy - 41;
}
})
.attr("dy", ".35em")
@ -1456,16 +1303,6 @@ export default {
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// // the function for moving the nodes
// function dragmove(d) {
// d3.select(this).attr("transform",
// "translate(" + d.x + "," + (
// d.y = Math.max(0, Math.min(height/2 - d.dy, d3.event.y))
// ) + ")");
// sankey.relayout();
// link.attr("d", path);
// }
var status=null;
function nodemouseover(d){
@ -1511,79 +1348,8 @@ export default {
.attr("transform",
"translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ") rotate(-90 150 150)");
//y axis
// svg.append("g")
// .call(yAxis)
// .attr("class", "axis")
// .attr("transform",
// "translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ")");
},
// LegendStable() {
// var viewerWidth = this.responsiveWidthHeight[0]*7
// var viewerHeight = this.responsiveWidthHeight[1]*1.6
// var viewerPosTop = viewerWidth * 0.01;
// var cellSizeHeat = 20
// var legendElementWidth = cellSizeHeat * 3;
// // http://bl.ocks.org/mbostock/5577023
// var colors = colorbrewer.PRGn[this.classesNumber];
// var svgLeg = d3.select("#LegendHeat");
// svgLeg.selectAll("*").remove();
// var svgLeg = d3.select("#LegendHeat").append("svg")
// .attr("width", viewerWidth/2)
// .attr("height", viewerHeight*0.10)
// .style("margin-top", "12px")
// var legend = svgLeg.append('g')
// .attr("class", "legend")
// .attr("transform", "translate(0,0)")
// .selectAll(".legendElement")
// .data([1.00, 0.75, 0.50, 0.25, 0.00, 0.25, 0.50, 0.75, 1.00])
// .enter().append("g")
// .attr("class", "legendElement");
// legend.append("svg:rect")
// .attr("x", viewerPosTop)
// .attr("y", function(d, i) {
// return (legendElementWidth * i) + 35;
// })
// .attr("class", "cellLegend bordered")
// .attr("width", legendElementWidth)
// .attr("height", cellSizeHeat / 2)
// .style("fill", function(d, i) {
// console.log(colors[i])
// return colors[i];
// });
// legend.append("text")
// .attr("class", "mono legendElement")
// .text(function(d, i) {
// console.log(i)
// if (i < 4) {
// return "-" + (d * 100) + "%";
// } else if (i > 4) {
// return "+" + (d * 100) + "%";
// } else {
// return "" + (d * 100) + "%";
// }
// })
// .attr("x", function(d, i) {
// if (i > 4) {
// return (legendElementWidth * i) + 45;
// } else if (i == 4) {
// return (legendElementWidth * i) + 55;
// } else {
// return (legendElementWidth * i) + 40;
// }
// })
// .attr("y", (viewerPosTop + cellSizeHeat) + 5);
// svgLeg.append("text").attr("x", 220).attr("y", 32).text("Difference in PD (solution space vs. ensemble").style("font-size", "16px").attr("alignment-baseline","top").attr('transform', 'translate(0,10) rotate(90)')
// }
},
mounted() {
//EventBus.$on('emittedEventCallingSankeyLegend', this.LegendStable)
@ -1591,11 +1357,11 @@ export default {
EventBus.$on('emittedEventCallingSankeyStage2', this.SankeyViewStage2)
EventBus.$on('emittedEventCallingSankeyStage3', this.SankeyViewStage3)
EventBus.$on('changeValues', data => { this.values = data })
EventBus.$on('changeValues', data => { this.values = data; })
EventBus.$on('changeValues', this.SankeyView )
EventBus.$on('changeValues2', data => { this.valuesStage2 = data})
EventBus.$on('changeValues2', this.SankeyViewStage2)
EventBus.$on('changeValues2Run', this.SankeyViewStage2)
EventBus.$on('SendtheChangeinRangePos', data => { this.RandomSearLoc = data })

6
frontend/src/components/Main.vue
Unescape View File

@ -374,7 +374,6 @@ export default Vue.extend({
EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults)
EventBus.$emit('emittedEventCallingSankey')
//EventBus.$emit('emittedEventCallingSankeyLegend')
EventBus.$emit('callAlgorithhms')
EventBus.$emit('callValidationData', this.OverviewResults)
EventBus.$emit('callValidation')
EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
@ -383,6 +382,7 @@ export default Vue.extend({
EventBus.$emit('LegendPredict')
this.storeBothEnsCM[0] = this.OverviewResults
this.firstTimeExec = false
EventBus.$emit('callAlgorithhms')
} else {
var Performance = JSON.parse(this.OverviewResults[1])
EventBus.$emit('SendStoredEnsembleHist', this.storeEnsemble)
@ -399,7 +399,6 @@ export default Vue.extend({
EventBus.$emit('hideCrossMut')
}
this.storeBothEnsCM[1] = this.OverviewResults
EventBus.$emit('callAlgorithhms')
this.getFinalResults()
EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
EventBus.$emit('SendSelectedPointsToServerEvent', this.PredictSelEnsem)
@ -407,6 +406,7 @@ export default Vue.extend({
EventBus.$emit('callValidationData', this.OverviewResults)
EventBus.$emit('callValidation')
EventBus.$emit('LegendPredictEnsem')
EventBus.$emit('callAlgorithhms')
}
})
.catch(error => {
@ -1130,7 +1130,7 @@ export default Vue.extend({
EventBus.$on('factorsChanged', data => { this.basicValuesFact = data })
EventBus.$on('changeValues', data => { this.CMNumberofModelsOFFICIAL = data })
EventBus.$on('changeValues2', data => { this.CMNumberofModelsOFFICIALS2 = data })
EventBus.$on('changeValues2Run', data => { this.CMNumberofModelsOFFICIALS2 = data })
//Prevent double click to search for a word.
document.addEventListener('mousedown', function (event) {

10
frontend/src/components/Predictions.vue
Unescape View File

@ -195,7 +195,7 @@ export default {
var t = d3.timer(function(elapsed) {
draw();
if (elapsed > 2000) t.stop();
if (elapsed > 2500) t.stop();
}); // start a timer that runs the draw function for 500 ms (this needs to be higher than the transition in the databind function)
@ -438,7 +438,7 @@ export default {
var t = d3.timer(function(elapsed) {
draw();
if (elapsed > 2000) t.stop();
if (elapsed > 2500) t.stop();
}); // start a timer that runs the draw function for 500 ms (this needs to be higher than the transition in the databind function)
@ -545,11 +545,11 @@ export default {
var heightText = 180
svgLegGl.append("line")
.attr("x1", 614)
.attr("x1", 613)
.attr("y1", 0)
.attr("x2", 614)
.attr("x2", 613)
.attr("y2", heightText+30)
.style("stroke-width", 1)
.style("stroke-width", 2)
.style("stroke", "black")
.style("fill", "none");

2
frontend/src/components/ValidationController.vue
Unescape View File

@ -155,7 +155,7 @@ export default {
yName:'value',
axisLabels: {xAxis: 'Algorithm', yAxis: '# Performance (%) #'},
selector:"#violin",
constrainExtremes:true});
constrainExtremes:false});
chart2.renderBoxPlot({showBox:false});
chart2.renderDataPlots({showBeanLines:true,beanWidth:15,showPlot:false,showLines:activeLines});
chart2.renderNotchBoxes({showNotchBox:false});

2
run.py
Unescape View File

@ -806,8 +806,6 @@ def PreprocessingPredEnsemble():
numberIDRF = []
numberIDGradB = []
print(EnsembleActive)
for el in EnsembleActive:
match = re.match(r"([a-z]+)([0-9]+)", el, re.I)
if match:

Write Preview
Loading…
Cancel
Save