ldavis2019/ldavis.js
// dynamically create the topic and lambda input forms at the top of the page:
dynamically create the topic and lambda input forms at the top of the page.
dynamically create the topic and lambda input forms at the top of the page .
function init_forms(topicID, lambdaID, visID) {
	    var inputDiv = document.createElement("div");
	    inputDiv.setAttribute("id", "top");
	    inputDiv.setAttribute("style", "width: 1210px"); 
	    document.getElementById(visID).appendChild(inputDiv);
	    var topicDiv = document.createElement("div");
	    topicDiv.setAttribute("style", "padding: 5px; background-color: #e8e8e8; display: inline-block; width: " + mdswidth + "px; height: 50px; float: left");
	    inputDiv.appendChild(topicDiv);
            var topicLabel = document.createElement("label");
            topicLabel.setAttribute("for", topicID);
            topicLabel.setAttribute("style", "font-family: sans-serif; font-size: 14px");
            topicLabel.innerHTML = "Selected Topic: <span id='" + topicID + "-value'></span>";
            topicDiv.appendChild(topicLabel);
            var topicInput = document.createElement("input");
            topicInput.setAttribute("style", "width: 50px");
            topicInput.type = "text";
            topicInput.min = "0";
            topicInput.max = K; 
            topicInput.step = "1";
            topicInput.value = "0"; 
            topicInput.id = topicID;
            topicDiv.appendChild(topicInput);
 	    var previous = document.createElement("button");
	    previous.setAttribute("id", topicDown);
	    previous.setAttribute("style", "margin-left: 5px");
	    previous.innerHTML = "Previous Topic";
            topicDiv.appendChild(previous);
	    var next = document.createElement("button");
	    next.setAttribute("id", topicUp);
	    next.setAttribute("style", "margin-left: 5px");
	    next.innerHTML = "Next Topic";
            topicDiv.appendChild(next);
	    var clear = document.createElement("button");
	    clear.setAttribute("id", topicClear);
	    clear.setAttribute("style", "margin-left: 5px");
	    clear.innerHTML = "Clear Topic";
            topicDiv.appendChild(clear);
    	    var lambdaDivWidth = barwidth;
    	    var lambdaDiv = document.createElement("div");
    	    lambdaDiv.setAttribute("id", "lambdaInput");
    	    lambdaDiv.setAttribute("style", "padding: 5px; background-color: #e8e8e8; display: inline-block; height: 50px; width: " + lambdaDivWidth + "px; float: right; margin-right: 30px");
    	    inputDiv.appendChild(lambdaDiv);
    	    var lambdaZero = document.createElement("div");
    	    lambdaZero.setAttribute("style", "padding: 5px; height: 20px; width: 220px; font-family: sans-serif; float: left");
	    lambdaZero.setAttribute("id", "lambdaZero");
    	    lambdaDiv.appendChild(lambdaZero);
	    var xx = d3.select("#lambdaZero")
		.append("text")
		.attr("x", 0)
		.attr("y", 0)
		.style("font-size", "14px")
		.text("Slide to adjust relevance metric:");
	    var yy = d3.select("#lambdaZero")
		.append("text")
		.attr("x", 125)
		.attr("y", -5)
		.style("font-size", "10px")
		.style("position", "absolute")
		.text("(2)");
    	    var sliderDiv = document.createElement("div");
    	    sliderDiv.setAttribute("id", "sliderdiv");
    	    sliderDiv.setAttribute("style", "padding: 5px; height: 40px; width: 250px; float: right; margin-top: -5px; margin-right: 10px");
    	    lambdaDiv.appendChild(sliderDiv);
            var lambdaInput = document.createElement("input");
            lambdaInput.setAttribute("style", "width: 250px; margin-left: 0px; margin-right: 0px");
            lambdaInput.type = "range";
            lambdaInput.min = 0;
            lambdaInput.max = 1;
            lambdaInput.step = data['lambda.step'];
            lambdaInput.value = vis_state.lambda;
            lambdaInput.id = lambdaID;
	    lambdaInput.setAttribute("list", "ticks"); 
            sliderDiv.appendChild(lambdaInput);
            var lambdaLabel = document.createElement("label");
	    lambdaLabel.setAttribute("id", "lamlabel");
            lambdaLabel.setAttribute("for", lambdaID);
	    lambdaLabel.setAttribute("style", "height: 20px; width: 60px; font-family: sans-serif; font-size: 14px; margin-left: 80px");
	    lambdaLabel.innerHTML = "&#955 = <span id='" + lambdaID + "-value'>" + vis_state.lambda + "</span>";
            lambdaDiv.appendChild(lambdaLabel);
	    var scaleContainer = d3.select("#sliderdiv").append("svg")
		.attr("width", 250)
		.attr("height", 25);
            var sliderScale = d3.scale.linear()
		.domain([0, 1])
		.range([7.5, 242.5])  
		.nice();
            var sliderAxis = d3.svg.axis()
		.scale(sliderScale)
		.orient("bottom")
		.tickSize(10)
		.tickSubdivide(true)
		.ticks(6);
	    var sliderAxisGroup = scaleContainer.append("g")
		.attr("class", "slideraxis")
		.attr("margin-top", "-10px")
		.call(sliderAxis);
        }
