parent
585efcbb63
commit
ff669e8f56
Binary file not shown.
@ -1,117 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id="myDynamicTable" v-on:change="this.getFeatureSelection"></div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { EventBus } from '../main.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'FeatureSelection', |
|
||||||
data () { |
|
||||||
return { |
|
||||||
GetResults: '', |
|
||||||
datafromCheckbox: '', |
|
||||||
loop: 0 |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
FeatureSelection () { |
|
||||||
|
|
||||||
document.getElementById("myDynamicTable").innerHTML = ""; |
|
||||||
let Features= JSON.parse(this.GetResults[7]) |
|
||||||
let ClassifierswithoutFI = JSON.parse(this.GetResults[8]) |
|
||||||
let ClassifierswithFI = JSON.parse(this.GetResults[9]) |
|
||||||
const limit = JSON.parse(this.GetResults[13]) |
|
||||||
var Classifiers |
|
||||||
Classifiers = ClassifierswithoutFI.concat(ClassifierswithFI) |
|
||||||
var limitList = [] |
|
||||||
if (limit == '') { |
|
||||||
for (let i = 0; i < Classifiers.length; i++) { |
|
||||||
limitList.push(Classifiers[i]) |
|
||||||
} |
|
||||||
} else { |
|
||||||
limitList = [] |
|
||||||
for (let i = 0; i < limit.length; i++) { |
|
||||||
for (let j = 0; j < Classifiers.length; j++) { |
|
||||||
if (Number(limit[i].match(/\d+/)[0]) == Classifiers[j]) { |
|
||||||
limitList.push(Number(limit[i].match(/\d+/)[0])) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
var myTableDiv = document.getElementById("myDynamicTable"); |
|
||||||
var table = document.createElement('TABLE'); |
|
||||||
table.border = '1'; |
|
||||||
|
|
||||||
var tableBody = document.createElement('TBODY'); |
|
||||||
table.appendChild(tableBody); |
|
||||||
|
|
||||||
var checkBoxArray = [] |
|
||||||
for (var i = 0; i < limitList.length+1; i++) { |
|
||||||
var tr = document.createElement('TR'); |
|
||||||
tableBody.appendChild(tr); |
|
||||||
for (var j = 0; j < Features.length; j++) { |
|
||||||
if (j == 0){ |
|
||||||
if (i == 0) { |
|
||||||
var td = document.createElement('TD'); |
|
||||||
td.width = '75'; |
|
||||||
td.appendChild(document.createTextNode('')); |
|
||||||
tr.appendChild(td); |
|
||||||
} else { |
|
||||||
var td = document.createElement('TD'); |
|
||||||
td.width = '90'; |
|
||||||
td.appendChild(document.createTextNode('M ' + (i - 1))); |
|
||||||
tr.appendChild(td); |
|
||||||
} |
|
||||||
} |
|
||||||
if (i == 0){ |
|
||||||
var td = document.createElement('TD'); |
|
||||||
td.width = '30'; |
|
||||||
td.appendChild(document.createTextNode('F ' + j)); |
|
||||||
tr.appendChild(td); |
|
||||||
} else { |
|
||||||
var checkbox = document.createElement('input'); |
|
||||||
checkbox.type = "checkbox"; |
|
||||||
checkbox.checked = true; |
|
||||||
checkbox.name = i-1; |
|
||||||
checkbox.text = "F " + j |
|
||||||
checkbox.value = "value"; |
|
||||||
checkbox.id = "M " + (i-1) + ", F " + j; |
|
||||||
checkBoxArray.push(checkbox) |
|
||||||
var td = document.createElement('TD'); |
|
||||||
td.appendChild(myTableDiv.appendChild(checkbox)); |
|
||||||
tr.appendChild(td); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
//if (this.loop == 0) { |
|
||||||
myTableDiv.appendChild(table); |
|
||||||
//} |
|
||||||
this.loop++ |
|
||||||
this.datafromCheckbox = checkBoxArray |
|
||||||
}, |
|
||||||
getFeatureSelection () { |
|
||||||
|
|
||||||
var results = new Array() |
|
||||||
this.datafromCheckbox.forEach(eachCheckbox => { |
|
||||||
if (eachCheckbox.checked == true) { |
|
||||||
results.push('ClassifierID: ' + eachCheckbox.name, 'FeatureName: ' + eachCheckbox.text, 'Check: 1') |
|
||||||
} |
|
||||||
else { |
|
||||||
results.push('ClassifierID: ' + eachCheckbox.name, 'FeatureName: ' + eachCheckbox.text, 'Check: 0') |
|
||||||
} |
|
||||||
}); |
|
||||||
EventBus.$emit('SendSelectedFeaturesEvent', results) |
|
||||||
}, |
|
||||||
reset () { |
|
||||||
document.getElementById("myDynamicTable").innerHTML = ""; |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
EventBus.$on('emittedEventCallingTableView', data => { this.GetResults = data }) |
|
||||||
EventBus.$on('emittedEventCallingTableView', this.FeatureSelection) |
|
||||||
EventBus.$on('resetViews', this.reset) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,581 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id="chart"></div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import * as d3Base from 'd3' |
|
||||||
import { loom, string } from 'd3-loom' |
|
||||||
import { EventBus } from '../main.js' |
|
||||||
|
|
||||||
// attach all d3 plugins to the d3 library |
|
||||||
const d3 = Object.assign(d3Base, { loom, string }) |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "StretchedChord", |
|
||||||
data () { |
|
||||||
return { |
|
||||||
AllResults: 0 |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
StretchChord () { |
|
||||||
d3.selectAll("#chart > *").remove(); |
|
||||||
const FeatureImportance = JSON.parse(this.AllResults[3]) |
|
||||||
const ClassNames = JSON.parse(this.AllResults[5]) |
|
||||||
const ClassifiersIDs = JSON.parse(this.AllResults[9]) |
|
||||||
const limit = JSON.parse(this.AllResults[13]) |
|
||||||
var limitList = [] |
|
||||||
if (limit == '') { |
|
||||||
for (let i = 0; i < ClassifiersIDs.length; i++) { |
|
||||||
limitList.push(ClassifiersIDs[i]) |
|
||||||
} |
|
||||||
} else { |
|
||||||
limitList = [] |
|
||||||
for (let i = 0; i < limit.length; i++) { |
|
||||||
for (let j = 0; j < ClassifiersIDs.length; j++) { |
|
||||||
if (Number(limit[i].match(/\d+/)[0]) == ClassifiersIDs[j]) { |
|
||||||
limitList.push(Number(limit[i].match(/\d+/)[0])) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
if (limitList.length != 0){ |
|
||||||
var SortFeaturesPerClass = [] |
|
||||||
var MergeSortFeaturesPerClass = [] |
|
||||||
var counter = 0 |
|
||||||
var SortFeaturesPerClassRemoveEmpty = [] |
|
||||||
var returnvalue = 0 |
|
||||||
FeatureImportance.forEach(classifier => { |
|
||||||
for (let i = 0; i < limitList.length; i++) { |
|
||||||
returnvalue = this.sortObject(classifier[i], limitList[counter], ClassNames[i]) |
|
||||||
if (returnvalue === undefined || returnvalue.length == 0) { |
|
||||||
} else { |
|
||||||
if (returnvalue[0]['classifier'] != 'M undefined') { |
|
||||||
SortFeaturesPerClass.push(returnvalue) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
counter++ |
|
||||||
}) |
|
||||||
//var SortFeaturesPerClassRemoveEmpty = SortFeaturesPerClass.filter(e => e.length); |
|
||||||
MergeSortFeaturesPerClass = SortFeaturesPerClass[0] |
|
||||||
for (let i = 0; i < SortFeaturesPerClass.length - 1; i++) { |
|
||||||
MergeSortFeaturesPerClass = MergeSortFeaturesPerClass.concat(SortFeaturesPerClass[i+1]) |
|
||||||
} |
|
||||||
var margin = {left:60, top:40, right:80, bottom:50}, |
|
||||||
width = Math.max( Math.min(window.innerWidth, 500) - margin.left - margin.right - 20, 10), |
|
||||||
height = Math.max( Math.min(window.innerHeight - 250, 700) - margin.top - margin.bottom - 20, 10), |
|
||||||
innerRadius = Math.min(width * 0.33, height * .45), |
|
||||||
outerRadius = innerRadius * 1.05; |
|
||||||
|
|
||||||
//Recalculate the width and height now that we know the radius |
|
||||||
width = outerRadius * 2 + margin.right + margin.left; |
|
||||||
height = outerRadius * 2 + margin.top + margin.bottom; |
|
||||||
|
|
||||||
//Reset the overall font size |
|
||||||
var newFontSize = Math.min(70, Math.max(40, innerRadius * 62.5 / 250)); |
|
||||||
d3.select("html").style("font-size", newFontSize + "%"); |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
////////////////// Set-up Chord parameters ///////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
var pullOutSize = 20 + 30/135 * innerRadius; |
|
||||||
var numFormat = d3.format(",.0f"); |
|
||||||
var defaultOpacity = 0.85, |
|
||||||
fadeOpacity = 0.075; |
|
||||||
|
|
||||||
var loom = d3.loom() |
|
||||||
.padAngle(0.05) |
|
||||||
//.sortSubgroups(sortCharacter) |
|
||||||
//.heightInner(0) |
|
||||||
//.sortGroups(function(d) { return d.words }) |
|
||||||
//.sortLooms(d3.descending) |
|
||||||
.emptyPerc(0) |
|
||||||
.widthInner(40) |
|
||||||
//.widthInner(function(d) { return 6 * d.length; }) |
|
||||||
.value(function(d) { return d.importancerate; }) |
|
||||||
.outercolorfun(function(d) { return d.class; }) |
|
||||||
.inner(function(d) { return d.feature; }) |
|
||||||
.outer(function(d) { return d.classifier; }); |
|
||||||
|
|
||||||
var arc = d3.arc() |
|
||||||
.innerRadius(innerRadius*1.01) |
|
||||||
.outerRadius(outerRadius); |
|
||||||
|
|
||||||
var string = d3.string() |
|
||||||
.radius(innerRadius) |
|
||||||
.pullout(pullOutSize); |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
////////////////////// Create SVG ////////////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
d3.select("#chart").selectAll("*").remove(); |
|
||||||
|
|
||||||
var svg = d3.select("#chart").append("svg") |
|
||||||
.attr("width", width + margin.left + margin.right) |
|
||||||
.attr("height", height + margin.top + margin.bottom); |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
///////////////////// Read in data ///////////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
///////////////////// Prepare the data ///////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
//Sort the inner characters based on the total number of words spoken |
|
||||||
var dataAgg = MergeSortFeaturesPerClass |
|
||||||
|
|
||||||
//Find the total number of words per character |
|
||||||
var dataChar = d3.nest() |
|
||||||
.key(function(d) { return d.character; }) |
|
||||||
.rollup(function(leaves) { return d3.sum(leaves, function(d) { return d.words; }); }) |
|
||||||
.entries(dataAgg) |
|
||||||
.sort(function(a, b){ return d3.descending(a.value, b.value); }); |
|
||||||
//Unflatten the result |
|
||||||
var characterOrder = dataChar.map(function(d) { return d.key }) |
|
||||||
//Sort the characters on a specific order |
|
||||||
function sortCharacter(a, b) { |
|
||||||
return characterOrder.indexOf(a) - characterOrder.indexOf(b) |
|
||||||
}//sortCharacter |
|
||||||
|
|
||||||
//Set more loom functions |
|
||||||
loom |
|
||||||
.sortSubgroups(sortCharacter) |
|
||||||
.heightInner(innerRadius*0.2/characterOrder.length) |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
///////////////////////// Colors /////////////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
var categories = ClassNames |
|
||||||
var colors = ["#0000FF", "#ff0000", "#00ff00"] |
|
||||||
var color = d3.scaleOrdinal() |
|
||||||
.domain(categories) |
|
||||||
.range(colors) |
|
||||||
|
|
||||||
//Create a group that already holds the data |
|
||||||
var g = svg.append("g") |
|
||||||
.attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")") |
|
||||||
.datum(loom(dataAgg)) |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
///////////////////// Set-up title ///////////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
var titles = g.append("g") |
|
||||||
.attr("class", "texts") |
|
||||||
.style("opacity", 0) |
|
||||||
|
|
||||||
titles.append("text") |
|
||||||
.attr("class", "name-title") |
|
||||||
.attr("x", 0) |
|
||||||
.attr("y", -innerRadius*5/6) |
|
||||||
|
|
||||||
titles.append("text") |
|
||||||
.attr("class", "value-title") |
|
||||||
.attr("x", 0) |
|
||||||
.attr("y", -innerRadius*5/6 + 25) |
|
||||||
|
|
||||||
//The character pieces |
|
||||||
titles.append("text") |
|
||||||
.attr("class", "character-note") |
|
||||||
.attr("x", 0) |
|
||||||
.attr("y", innerRadius/2) |
|
||||||
.attr("dy", "0.35em") |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
////////////////////// Draw outer arcs ///////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
var arcs = g.append("g") |
|
||||||
.attr("class", "arcs") |
|
||||||
.selectAll("g") |
|
||||||
.data(function(s) { |
|
||||||
return s.groups |
|
||||||
}) |
|
||||||
.enter().append("g") |
|
||||||
.attr("class", "arc-wrapper") |
|
||||||
.each(function(d) { |
|
||||||
d.pullOutSize = (pullOutSize * ( d.startAngle > Math.PI + 1e-2 ? -1 : 1)) |
|
||||||
}) |
|
||||||
.on("mouseover", function(d) { |
|
||||||
|
|
||||||
//Hide all other arcs |
|
||||||
d3.selectAll(".arc-wrapper") |
|
||||||
.transition() |
|
||||||
.style("opacity", function(s) { return s.outername === d.outername ? 1 : 0.5 }) |
|
||||||
|
|
||||||
//Hide all other strings |
|
||||||
d3.selectAll(".string") |
|
||||||
.transition() |
|
||||||
.style("opacity", function(s) { return s.outer.outername === d.outername ? 1 : fadeOpacity }) |
|
||||||
|
|
||||||
//Find the data for the strings of the hovered over location |
|
||||||
var locationData = loom(dataAgg).filter(function(s) { return s.outer.outername === d.outername }) |
|
||||||
//Hide the characters who haven't said a word |
|
||||||
d3.selectAll(".inner-label") |
|
||||||
.transition() |
|
||||||
.style("opacity", function(s) { |
|
||||||
//Find out how many words the character said at the hovered over location |
|
||||||
var char = locationData.filter(function(c) { return c.outer.innername === s.name }) |
|
||||||
return char.length === 0 ? 0.1 : 1 |
|
||||||
}) |
|
||||||
}) |
|
||||||
.on("mouseout", function(d) { |
|
||||||
|
|
||||||
//Sjow all arc labels |
|
||||||
d3.selectAll(".arc-wrapper") |
|
||||||
.transition() |
|
||||||
.style("opacity", 1) |
|
||||||
|
|
||||||
//Show all strings again |
|
||||||
d3.selectAll(".string") |
|
||||||
.transition() |
|
||||||
.style("opacity", defaultOpacity) |
|
||||||
|
|
||||||
//Show all characters again |
|
||||||
d3.selectAll(".inner-label") |
|
||||||
.transition() |
|
||||||
.style("opacity", 1) |
|
||||||
}) |
|
||||||
|
|
||||||
var outerArcs = arcs.append("path") |
|
||||||
.attr("class", "arc") |
|
||||||
//.style("fill", function(d) { return color(d.outer.innername) }) |
|
||||||
.attr("d", arc) |
|
||||||
.attr("transform", function(d, i) { //Pull the two slices apart |
|
||||||
return "translate(" + d.pullOutSize + ',' + 0 + ")" |
|
||||||
}) |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
//////////////////// Draw outer labels ///////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
//The text needs to be rotated with the offset in the clockwise direction |
|
||||||
var outerLabels = arcs.append("g") |
|
||||||
.each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2) }) |
|
||||||
.attr("class", "outer-labels") |
|
||||||
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null }) |
|
||||||
.attr("transform", function(d,i) { |
|
||||||
var c = arc.centroid(d) |
|
||||||
return "translate(" + (c[0] + d.pullOutSize) + "," + c[1] + ")" |
|
||||||
+ "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" |
|
||||||
+ "translate(" + 26 + ",0)" |
|
||||||
+ (d.angle > Math.PI ? "rotate(180)" : "") |
|
||||||
}) |
|
||||||
|
|
||||||
//The outer name |
|
||||||
outerLabels.append("text") |
|
||||||
.attr("class", "outer-label") |
|
||||||
.attr("dy", ".35em") |
|
||||||
.text(function(d,i){ return d.outername }) |
|
||||||
|
|
||||||
//The value below it |
|
||||||
outerLabels.append("text") |
|
||||||
.attr("class", "outer-label-value") |
|
||||||
.attr("dy", "1.5em") |
|
||||||
.text(function(d,i){ return 'Rel.:' + numFormat(d.value) + '%'}) |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
////////////////// Draw inner strings ////////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
var strings = g.append("g") |
|
||||||
.attr("class", "stringWrapper") |
|
||||||
.style("isolation", "isolate") |
|
||||||
.selectAll("path") |
|
||||||
.data(function(strings) { |
|
||||||
return strings |
|
||||||
}) |
|
||||||
.enter().append("path") |
|
||||||
.attr("class", "string") |
|
||||||
.style("mix-blend-mode", "multiply") |
|
||||||
.attr("d", string) |
|
||||||
.style("fill", function(d) { |
|
||||||
return d3.rgb( color(d.outer.outercolor) ).brighter(0.2) |
|
||||||
}) |
|
||||||
.style("opacity", defaultOpacity) |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
//////////////////// Draw inner labels ///////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
//The text also needs to be displaced in the horizontal directions |
|
||||||
//And also rotated with the offset in the clockwise direction |
|
||||||
var innerLabels = g.append("g") |
|
||||||
.attr("class","inner-labels") |
|
||||||
.selectAll("text") |
|
||||||
.data(function(s) { |
|
||||||
return s.innergroups |
|
||||||
}) |
|
||||||
.enter().append("text") |
|
||||||
.attr("class", "inner-label") |
|
||||||
.attr("x", function(d,i) { return d.x }) |
|
||||||
.attr("y", function(d,i) { return d.y }) |
|
||||||
.style("text-anchor", "middle") |
|
||||||
.attr("dy", ".35em") |
|
||||||
.text(function(d,i) { return d.name }) |
|
||||||
.on("mouseover", function(d) { |
|
||||||
|
|
||||||
//Show all the strings of the highlighted character and hide all else |
|
||||||
d3.selectAll(".string") |
|
||||||
.transition() |
|
||||||
.style("opacity", function(s) { |
|
||||||
return s.outer.innername !== d.name ? fadeOpacity : 1 |
|
||||||
}) |
|
||||||
|
|
||||||
//Update the word count of the outer labels |
|
||||||
var characterData = loom(dataAgg).filter(function(s) { return s.outer.innername === d.name }) |
|
||||||
d3.selectAll(".outer-label-value") |
|
||||||
.text(function(s,i){ |
|
||||||
//Find which characterData is the correct one based on location |
|
||||||
var loc = characterData.filter(function(c) { return c.outer.outername === s.outername }) |
|
||||||
if(loc.length === 0) { |
|
||||||
var value = 0 |
|
||||||
} else { |
|
||||||
var value = loc[0].outer.value |
|
||||||
} |
|
||||||
return numFormat(value) + (value === 1 ? " Imp." : " Imp.") |
|
||||||
|
|
||||||
}) |
|
||||||
|
|
||||||
//Hide the arc where the character hasn't said a thing |
|
||||||
d3.selectAll(".arc-wrapper") |
|
||||||
.transition() |
|
||||||
.style("opacity", function(s) { |
|
||||||
//Find which characterData is the correct one based on location |
|
||||||
var loc = characterData.filter(function(c) { return c.outer.outername === s.outername }) |
|
||||||
return loc.length === 0 ? 0.1 : 1 |
|
||||||
}) |
|
||||||
|
|
||||||
|
|
||||||
}) |
|
||||||
.on("mouseout", function(d) { |
|
||||||
|
|
||||||
//Put the string opacity back to normal |
|
||||||
d3.selectAll(".string") |
|
||||||
.transition() |
|
||||||
.style("opacity", defaultOpacity) |
|
||||||
|
|
||||||
//Return the word count to what it was |
|
||||||
d3.selectAll(".outer-label-value") |
|
||||||
.text(function(s,i){ return 'Imp.: ' + numFormat(s.value) }) |
|
||||||
|
|
||||||
//Show all arcs again |
|
||||||
d3.selectAll(".arc-wrapper") |
|
||||||
.transition() |
|
||||||
.style("opacity", 1) |
|
||||||
|
|
||||||
//Hide the title |
|
||||||
d3.selectAll(".texts") |
|
||||||
.transition() |
|
||||||
.style("opacity", 0) |
|
||||||
|
|
||||||
}) |
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
///////////////////// Extra functions ////////////////////// |
|
||||||
//////////////////////////////////////////////////////////// |
|
||||||
|
|
||||||
//Sort alphabetically |
|
||||||
function sortAlpha(a, b){ |
|
||||||
if(a < b) return -1 |
|
||||||
if(a > b) return 1 |
|
||||||
return 0 |
|
||||||
}//sortAlpha |
|
||||||
|
|
||||||
//Sort on the number of words |
|
||||||
function sortWords(a, b){ |
|
||||||
if(a.words < b.words) return -1 |
|
||||||
if(a.words > b.words) return 1 |
|
||||||
return 0 |
|
||||||
}//sortWords |
|
||||||
|
|
||||||
/*Taken from http://bl.ocks.org/mbostock/7555321 |
|
||||||
//Wraps SVG text*/ |
|
||||||
function wrap(text, width) { |
|
||||||
text.each(function() { |
|
||||||
var text = d3.select(this), |
|
||||||
words = text.text().split(/\s+/).reverse(), |
|
||||||
word, |
|
||||||
line = [], |
|
||||||
lineNumber = 0, |
|
||||||
lineHeight = 1.2, // ems |
|
||||||
y = parseFloat(text.attr("y")), |
|
||||||
x = parseFloat(text.attr("x")), |
|
||||||
dy = parseFloat(text.attr("dy")), |
|
||||||
tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em") |
|
||||||
|
|
||||||
while (word = words.pop()) { |
|
||||||
line.push(word) |
|
||||||
tspan.text(line.join(" ")) |
|
||||||
if (tspan.node().getComputedTextLength() > width) { |
|
||||||
line.pop() |
|
||||||
tspan.text(line.join(" ")) |
|
||||||
line = [word] |
|
||||||
tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
}//wrap |
|
||||||
} |
|
||||||
}, |
|
||||||
sortObject (obj, classifierID, ClassName) { |
|
||||||
var arr = [] |
|
||||||
for (var prop in obj) { |
|
||||||
if (Object.prototype.hasOwnProperty.call(obj, prop)) { |
|
||||||
//if ((this.LimitFeatureImportance/100) < Math.abs(obj[prop])) { |
|
||||||
arr.push({ |
|
||||||
'feature': 'F ' + prop, |
|
||||||
'classifier': 'M ' + classifierID, |
|
||||||
'class': ClassName, |
|
||||||
'importancerate': Math.abs(Math.round(obj[prop] * 100)) |
|
||||||
}) |
|
||||||
//} |
|
||||||
} |
|
||||||
} |
|
||||||
arr = arr.sort(function (a, b) { return Math.abs(b.ImportanceValue - a.ImportanceValue) }) |
|
||||||
return arr |
|
||||||
}, |
|
||||||
ObjectSize (obj) { |
|
||||||
let size = 0 |
|
||||||
let key |
|
||||||
for (key in obj) { |
|
||||||
if (Object.prototype.hasOwnProperty.call(obj, key)) size++ |
|
||||||
} |
|
||||||
return size |
|
||||||
}, |
|
||||||
reset () { |
|
||||||
d3.selectAll("#chart > *").remove(); |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
EventBus.$on('emittedEventCallingChordView', data => { this.AllResults = data }) |
|
||||||
EventBus.$on('emittedEventCallingChordView', this.StretchChord) |
|
||||||
EventBus.$emit('resetViews', this.reset) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
||||||
<style scoped> |
|
||||||
html { font-size: 62.5%; } |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: 'Cormorant', serif; |
|
||||||
font-size: 1.2rem; |
|
||||||
fill: #b9b9b9; |
|
||||||
} |
|
||||||
|
|
||||||
.lotr-content-wrapper { |
|
||||||
max-width: 900px; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
#lotr-title { |
|
||||||
font-size: 42px; |
|
||||||
font-weight: 300; |
|
||||||
margin: 40px 30px 0px 30px; |
|
||||||
color: #272727; |
|
||||||
} |
|
||||||
|
|
||||||
#lotr-subtitle { |
|
||||||
font-size: 14px; |
|
||||||
color: #b1b1b1; |
|
||||||
margin: 0px 30px 20px 30px; |
|
||||||
font-weight: 300; |
|
||||||
} |
|
||||||
|
|
||||||
#lotr-intro { |
|
||||||
font-size: 16px; |
|
||||||
margin: 0px 30px 10px 30px; |
|
||||||
max-width: 800px; |
|
||||||
} |
|
||||||
|
|
||||||
#lotr-note { |
|
||||||
font-size: 14px; |
|
||||||
margin: 0px 30px 10px 30px; |
|
||||||
max-width: 800px; |
|
||||||
color: #b1b1b1; |
|
||||||
font-weight: 300; |
|
||||||
} |
|
||||||
|
|
||||||
#chart { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
#lotr-credit { |
|
||||||
font-size: 14px; |
|
||||||
margin: 10px 30px 5px 30px; |
|
||||||
} |
|
||||||
|
|
||||||
#lotr-sources { |
|
||||||
font-size: 11px; |
|
||||||
max-width: 300px; |
|
||||||
margin: 15px 30px 5px 30px; |
|
||||||
color: #9e9e9e; |
|
||||||
font-weight: 300; |
|
||||||
padding-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
a:hover { |
|
||||||
text-decoration: none; |
|
||||||
border-bottom: 1px solid black; |
|
||||||
} |
|
||||||
|
|
||||||
a, a:link, a:visited, a:active { |
|
||||||
text-decoration: none; |
|
||||||
color: black; |
|
||||||
border-bottom: 1px dotted rgba(0, 0, 0, .5); |
|
||||||
} |
|
||||||
|
|
||||||
.MiddleEarth { |
|
||||||
font-family: 'Macondo', cursive; |
|
||||||
color: #53821a; |
|
||||||
} |
|
||||||
|
|
||||||
/*--- chart ---*/ |
|
||||||
|
|
||||||
.name-title { |
|
||||||
font-family: 'Macondo Swash Caps', cursive; |
|
||||||
font-size: 2.8rem; |
|
||||||
fill: #232323; |
|
||||||
cursor: default; |
|
||||||
text-anchor: middle; |
|
||||||
} |
|
||||||
|
|
||||||
.value-title { |
|
||||||
text-anchor: middle; |
|
||||||
font-size: 1.8rem; |
|
||||||
fill: #b9b9b9; |
|
||||||
} |
|
||||||
|
|
||||||
.character-note { |
|
||||||
text-anchor: middle; |
|
||||||
font-size: 1.4rem; |
|
||||||
fill: #232323; |
|
||||||
} |
|
||||||
|
|
||||||
.inner-label { |
|
||||||
font-family: 'Macondo Swash Caps', cursive; |
|
||||||
font-size: 1.4rem; |
|
||||||
fill: #232323; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
.outer-label { |
|
||||||
font-family: 'Macondo', cursive; |
|
||||||
font-size: 1.6rem; |
|
||||||
fill: #5f5f5f; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
.outer-label-value { |
|
||||||
font-size: 1.2rem; |
|
||||||
fill: #b9b9b9; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -0,0 +1,70 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div id="toggles" style="visibility:hidden"> |
||||||
|
Univariate Selection:<input type="checkbox" id="toggle-uni" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small"> |
||||||
|
Permutation Importance:<input type="checkbox" id="toggle-per" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small"> |
||||||
|
Feature Accuracy Importance:<input type="checkbox" id="toggle-fi" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
import $ from 'jquery' |
||||||
|
import { bootstrapToggle } from 'bootstrap-toggle' |
||||||
|
import 'bootstrap-toggle/css/bootstrap-toggle.css' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'ToggleSelection', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
ToggleSelection () { |
||||||
|
}, |
||||||
|
ToggleShow () { |
||||||
|
document.getElementById('toggles').style.visibility = "visible" |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
$('#toggle-uni').bootstrapToggle({ |
||||||
|
on: 'Enabled', |
||||||
|
off: 'Disabled' |
||||||
|
}); |
||||||
|
$('#toggle-uni').change(function() { |
||||||
|
var toggleID = document.getElementById('toggle-uni') |
||||||
|
if (toggleID.checked === false) { |
||||||
|
EventBus.$emit('toggle1', 0) |
||||||
|
} else { |
||||||
|
EventBus.$emit('toggle1', 1) |
||||||
|
} |
||||||
|
}) |
||||||
|
$('#toggle-per').bootstrapToggle({ |
||||||
|
on: 'Enabled', |
||||||
|
off: 'Disabled' |
||||||
|
}); |
||||||
|
$('#toggle-per').change(function() { |
||||||
|
var toggleID = document.getElementById('toggle-per') |
||||||
|
if (toggleID.checked === false) { |
||||||
|
EventBus.$emit('toggle2', 0) |
||||||
|
} else { |
||||||
|
EventBus.$emit('toggle2', 1) |
||||||
|
} |
||||||
|
}) |
||||||
|
$('#toggle-fi').bootstrapToggle({ |
||||||
|
on: 'Enabled', |
||||||
|
off: 'Disabled' |
||||||
|
}); |
||||||
|
$('#toggle-fi').change(function() { |
||||||
|
var toggleID = document.getElementById('toggle-fi') |
||||||
|
if (toggleID.checked === false) { |
||||||
|
EventBus.$emit('toggle3', 0) |
||||||
|
} else { |
||||||
|
EventBus.$emit('toggle3', 1) |
||||||
|
} |
||||||
|
}) |
||||||
|
EventBus.$on('emittedEventCallingToggles', this.ToggleShow) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue