Angelos Chatzimparmpas
5 years ago
parent
e3a4a400b3
commit
08932bb911
Binary file not shown.
@ -0,0 +1 @@ |
|||||||
|
{"duration": 18.56320309638977, "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='brute', metric='euclidean', n_neighbors=96)", "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": "400"}} |
||||||
@ -0,0 +1,361 @@ |
|||||||
|
<template> |
||||||
|
<div id="SankeyInter" style="min-height: 363px;"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as Plotly from 'plotly.js' |
||||||
|
import { EventBus } from '../main.js' |
||||||
|
import { sankey as d3Sankey } from 'd3-sankey' |
||||||
|
import { format as d3Format } from 'd3-format' |
||||||
|
import * as d3Base from 'd3' |
||||||
|
import $ from 'jquery' |
||||||
|
|
||||||
|
// attach all d3 plugins to the d3 library |
||||||
|
const d3v5 = Object.assign(d3Base) |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'History', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
WH: [], |
||||||
|
RandomSearLoc : 100 |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
reset () { |
||||||
|
var svg = d3.select("#SankeyInter"); |
||||||
|
svg.selectAll("*").remove(); |
||||||
|
}, |
||||||
|
SankeyView () { |
||||||
|
var units = "Models"; |
||||||
|
var initialModels = this.RandomSearLoc * 5 |
||||||
|
var months = [{month:"RandSear",value:initialModels,loss:null}, |
||||||
|
{month:"Crossover",value:250,loss:null}, |
||||||
|
{month:"Mutate",value:250,loss:null}]; |
||||||
|
//this is the svg canvas attributes: (not buidlign abything just seeting up varaibels) |
||||||
|
var margin = {top: 40, right: 40, bottom: 40, left: 100}, //comma is the equivalent of var : |
||||||
|
width = 1200 - margin.left - margin.right, |
||||||
|
height = 350 - margin.top - margin.bottom; |
||||||
|
|
||||||
|
var svg = d3.select("#SankeyInter"); |
||||||
|
svg.selectAll("*").remove(); |
||||||
|
|
||||||
|
var formatNumber = d3Format(",.0f"), // zero decimal places |
||||||
|
format = function(d) { return formatNumber(d) + " " + units; } |
||||||
|
var color = d3.scale.category20b() |
||||||
|
|
||||||
|
var startingAxis = this.RandomSearLoc * 6 |
||||||
|
var axisScale = d3.scale.linear() |
||||||
|
.domain([startingAxis,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) |
||||||
|
.attr("height", height + margin.top + margin.bottom) |
||||||
|
.append("g") //group everything on the vancas together. will edit down on ln38 below |
||||||
|
.attr("transform", |
||||||
|
"translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -height + ")"); |
||||||
|
|
||||||
|
// Set the sankey diagram properties |
||||||
|
var sankey = d3Sankey() //calling the function |
||||||
|
.nodeWidth(25) |
||||||
|
.nodePadding(0) |
||||||
|
.size([width, height]); |
||||||
|
|
||||||
|
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":"#e41a1c"}, |
||||||
|
{"name":"RF","node":1,"month":"RandSear","color":"#377eb8"}, |
||||||
|
{"name":"MLP","node":2,"month":"RandSear","color":"#4daf4a"}, |
||||||
|
{"name":"LR","node":3,"month":"RandSear","color":"#984ea3"}, |
||||||
|
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00"}, |
||||||
|
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff"}, |
||||||
|
{"name":"GradB","node":6,"month":"Crossover","color":"#e41a1c"}, |
||||||
|
{"name":"RF","node":7,"month":"Crossover","color":"#377eb8"}, |
||||||
|
{"name":"MLP","node":8,"month":"Crossover","color":"#4daf4a"}, |
||||||
|
{"name":"LR","node":9,"month":"Crossover","color":"#984ea3"}, |
||||||
|
{"name":"KNN","node":10,"month":"Crossover","color":"#ff7f00"}, |
||||||
|
{"name":"Mutate","node":11,"month":"Crossover","color":"#ffffff"}, |
||||||
|
{"name":"GradB","node":12,"month":"Mutate","color":"#e41a1c"}, |
||||||
|
{"name":"RF","node":13,"month":"Mutate","color":"#377eb8"}, |
||||||
|
{"name":"MLP","node":14,"month":"Mutate","color":"#4daf4a"}, |
||||||
|
{"name":"LR","node":15,"month":"Mutate","color":"#984ea3"}, |
||||||
|
{"name":"KNN","node":16,"month":"Mutate","color":"#ff7f00"}, |
||||||
|
{"name":"Crossover","node":17,"month":"Crossover","color":"#ffffff"}, |
||||||
|
], |
||||||
|
|
||||||
|
"links":[ |
||||||
|
{"source":5,"target":11,"value":50}, |
||||||
|
{"source":5,"target":17,"value":50}, |
||||||
|
{"source":0,"target":6,"value":50}, |
||||||
|
{"source":0,"target":12,"value":50}, |
||||||
|
{"source":1,"target":7,"value":50}, |
||||||
|
{"source":1,"target":13,"value":50}, |
||||||
|
{"source":2,"target":8,"value":50}, |
||||||
|
{"source":2,"target":14,"value":50}, |
||||||
|
{"source":3,"target":9,"value":50}, |
||||||
|
{"source":3,"target":15,"value":50}, |
||||||
|
{"source":4,"target":10,"value":50}, |
||||||
|
{"source":4,"target":16,"value":50}, |
||||||
|
]} |
||||||
|
|
||||||
|
sankey.nodes(graph.nodes) |
||||||
|
.links(graph.links) |
||||||
|
.layout(0); |
||||||
|
|
||||||
|
// add in the links |
||||||
|
var link = svg.append("g").selectAll(".link") |
||||||
|
.data(graph.links) |
||||||
|
.enter().append("path") |
||||||
|
.attr("class", "link") |
||||||
|
.attr("d", path) //d??? look it up later |
||||||
|
.style("stroke",function(d){ |
||||||
|
if(d.source.node == 5){ |
||||||
|
return "transparent"; |
||||||
|
}}) |
||||||
|
.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); |
||||||
|
|
||||||
|
// add the link titles |
||||||
|
link.append("svg:title") //this is the mouseover stuff title is an svg element you can use "svg:title" or just "title" |
||||||
|
.text(function(d) { |
||||||
|
return format(d.value); }); |
||||||
|
|
||||||
|
// add in the nodes (creating the groups of the rectanlges) |
||||||
|
var node = svg.append("g").selectAll(".node") |
||||||
|
.data(graph.nodes) |
||||||
|
.enter().append("g") |
||||||
|
.attr("class", "node") |
||||||
|
.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.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 |
||||||
|
// .style("stroke-width",.5) |
||||||
|
.on("mouseover", nodemouseover) |
||||||
|
.on("mouseout", nodemouseout); |
||||||
|
|
||||||
|
node.append("foreignObject") |
||||||
|
.attr("x", 28) |
||||||
|
.attr("y", -21) |
||||||
|
.attr("height", 18) |
||||||
|
.attr("width", 40) |
||||||
|
.attr("transform", "scale(1,-1)") |
||||||
|
.append("xhtml:body") |
||||||
|
.html(function(d) { |
||||||
|
if (d.node > 5 && d.node != 11 && d.node != 17) { |
||||||
|
return '<input id='+d.node+' type="text" value="50" />' |
||||||
|
} |
||||||
|
}); |
||||||
|
// .append("title") |
||||||
|
// .text(function(d) { |
||||||
|
// return d.name + "\n" + format(d.value); }); |
||||||
|
|
||||||
|
// add in the title for the nodes |
||||||
|
node.append("text") |
||||||
|
.attr("x", -6) |
||||||
|
.attr("y", function(d) { |
||||||
|
console.log(d) |
||||||
|
if (d.node <= 5) { |
||||||
|
return d.dy - 70; |
||||||
|
} else { |
||||||
|
return d.dy - 35; |
||||||
|
} |
||||||
|
}) |
||||||
|
.attr("dy", ".35em") |
||||||
|
.attr("text-anchor", "end") |
||||||
|
.attr("transform", "scale(1,-1)") |
||||||
|
.text(function(d) { return d.name.replace(/-.*/, ""); }) |
||||||
|
.style("font-weight", function(d) { |
||||||
|
if (d.node == 5 || d.node == 11 || d.node == 17) { |
||||||
|
return "bold"; |
||||||
|
} |
||||||
|
}) |
||||||
|
.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; |
||||||
|
function nodemouseover(d){ |
||||||
|
|
||||||
|
d3.selectAll(".link") |
||||||
|
.attr("id", function(i){ |
||||||
|
if (i.source.node == d.node || i.target.node == d.node){ |
||||||
|
status="clicked"; |
||||||
|
} else { |
||||||
|
status=null; |
||||||
|
} |
||||||
|
return status; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function nodemouseout(d){ |
||||||
|
d3.selectAll(".link") |
||||||
|
.attr("id", "unclicked"); |
||||||
|
} |
||||||
|
function linkmouseover(d){ |
||||||
|
d3.select(this) |
||||||
|
.attr("stroke-opacity",.5); |
||||||
|
} |
||||||
|
function linkmouseout(d){ |
||||||
|
d3.select(this) |
||||||
|
.attr("stroke-opacity",.05); |
||||||
|
} |
||||||
|
|
||||||
|
//select all of our links and set a new stroke color on the conditioan that the value is =.01. |
||||||
|
d3.selectAll(".link") |
||||||
|
.style("stroke-opacity", function(d){ |
||||||
|
if(d.value == 0.01) return 0; |
||||||
|
}); |
||||||
|
|
||||||
|
//y axis |
||||||
|
svg.append("g") |
||||||
|
.call(yAxis) |
||||||
|
.attr("class", "axis") |
||||||
|
.attr("transform", |
||||||
|
"translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ")"); |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
EventBus.$on('SendtheChangeinRangePos', data => { this.RandomSearLoc = data }) |
||||||
|
|
||||||
|
EventBus.$on('emittedEventCallingSankey', this.SankeyView) |
||||||
|
|
||||||
|
EventBus.$on('Responsive', data => { |
||||||
|
this.WH = data}) |
||||||
|
EventBus.$on('ResponsiveandChange', data => { |
||||||
|
this.WH = data}) |
||||||
|
|
||||||
|
// reset the views |
||||||
|
EventBus.$on('resetViews', this.reset) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
.input { |
||||||
|
width: 35px !important; |
||||||
|
height: 18px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.node text { |
||||||
|
pointer-events: none; |
||||||
|
text-shadow: 0 1px 0 #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.link { |
||||||
|
fill: none; |
||||||
|
stroke: #000; |
||||||
|
stroke-opacity: .05; |
||||||
|
} |
||||||
|
|
||||||
|
.link:hover { |
||||||
|
stroke-opacity: .5; |
||||||
|
} |
||||||
|
|
||||||
|
.node text { |
||||||
|
pointer-events: none; |
||||||
|
text-shadow: 0 1px 0 #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.link { |
||||||
|
fill: none; |
||||||
|
stroke: #000; |
||||||
|
stroke-opacity: .05; |
||||||
|
} |
||||||
|
|
||||||
|
.link:hover { |
||||||
|
stroke-opacity: .5; |
||||||
|
} |
||||||
|
|
||||||
|
#clicked { |
||||||
|
stroke-opacity: .5 !important; |
||||||
|
} |
||||||
|
/* #unclicked { |
||||||
|
stroke-opacity: .05; |
||||||
|
}*/ |
||||||
|
.axis path, |
||||||
|
.axis line { |
||||||
|
fill: none; |
||||||
|
stroke: black; |
||||||
|
shape-rendering: crispEdges; |
||||||
|
margin-left:60px; |
||||||
|
} |
||||||
|
.axis text { |
||||||
|
font-family: sans-serif; |
||||||
|
font-size: 11px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue