beekimrj/index.html

## index.html
<html>

<head>
    <title> Rectangle </title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="index.js"></script>
    <style>
        rect {
            fill: white;
            stroke: green;
            stroke-width: 2px;
        }

        path {
            fill: none;
            stroke: green;
            stroke-width: 2px;
        }

        text {
            dominant-baseline: middle;
            text-anchor: middle;
        }

        .bigger {
            font-size: 15px;

        }
    </style>
</head>

<body>
    <script>
        var data = [];

        function showtree() {
//             console.log(data)


            var svg = d3.select("#viewpoint").append("svg").attr("width", 900).attr("height", 600)
                .append("g").attr("transform", "translate(50,50)");

            //creating hierarchy using stratify
            var dataStructure = d3.stratify()
                .id(function (d) { return d.child; })
                .parentId(function (d) { return d.parent })
                (data);
            var treeStructure = d3.tree().size([650, 300]);
            var information = treeStructure(dataStructure);
            // console.log(information.descendants()) ;


            var connections = svg.append("g").selectAll("path")
                .data(information.links());

            connections.enter().append("path")
                .attr("d", function (d) {
                    return "M" + d.source.x + "," + d.source.y + "v 50 H" + d.target.x
                        + " V" + d.target.y;
                });

            var rectangles = svg.append("g").selectAll("rect")
                .data(information.descendants());

            rectangles.enter().append("rect")
                .attr("x", function (d) { return d.x - 40; })
                .attr("y", function (d) { return d.y - 20; })
                .attr("width", 80)
                .attr("height", 40)
                .style("fill", function (d) { return (d.data.color) });


            var names = svg.append("g").selectAll("text")
                .data(information.descendants());
            names.enter().append("text")
                .text(function (d) { return d.data.child; })
                .attr("x", function (d) { return d.x })
                .attr("y", function (d) { return d.y })
                .classed("bigger", true);

            // console.log(rectangles);

        }

    </script>

    <input type="text" name="NodeName" id="NodeName" required placeholder="value">
    <select id="sel">
        <option value="">Select its parent</option>
    </select>
<!--     if you want to provide only few  color option, then you can use select option as below-->
    <!-- <select id="col">
        <option value="#000000">Select Color</option>
        <option value="#ff0000">Red</option>
        <option value="#00ff00">Green</option>
        <option value="#0000ff">Blue</option>

    </select> -->
    <input type="color" value="#ff0000" id="col"> select color
    <br>
    <button type="button" onclick="submitting()">Add Next</button>
    <br><br>
    <!-- <button type="button" onclick="showtree()">View Tree</button> -->
    <div id="viewpoint">

    </div>
</body>

</html>

## index.js
 // Collect list of parents
 var parentlist = [];

 function selopt(parent) {

   // To add list of parents in select option
    // get reference to select element
    var sel = document.getElementById('sel');

    // create new option element
    var opt = document.createElement('option');

    // create text node to add to option element (opt)
    opt.appendChild(document.createTextNode(parent));

    // set value property of opt
    opt.value = parent;

    // add opt to end of select box (sel)
    sel.appendChild(opt);

}

// add to parentlist without duplication
function add2parent(node) {
    c = 0; // to check if we have already added root node
    for (i = 0; i < parentlist.length; i++) {
        if (parentlist[i] == node) {
            c = 1
        }
    }
    if (c == 0 && node != "") {
        parentlist.push(node)
        selopt(node)
    }
}


// to add the values to data array
function setnode(node, parent, col) {
    for (i = 0; i < data.length; i++) {
        if (data[i].child == node) {
            alert("same child again")
            return;
        }
    }
    data.push({ "child": node, "parent": parent, "color": col },)
    document.getElementById("viewpoint").innerHTML = "";
    showtree();

}
var checkroot = 0;

function submitting() {

    var e = document.getElementById("sel");
    var strUser = e.options[e.selectedIndex].value;
    var node = document.getElementById("NodeName").value;
 //if root node is added and none is selected, it will show error
    if (checkroot == 1 && strUser == "") {
        alert("please select its parent")
        return
    }
    if (checkroot == 0) {
        checkroot = 1
    }
    document.getElementById("NodeName").value = "";
    document.getElementById("sel").selectedIndex = 0;
    col = document.getElementById("col").value;
    // col = co.options[co.selectedIndex].value;

    add2parent(node)
    setnode(node, strUser, col)
    // alert (col)
    // alert(strUser)
}
	<html>

	<head>
	<title> Rectangle </title>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="index.js"></script>
	<style>
	rect {
	fill: white;
	stroke: green;
	stroke-width: 2px;
	}

	path {
	fill: none;
	stroke: green;
	stroke-width: 2px;
	}

	text {
	dominant-baseline: middle;
	text-anchor: middle;
	}

	.bigger {
	font-size: 15px;

	}
	</style>
	</head>

	<body>
	<script>
	var data = [];

	function showtree() {
	// console.log(data)



	var svg = d3.select("#viewpoint").append("svg").attr("width", 900).attr("height", 600)
	.append("g").attr("transform", "translate(50,50)");

	//creating hierarchy using stratify
	var dataStructure = d3.stratify()
	.id(function (d) { return d.child; })
	.parentId(function (d) { return d.parent })
	(data);
	var treeStructure = d3.tree().size([650, 300]);
	var information = treeStructure(dataStructure);
	// console.log(information.descendants()) ;


	var connections = svg.append("g").selectAll("path")
	.data(information.links());

	connections.enter().append("path")
	.attr("d", function (d) {
	return "M" + d.source.x + "," + d.source.y + "v 50 H" + d.target.x
	+ " V" + d.target.y;
	});

	var rectangles = svg.append("g").selectAll("rect")
	.data(information.descendants());

	rectangles.enter().append("rect")
	.attr("x", function (d) { return d.x - 40; })
	.attr("y", function (d) { return d.y - 20; })
	.attr("width", 80)
	.attr("height", 40)
	.style("fill", function (d) { return (d.data.color) });


	var names = svg.append("g").selectAll("text")
	.data(information.descendants());
	names.enter().append("text")
	.text(function (d) { return d.data.child; })
	.attr("x", function (d) { return d.x })
	.attr("y", function (d) { return d.y })
	.classed("bigger", true);

	// console.log(rectangles);

	}

	</script>

	<input type="text" name="NodeName" id="NodeName" required placeholder="value">
	<select id="sel">
	<option value="">Select its parent</option>
	</select>
	<!-- if you want to provide only few color option, then you can use select option as below-->
	<!-- <select id="col">
	<option value="#000000">Select Color</option>
	<option value="#ff0000">Red</option>
	<option value="#00ff00">Green</option>
	<option value="#0000ff">Blue</option>

	</select> -->
	<input type="color" value="#ff0000" id="col"> select color
	<br>
	<button type="button" onclick="submitting()">Add Next</button>
	<br><br>
	<!-- <button type="button" onclick="showtree()">View Tree</button> -->
	<div id="viewpoint">

	</div>
	</body>

	</html>
	// Collect list of parents
	var parentlist = [];

	function selopt(parent) {

	// To add list of parents in select option
	// get reference to select element
	var sel = document.getElementById('sel');

	// create new option element
	var opt = document.createElement('option');

	// create text node to add to option element (opt)
	opt.appendChild(document.createTextNode(parent));

	// set value property of opt
	opt.value = parent;

	// add opt to end of select box (sel)
	sel.appendChild(opt);

	}

	// add to parentlist without duplication
	function add2parent(node) {
	c = 0; // to check if we have already added root node
	for (i = 0; i < parentlist.length; i++) {
	if (parentlist[i] == node) {
	c = 1
	}
	}
	if (c == 0 && node != "") {
	parentlist.push(node)
	selopt(node)
	}
	}


	// to add the values to data array
	function setnode(node, parent, col) {
	for (i = 0; i < data.length; i++) {
	if (data[i].child == node) {
	alert("same child again")
	return;
	}
	}
	data.push({ "child": node, "parent": parent, "color": col },)
	document.getElementById("viewpoint").innerHTML = "";
	showtree();

	}
	var checkroot = 0;

	function submitting() {

	var e = document.getElementById("sel");
	var strUser = e.options[e.selectedIndex].value;
	var node = document.getElementById("NodeName").value;
	//if root node is added and none is selected, it will show error
	if (checkroot == 1 && strUser == "") {
	alert("please select its parent")
	return
	}
	if (checkroot == 0) {
	checkroot = 1
	}
	document.getElementById("NodeName").value = "";
	document.getElementById("sel").selectedIndex = 0;
	col = document.getElementById("col").value;
	// col = co.options[co.selectedIndex].value;

	add2parent(node)
	setnode(node, strUser, col)
	// alert (col)
	// alert(strUser)
	}