$${Shide_border}$$ var flow_variable_if = "top"; if (flow_variable_if === "top") { var is_this_exp_mode = true; } else { var is_this_exp_mode = false; } var node_reached = $${InodeReached}$$ ; var label1 = "$${SLabel1}$$" var label2 = "$${SLabel2}$$"; var labels_line_1 = label1.split(","); var labels_line_2 = label2.split(","); var param = labels_line_1.length; var nodes = d3.range(param); var edges = d3.range(param-1); function progress (integero, expert_mode) { var progress = []; var progress_line =[]; var current = []; for(i; i < $${SnumComponent}$$; i++){ progress.push(false); current.push(false); if(i != $${SnumComponent}$$-1){ progress_line.push(false); } } console.log("in func progress:", progress, progress_line, current); current [integero] = true; for (i = 0; i < progress.length; i++) { if (i <= integero) { progress[i] = true; }} for (i = 0; i < progress_line.length; i++) { if (i < integero) { progress_line[i] = true; }} var optionals = [false,false,false]; var optionals_line = [false,false,false]; var hide_easy_mode = [false,false,false]; if (integero > 0) { if (! expert_mode) { optionals_line[0] = true; optionals[1] = true; optionals_line[1] = true; } if (expert_mode) { hide_easy_mode[0] = true; hide_easy_mode[1] = true; } } return [progress, progress_line, current, optionals, optionals_line, hide_easy_mode]; } /////////////////////////////////////////////////////////// var list_progress = progress (node_reached, is_this_exp_mode); console.log(list_progress) /////////////////////////////////////////////////////////// var progress = list_progress[0]; var progress_line = list_progress[1]; var current = list_progress[2]; var optionals = list_progress[3]; var optionals_line = list_progress[4]; var hide_easy_mode = list_progress[5]; var yellow_string = "rgb(255,216,60)" var local_workspace_path = "$${SImage}$$"; //var local_workspace_path = "img/logo.png"; //var size_circles = 1.05; var fixed_width_nodes = 20; var line_thickness = 3; var size_circles_y = 13.3; var perc_occupied = 90; var step_size = perc_occupied/(param-1) var perc_sides = (100-perc_occupied)/2 var opacity_param = 0.75; //
// //

Select File for Machine Learning

//
var the_div = d3.select("body") .append("div") .classed("automl_header",true); //the_div.append("img") //.attr("class","logo") //.attr("src",local_workspace_path); var my_svg = the_div.append("div") .classed("svg_container",true) .append("svg"); var targetWidth_out = parseInt(d3.select("div.svg_container").style("width")); var span_rects = fixed_width_nodes/targetWidth_out*100; my_svg.attr("width","100%") .attr("height","150px") .call(responsivefy); var dots = my_svg .selectAll("rect") .data(nodes); var lines = my_svg .selectAll("line") .data(edges); lines.enter() .append("line") .classed("connect",true) .attr("y1", "50%") .attr("y2", "50%") .attr("x1", (d,i)=>String(perc_sides+i*step_size)+"%") .attr("x2", (d,i)=>String(perc_sides+(i+1)*step_size)+"%") .attr("stroke-width", line_thickness) .attr("stroke", function (d,i) { if (progress_line[i]) {return yellow_string} return "lightgrey"}); lines.enter() .append("line") .classed("hide_connect",true) .attr("y1", "50%") .attr("y2", "50%") .attr("x1", (d,i)=>String(perc_sides+i*step_size)+"%") .attr("x2", (d,i)=>String(perc_sides+(i+1)*step_size)+"%") .attr("stroke-width", line_thickness) .attr("stroke","#666666") .attr("opacity",function(d,i){ if (optionals_line[i]) { return opacity_param } return 0 }); dots.enter() .append("rect") .classed("nodes",true) .attr("y", "36.5%") .attr("x", (d,i)=>String(perc_sides+i*step_size-span_rects)+"%") .attr("width", String(fixed_width_nodes*2)+"") .attr("height", String(size_circles_y*2)+"%") .attr("rx",6) .attr("ry",6) .attr("fill", function (d,i) { if (progress[i]) { if (current[i]) {return "#666666"} return yellow_string} return "lightgrey"}) .attr("stroke", function (d,i) { if (current[i]) {return yellow_string} return "none"}) .attr("stroke-width", line_thickness); dots.enter() .append("text") .attr("y", "76%") .attr("x", (d,i)=>String(perc_sides+i*step_size)+"%") .attr("text-anchor","middle") .text((d,i)=>String(labels_line_1[i])); dots.enter() .append("text") .attr("y", "87%") .attr("x", (d,i)=>String(perc_sides+i*step_size)+"%") .attr("text-anchor","middle") .text((d,i)=>String(labels_line_2[i])); dots.enter() .append("rect") .classed("hide_nodes",true) .attr("y", "36.5%") .attr("x", (d,i)=>String(perc_sides+i*step_size-span_rects)+"%") .attr("width", String(fixed_width_nodes*2)+"") .attr("height", String(size_circles_y*2)+"%") .attr("fill", "#666666") .attr("opacity",function(d,i){ if (optionals[i]) { return opacity_param } return 0 }); dots.enter() .append("rect") .classed("hide_text",true) .attr("y", "68%") .attr("x", (d,i)=>String(perc_sides+i*step_size-step_size/2)+"%") .attr("width", String(step_size)+"%") .attr("height", "22%") .attr("fill", "#666666") .attr("opacity",function(d,i){ if (optionals[i]) { return opacity_param; } return 0; }); // found at https://brendansudol.com/writing/responsive-d3 function responsivefy(svg) { // get container + svg aspect ratio var container = d3.select(svg.node().parentNode), width = parseInt(svg.style("width")), height = parseInt(svg.style("height")), aspect = width / height; // add viewBox and preserveAspectRatio properties, // and call resize so that svg resizes on inital page load svg.attr("viewBox", "0 0 " + width + " " + height) .attr("preserveAspectRatio", "xMinYMid") .call(resize); d3.select(window).on("resize." + container.attr("id"), resize); // get width of container and resize svg to fit it function resize() { var targetWidth = parseInt(container.style("width")); svg.attr("width", targetWidth); //svg.attr("height", Math.round(targetWidth / aspect)); } }