function init_forms ( topicID , lambdaID , visID ) { var inputDiv = document . createElement ( "div" ) ; inputDiv . setAttribute ( "id" , "top" ) ; inputDiv . setAttribute ( "style" , "width: 1210px" ) ; document . getElementById ( visID ) . appendChild ( inputDiv ) ; var topicDiv = document . createElement ( "div" ) ; topicDiv . setAttribute ( "style" , "padding: 5px; background-color: #e8e8e8; display: inline-block; width: " + mdswidth + "px; height: 50px; float: left" ) ; inputDiv . appendChild ( topicDiv ) ; var topicLabel = document . createElement ( "label" ) ; topicLabel . setAttribute ( "for" , topicID ) ; topicLabel . setAttribute ( "style" , "font-family: sans-serif; font-size: 14px" ) ; topicLabel . innerHTML = "Selected Topic: <span id='" + topicID + "-value'></span>" ; topicDiv . appendChild ( topicLabel ) ; var topicInput = document . createElement ( "input" ) ; topicInput . setAttribute ( "style" , "width: 50px" ) ; topicInput . type = "text" ; topicInput . min = "0" ; topicInput . max = K ; topicInput . step = "1" ; topicInput . value = "0" ; topicInput . id = topicID ; topicDiv . appendChild ( topicInput ) ; var previous = document . createElement ( "button" ) ; previous . setAttribute ( "id" , topicDown ) ; previous . setAttribute ( "style" , "margin-left: 5px" ) ; previous . innerHTML = "Previous Topic" ; topicDiv . appendChild ( previous ) ; var next = document . createElement ( "button" ) ; next . setAttribute ( "id" , topicUp ) ; next . setAttribute ( "style" , "margin-left: 5px" ) ; next . innerHTML = "Next Topic" ; topicDiv . appendChild ( next ) ; var clear = document . createElement ( "button" ) ; clear . setAttribute ( "id" , topicClear ) ; clear . setAttribute ( "style" , "margin-left: 5px" ) ; clear . innerHTML = "Clear Topic" ; topicDiv . appendChild ( clear ) ; var lambdaDivWidth = barwidth ; var lambdaDiv = document . createElement ( "div" ) ; lambdaDiv . setAttribute ( "id" , "lambdaInput" ) ; lambdaDiv . setAttribute ( "style" , "padding: 5px; background-color: #e8e8e8; display: inline-block; height: 50px; width: " + lambdaDivWidth + "px; float: right; margin-right: 30px" ) ; inputDiv . appendChild ( lambdaDiv ) ; var lambdaZero = document . createElement ( "div" ) ; lambdaZero . setAttribute ( "style" , "padding: 5px; height: 20px; width: 220px; font-family: sans-serif; float: left" ) ; lambdaZero . setAttribute ( "id" , "lambdaZero" ) ; lambdaDiv . appendChild ( lambdaZero ) ; var xx = d3 . select ( "#lambdaZero" ) . append ( "text" ) . attr ( "x" , 0 ) . attr ( "y" , 0 ) . style ( "font-size" , "14px" ) . text ( "Slide to adjust relevance metric:" ) ; var yy = d3 . select ( "#lambdaZero" ) . append ( "text" ) . attr ( "x" , 125 ) . attr ( "y" , - 5 ) . style ( "font-size" , "10px" ) . style ( "position" , "absolute" ) . text ( "(2)" ) ; var sliderDiv = document . createElement ( "div" ) ; sliderDiv . setAttribute ( "id" , "sliderdiv" ) ; sliderDiv . setAttribute ( "style" , "padding: 5px; height: 40px; width: 250px; float: right; margin-top: -5px; margin-right: 10px" ) ; lambdaDiv . appendChild ( sliderDiv ) ; var lambdaInput = document . createElement ( "input" ) ; lambdaInput . setAttribute ( "style" , "width: 250px; margin-left: 0px; margin-right: 0px" ) ; lambdaInput . type = "range" ; lambdaInput . min = 0 ; lambdaInput . max = 1 ; lambdaInput . step = data [ 'lambda.step' ] ; lambdaInput . value = vis_state . lambda ; lambdaInput . id = lambdaID ; lambdaInput . setAttribute ( "list" , "ticks" ) ; sliderDiv . appendChild ( lambdaInput ) ; var lambdaLabel = document . createElement ( "label" ) ; lambdaLabel . setAttribute ( "id" , "lamlabel" ) ; lambdaLabel . setAttribute ( "for" , lambdaID ) ; lambdaLabel . setAttribute ( "style" , "height: 20px; width: 60px; font-family: sans-serif; font-size: 14px; margin-left: 80px" ) ; lambdaLabel . innerHTML = "&#955 = <span id='" + lambdaID + "-value'>" + vis_state . lambda + "</span>" ; lambdaDiv . appendChild ( lambdaLabel ) ; var scaleContainer = d3 . select ( "#sliderdiv" ) . append ( "svg" ) . attr ( "width" , 250 ) . attr ( "height" , 25 ) ; var sliderScale = d3 . scale . linear ( ) . domain ( [ 0 , 1 ] ) . range ( [ 7.5 , 242.5 ] ) . nice ( ) ; var sliderAxis = d3 . svg . axis ( ) . scale ( sliderScale ) . orient ( "bottom" ) . tickSize ( 10 ) . tickSubdivide ( true ) . ticks ( 6 ) ; var sliderAxisGroup = scaleContainer . append ( "g" ) . attr ( "class" , "slideraxis" ) . attr ( "margin-top" , "-10px" ) . call ( sliderAxis ) ; }
dynamically create the topic and lambda input forms at the top of the page:
dynamically create the topic and lambda input forms at the top of the page :
// create container div for topic and lambda input: // to match the width of the main svg element // topic input container: // assumes the data has already been read in // a value of 0 indicates no topic is selected // lambda inputs //var lambdaDivLeft = 8 + mdswidth + margin.left + termwidth; // to enable automatic ticks (with no labels, see below) // Create the svg to contain the slider scale: // trimmed by 7.5px on each side to match the input type=range slider: // adapted from http://bl.ocks.org/mbostock/1166403 // group to contain the elements of the slider axis: // Another strategy for tick marks on the slider; simpler, but not labels // var sliderTicks = document.createElement("datalist"); // sliderTicks.setAttribute("id", "ticks"); // for (var tick = 0; tick <= 10; tick++) { // 	var tickOption = document.createElement("option"); // 	//tickOption.value = tick/10; // 	tickOption.innerHTML = tick/10; // 	sliderTicks.appendChild(tickOption); // } // append the forms to the containers //lambdaDiv.appendChild(sliderTicks);