parent
272ef37dfe
commit
3c669717e2
Binary file not shown.
Binary file not shown.
@ -0,0 +1 @@ |
||||
{"duration": 12.543240070343018, "input_args": {"XData": " sepal_l sepal_w petal_l petal_w\n0 6.3 3.3 6.0 2.5\n1 7.1 3.0 5.9 2.1\n2 5.8 2.7 5.1 1.9\n3 6.3 2.9 5.6 1.8\n4 7.6 3.0 6.6 2.1\n.. ... ... ... ...\n145 5.1 3.8 1.6 0.2\n146 5.0 3.5 1.6 0.6\n147 5.1 3.4 1.5 0.2\n148 4.6 3.2 1.4 0.2\n149 4.8 3.0 1.4 0.3\n\n[150 rows x 4 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, 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, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "KNeighborsClassifier(algorithm='ball_tree', leaf_size=30, metric='minkowski',\n metric_params=None, n_jobs=None, n_neighbors=82, p=2,\n weights='uniform')", "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": "0"}} |
||||
Binary file not shown.
@ -0,0 +1 @@ |
||||
{"duration": 19.771310806274414, "input_args": {"XData": " sepal_l sepal_w petal_l petal_w\n0 6.3 3.3 6.0 2.5\n1 7.1 3.0 5.9 2.1\n2 5.8 2.7 5.1 1.9\n3 6.3 2.9 5.6 1.8\n4 7.6 3.0 6.6 2.1\n.. ... ... ... ...\n145 5.1 3.8 1.6 0.2\n146 5.0 3.5 1.6 0.6\n147 5.1 3.4 1.5 0.2\n148 4.6 3.2 1.4 0.2\n149 4.8 3.0 1.4 0.3\n\n[150 rows x 4 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, 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, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "LogisticRegression(C=64, class_weight=None, dual=False, fit_intercept=True,\n intercept_scaling=1, l1_ratio=None, max_iter=300,\n multi_class='auto', n_jobs=None, penalty='none',\n random_state=42, solver='newton-cg', tol=0.0001, verbose=0,\n warm_start=False)", "params": "{'C': [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], 'max_iter': [50, 100, 150, 200, 250, 300, 350, 400, 450], 'solver': ['lbfgs', 'newton-cg', 'sag', 'saga'], 'penalty': ['l2', 'none']}", "eachAlgor": "'LR'", "AlgorithmsIDsEnd": "100"}} |
||||
@ -0,0 +1,455 @@ |
||||
|
||||
<template> |
||||
<div> |
||||
<div id="containerAllCM"></div> |
||||
<div id="containerSelectionCM"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as d3Base from 'd3' |
||||
import { EventBus } from '../main.js' |
||||
import $ from 'jquery' |
||||
import * as colorbr from 'colorbrewer' |
||||
|
||||
// attach all d3 plugins to the d3 library |
||||
const d3 = Object.assign(d3Base) |
||||
const colorbrewer = Object.assign(colorbr) |
||||
|
||||
export default { |
||||
name: "PredictionsCM", |
||||
data () { |
||||
return { |
||||
GetResultsAll: [], |
||||
GetResultsSelectionCM: [], |
||||
responsiveWidthHeight: [], |
||||
predictSelectionCM: [], |
||||
StoreIndices: [], |
||||
} |
||||
}, |
||||
methods: { |
||||
reset () { |
||||
var svg = d3.select("#containerAllCM"); |
||||
svg.selectAll("*").remove(); |
||||
var svg = d3.select("#containerSelectionCM"); |
||||
svg.selectAll("*").remove(); |
||||
}, |
||||
Grid () { |
||||
|
||||
Array.prototype.multiIndexOf = function (el) { |
||||
var idxs = []; |
||||
for (var i = this.length - 1; i >= 0; i--) { |
||||
if (this[i] === el) { |
||||
idxs.unshift(i); |
||||
} |
||||
} |
||||
return idxs; |
||||
}; |
||||
|
||||
var svg = d3.select("#containerAllCM"); |
||||
svg.selectAll("*").remove(); |
||||
|
||||
var yValues = JSON.parse(this.GetResultsAllCM[6]) |
||||
var targetNames = JSON.parse(this.GetResultsAllCM[7]) |
||||
|
||||
var getIndices = [] |
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
getIndices.push(yValues.multiIndexOf(targetNames[i])) |
||||
} |
||||
getIndices.reverse() |
||||
|
||||
var predictions = JSON.parse(this.GetResultsAllCM[12]) |
||||
var KNNPred = predictions[0] |
||||
var LRPred = predictions[1] |
||||
var PredAver = predictions[2] |
||||
|
||||
var dataAver = [] |
||||
var dataAverGetResults = [] |
||||
var dataKNN = [] |
||||
var dataKNNResults = [] |
||||
var dataLR = [] |
||||
var dataLRResults = [] |
||||
|
||||
var max = 0 |
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
if (getIndices[targetNames[i]].length > max) { |
||||
max = getIndices[targetNames[i]].length |
||||
} |
||||
} |
||||
|
||||
var sqrtSize = Math.ceil(Math.sqrt(max)) |
||||
var size = sqrtSize * sqrtSize |
||||
|
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
dataAver = []; |
||||
dataKNN = [] |
||||
dataLR = [] |
||||
getIndices[targetNames[i]].forEach(element => { |
||||
dataAver.push({ id: element, value: PredAver[element][targetNames[i]] }) |
||||
dataKNN.push({ id: element, value: KNNPred[element][targetNames[i]] }) |
||||
dataLR.push({ id: element, value: LRPred[element][targetNames[i]] }) |
||||
}); |
||||
for (let j = 0; j < size - getIndices[targetNames[i]].length; j++) { |
||||
dataAver.push({ id: null, value: 1.0 }) |
||||
dataKNN.push({ id: null, value: 1.0 }) |
||||
dataLR.push({ id: null, value: 1.0 }) |
||||
} |
||||
dataAverGetResults.push(dataAver) |
||||
dataKNNResults.push(dataKNN) |
||||
dataLRResults.push(dataLR) |
||||
} |
||||
dataAverGetResults.reverse() |
||||
dataKNNResults.reverse() |
||||
dataLRResults.reverse() |
||||
|
||||
var classArray = [] |
||||
this.StoreIndices = [] |
||||
for (let i = 0; i < dataAverGetResults.length; i++) { |
||||
dataAverGetResults[i].sort((a, b) => (a.value > b.value) ? 1 : -1) |
||||
var len = dataAverGetResults[i].length |
||||
var indices = new Array(len) |
||||
for (let j = 0; j < len; j++) { |
||||
indices[j] = dataAverGetResults[i][j].id; |
||||
} |
||||
this.StoreIndices.push(indices) |
||||
|
||||
dataKNNResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
dataLRResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
classArray.push(dataAverGetResults[i].concat(dataKNNResults[i], dataLRResults[i])); |
||||
} |
||||
|
||||
var classStore = [].concat.apply([], classArray); |
||||
|
||||
// === Set up canvas === // |
||||
|
||||
var width = 1200, |
||||
height = 125; |
||||
var colourScale; |
||||
|
||||
|
||||
var canvas = d3.select('#containerAllCM') |
||||
.append('canvas') |
||||
.attr('width', width) |
||||
.attr('height', height); |
||||
|
||||
var context = canvas.node().getContext('2d'); |
||||
|
||||
// === Bind data to custom elements === // |
||||
|
||||
var customBase = document.createElement('custom'); |
||||
var custom = d3.select(customBase); // this is our svg replacement |
||||
|
||||
// settings for a grid with 40 cells in a row and 2x5 cells in a group |
||||
var groupSpacing = 60; |
||||
var cellSpacing = 2; |
||||
var cellSize = Math.floor((width - 1 * groupSpacing) / (10 * sqrtSize)) - cellSpacing; |
||||
|
||||
// === First call === // |
||||
databind(classStore, size, sqrtSize); // ...then update the databind function |
||||
|
||||
var t = d3.timer(function(elapsed) { |
||||
draw(); |
||||
if (elapsed > 300) 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) |
||||
|
||||
|
||||
// === Bind and draw functions === // |
||||
|
||||
function databind(data, size, sqrtSize) { |
||||
|
||||
|
||||
colourScale = d3.scaleSequential(d3.interpolateReds).domain([1, 0]) |
||||
|
||||
var join = custom.selectAll('custom.rect') |
||||
.data(data); |
||||
|
||||
var enterSel = join.enter() |
||||
.append('custom') |
||||
.attr('class', 'rect') |
||||
.attr('x', function(d, i) { |
||||
var x0 = Math.floor(i / size) % sqrtSize, x1 = Math.floor(i % sqrtSize); |
||||
return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10); |
||||
}) |
||||
.attr('y', function(d, i) { |
||||
var y0 = Math.floor(i / data.length), y1 = Math.floor(i % size / sqrtSize); |
||||
return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10); |
||||
}) |
||||
.attr('width', 0) |
||||
.attr('height', 0); |
||||
|
||||
join |
||||
.merge(enterSel) |
||||
.transition() |
||||
.attr('width', cellSize) |
||||
.attr('height', cellSize) |
||||
.attr('fillStyle', function(d) { return colourScale(d.value); }) |
||||
|
||||
var exitSel = join.exit() |
||||
.transition() |
||||
.attr('width', 0) |
||||
.attr('height', 0) |
||||
.remove(); |
||||
|
||||
} // databind() |
||||
|
||||
|
||||
// === Draw canvas === // |
||||
|
||||
function draw() { |
||||
|
||||
// clear canvas |
||||
|
||||
context.fillStyle = '#fff'; |
||||
context.fillRect(0, 0, width, height); |
||||
|
||||
|
||||
// draw each individual custom element with their properties |
||||
|
||||
var elements = custom.selectAll('custom.rect') // this is the same as the join variable, but used here to draw |
||||
|
||||
elements.each(function(d,i) { |
||||
|
||||
// for each virtual/custom element... |
||||
|
||||
var node = d3.select(this); |
||||
context.fillStyle = node.attr('fillStyle'); |
||||
context.fillRect(node.attr('x'), node.attr('y'), node.attr('width'), node.attr('height')) |
||||
|
||||
}); |
||||
|
||||
} // draw() |
||||
|
||||
}, |
||||
GridSelection () { |
||||
|
||||
Array.prototype.multiIndexOf = function (el) { |
||||
var idxs = []; |
||||
for (var i = this.length - 1; i >= 0; i--) { |
||||
if (this[i] === el) { |
||||
idxs.unshift(i); |
||||
} |
||||
} |
||||
return idxs; |
||||
}; |
||||
|
||||
var svg = d3.select("#containerSelectionCM"); |
||||
svg.selectAll("*").remove(); |
||||
|
||||
var predictionsAll = JSON.parse(this.GetResultsSelectionCM[12]) |
||||
|
||||
if (this.predictSelectionCM.length != 0) { |
||||
var predictions = this.predictSelectionCM |
||||
var KNNPred = predictions[0] |
||||
var LRPred = predictions[1] |
||||
var PredAver = predictions[2] |
||||
} else { |
||||
var KNNPred = predictionsAll[0] |
||||
var LRPred = predictionsAll[1] |
||||
var PredAver = predictionsAll[2] |
||||
} |
||||
var KNNPredAll = predictionsAll[0] |
||||
var LRPredAll = predictionsAll[1] |
||||
var PredAverAll = predictionsAll[2] |
||||
|
||||
var yValues = JSON.parse(this.GetResultsSelectionCM[6]) |
||||
var targetNames = JSON.parse(this.GetResultsSelectionCM[7]) |
||||
|
||||
var getIndices = [] |
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
getIndices.push(yValues.multiIndexOf(targetNames[i])) |
||||
} |
||||
getIndices.reverse() |
||||
|
||||
var dataAver = [] |
||||
var dataAverGetResults = [] |
||||
var dataKNN = [] |
||||
var dataKNNResults = [] |
||||
var dataLR = [] |
||||
var dataLRResults = [] |
||||
|
||||
var max = 0 |
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
if (getIndices[targetNames[i]].length > max) { |
||||
max = getIndices[targetNames[i]].length |
||||
} |
||||
} |
||||
|
||||
var sqrtSize = Math.ceil(Math.sqrt(max)) |
||||
var size = sqrtSize * sqrtSize |
||||
|
||||
for (let i = 0; i < targetNames.length; i++) { |
||||
dataAver = []; |
||||
dataKNN = [] |
||||
dataLR = [] |
||||
getIndices[targetNames[i]].forEach(element => { |
||||
dataAver.push({ id: element, value: PredAver[element][targetNames[i]] - PredAverAll[element][targetNames[i]] }) |
||||
dataKNN.push({ id: element, value: KNNPred[element][targetNames[i]] - KNNPredAll[element][targetNames[i]] }) |
||||
dataLR.push({ id: element, value: LRPred[element][targetNames[i]] - LRPredAll[element][targetNames[i]] }) |
||||
}); |
||||
for (let j = 0; j < size - getIndices[targetNames[i]].length; j++) { |
||||
dataAver.push({ id: null, value: 0 }) |
||||
dataKNN.push({ id: null, value: 0 }) |
||||
dataLR.push({ id: null, value: 0 }) |
||||
} |
||||
dataAverGetResults.push(dataAver) |
||||
dataKNNResults.push(dataKNN) |
||||
dataLRResults.push(dataLR) |
||||
} |
||||
dataAverGetResults.reverse() |
||||
dataKNNResults.reverse() |
||||
dataLRResults.reverse() |
||||
|
||||
var classArray = [] |
||||
|
||||
for (let i = 0; i < dataAverGetResults.length; i++) { |
||||
|
||||
var indices = this.StoreIndices[i] |
||||
dataAverGetResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
dataKNNResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
dataLRResults[i].sort(function(a, b){ |
||||
return indices.indexOf(a.id) - indices.indexOf(b.id) |
||||
}); |
||||
|
||||
classArray.push(dataAverGetResults[i].concat(dataKNNResults[i], dataLRResults[i])); |
||||
} |
||||
|
||||
var classStore = [].concat.apply([], classArray); |
||||
// === Set up canvas === // |
||||
|
||||
var width = 1200, |
||||
height = 125; |
||||
var colourScale; |
||||
|
||||
|
||||
var canvas = d3.select('#containerSelectionCM') |
||||
.append('canvas') |
||||
.attr('width', width) |
||||
.attr('height', height); |
||||
|
||||
var context = canvas.node().getContext('2d'); |
||||
|
||||
// === Bind data to custom elements === // |
||||
|
||||
var customBase = document.createElement('custom'); |
||||
var custom = d3.select(customBase); // this is our svg replacement |
||||
|
||||
// settings for a grid with 40 cells in a row and 2x5 cells in a group |
||||
var groupSpacing = 60; |
||||
var cellSpacing = 2; |
||||
var cellSize = Math.floor((width - 1 * groupSpacing) / (10 * sqrtSize)) - cellSpacing; |
||||
|
||||
// === First call === // |
||||
databind(classStore, size, sqrtSize); // ...then update the databind function |
||||
|
||||
var t = d3.timer(function(elapsed) { |
||||
draw(); |
||||
if (elapsed > 300) 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) |
||||
|
||||
|
||||
// === Bind and draw functions === // |
||||
|
||||
function databind(data, size, sqrtSize) { |
||||
|
||||
|
||||
colourScale = d3.scaleSequential(d3.interpolatePRGn).domain([-1, 1]) |
||||
|
||||
var join = custom.selectAll('custom.rect') |
||||
.data(data); |
||||
|
||||
var enterSel = join.enter() |
||||
.append('custom') |
||||
.attr('class', 'rect') |
||||
.attr('x', function(d, i) { |
||||
var x0 = Math.floor(i / size) % sqrtSize, x1 = Math.floor(i % sqrtSize); |
||||
return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10); |
||||
}) |
||||
.attr('y', function(d, i) { |
||||
var y0 = Math.floor(i / data.length), y1 = Math.floor(i % size / sqrtSize); |
||||
return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10); |
||||
}) |
||||
.attr('width', 0) |
||||
.attr('height', 0); |
||||
|
||||
join |
||||
.merge(enterSel) |
||||
.transition() |
||||
.attr('width', cellSize) |
||||
.attr('height', cellSize) |
||||
.attr('fillStyle', function(d) { return colourScale(d.value); }) |
||||
|
||||
var exitSel = join.exit() |
||||
.transition() |
||||
.attr('width', 0) |
||||
.attr('height', 0) |
||||
.remove(); |
||||
|
||||
} // databind() |
||||
|
||||
|
||||
// === Draw canvas === // |
||||
|
||||
function draw() { |
||||
|
||||
// clear canvas |
||||
|
||||
context.fillStyle = '#fff'; |
||||
context.fillRect(0, 0, width, height); |
||||
|
||||
|
||||
// draw each individual custom element with their properties |
||||
|
||||
var elements = custom.selectAll('custom.rect') // this is the same as the join variable, but used here to draw |
||||
|
||||
elements.each(function(d,i) { |
||||
|
||||
// for each virtual/custom element... |
||||
|
||||
var node = d3.select(this); |
||||
context.fillStyle = node.attr('fillStyle'); |
||||
context.fillRect(node.attr('x'), node.attr('y'), node.attr('width'), node.attr('height')) |
||||
|
||||
}); |
||||
|
||||
} // draw() |
||||
|
||||
}, |
||||
}, |
||||
mounted () { |
||||
EventBus.$on('emittedEventCallingGridCrossoverMutation', data => { this.GetResultsAllCM = data; }) |
||||
EventBus.$on('emittedEventCallingGridCrossoverMutation', this.Grid) |
||||
|
||||
EventBus.$on('emittedEventCallingGridSelectionGridCrossoverMutation', data => { this.GetResultsSelectionCM = data; }) |
||||
EventBus.$on('emittedEventCallingGridSelectionGridCrossoverMutation', this.GridSelection) |
||||
|
||||
EventBus.$on('SendSelectedPointsToServerEventCM', data => { this.predictSelectionCM = data; }) |
||||
EventBus.$on('SendSelectedPointsToServerEventCM', this.GridSelection) |
||||
|
||||
EventBus.$on('Responsive', data => { |
||||
this.responsiveWidthHeight = data}) |
||||
EventBus.$on('ResponsiveandChange', data => { |
||||
this.responsiveWidthHeight = data}) |
||||
|
||||
// reset the views |
||||
EventBus.$on('resetViews', this.reset) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style type="text/css"> |
||||
canvas { |
||||
border: 1px dotted #ccc; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue