Angelos Chatzimparmpas
4 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