parent
ba89ac64d4
commit
8266eb3ad3
Binary file not shown.
@ -0,0 +1,439 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div id="containerAll"></div> |
||||||
|
<div id="containerSelection"></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: "Predictions", |
||||||
|
data () { |
||||||
|
return { |
||||||
|
GetResultsAll: [], |
||||||
|
GetResultsSelection: [], |
||||||
|
responsiveWidthHeight: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
reset () { |
||||||
|
var svg = d3.select("#containerAll"); |
||||||
|
svg.selectAll("*").remove(); |
||||||
|
var svg = d3.select("#containerSelection"); |
||||||
|
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; |
||||||
|
}; |
||||||
|
// Clear Heatmap first |
||||||
|
var svg = d3.select("#GridView"); |
||||||
|
svg.selectAll("*").remove(); |
||||||
|
|
||||||
|
var yValues = JSON.parse(this.GetResultsAll[6]) |
||||||
|
var targetNames = JSON.parse(this.GetResultsAll[7]) |
||||||
|
|
||||||
|
var getIndices = [] |
||||||
|
for (let i = 0; i < targetNames.length; i++) { |
||||||
|
getIndices.push(yValues.multiIndexOf(targetNames[i])) |
||||||
|
} |
||||||
|
getIndices.reverse() |
||||||
|
|
||||||
|
var predictions = JSON.parse(this.GetResultsAll[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: 0.0 }) |
||||||
|
dataKNN.push({ id: null, value: 0.0 }) |
||||||
|
dataLR.push({ id: null, value: 0.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++) { |
||||||
|
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; |
||||||
|
} |
||||||
|
|
||||||
|
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 = 2500, |
||||||
|
height = 125; |
||||||
|
var colourScale; |
||||||
|
|
||||||
|
|
||||||
|
var canvas = d3.select('#containerAll') |
||||||
|
.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 - 11 * groupSpacing) / (15.2*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(d3.extent(data, function(d) { return d.value; })); |
||||||
|
|
||||||
|
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 / 169) % 13, x1 = Math.floor(i % 13); |
||||||
|
return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10); |
||||||
|
}) |
||||||
|
.attr('y', function(d, i) { |
||||||
|
var y0 = Math.floor(i / 1000), y1 = Math.floor(i % 169 / 13); |
||||||
|
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; |
||||||
|
}; |
||||||
|
// Clear Heatmap first |
||||||
|
var svg = d3.select("#GridView"); |
||||||
|
svg.selectAll("*").remove(); |
||||||
|
|
||||||
|
var yValues = JSON.parse(this.GetResultsSelection[6]) |
||||||
|
var targetNames = JSON.parse(this.GetResultsSelection[7]) |
||||||
|
|
||||||
|
var getIndices = [] |
||||||
|
for (let i = 0; i < targetNames.length; i++) { |
||||||
|
getIndices.push(yValues.multiIndexOf(targetNames[i])) |
||||||
|
} |
||||||
|
getIndices.reverse() |
||||||
|
|
||||||
|
var predictions = JSON.parse(this.GetResultsSelection[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: 0.0 }) |
||||||
|
dataKNN.push({ id: null, value: 0.0 }) |
||||||
|
dataLR.push({ id: null, value: 0.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++) { |
||||||
|
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; |
||||||
|
} |
||||||
|
|
||||||
|
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 = 2500, |
||||||
|
height = 125; |
||||||
|
var colourScale; |
||||||
|
|
||||||
|
|
||||||
|
var canvas = d3.select('#containerSelection') |
||||||
|
.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 - 11 * groupSpacing) / (15.2*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(d3.extent(data, function(d) { return d.value; })); |
||||||
|
|
||||||
|
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 / 169) % 13, x1 = Math.floor(i % 13); |
||||||
|
return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10); |
||||||
|
}) |
||||||
|
.attr('y', function(d, i) { |
||||||
|
var y0 = Math.floor(i / 1000), y1 = Math.floor(i % 169 / 13); |
||||||
|
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('emittedEventCallingGrid', data => { this.GetResultsAll = data; }) |
||||||
|
EventBus.$on('emittedEventCallingGrid', this.Grid) |
||||||
|
|
||||||
|
EventBus.$on('emittedEventCallingGridSelection', data => { this.GetResultsSelection = data; }) |
||||||
|
EventBus.$on('emittedEventCallingGridSelection', 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