Uni COP

forked from anonymous's block: fresh block

<!DOCTYPE html>
<html>

<form name="Filter" action="javascript:void(0)">
   <label><input type="radio" id="jc" name="enrol" value="jc" onchange="displayQuestion(this.value)" />JC</label>
   <label><input type="radio" id="poly" name="enrol" value="poly" onchange="displayQuestion(this.value)" />Poly</label>
   <label><input type="radio" id="others" name="enrol" value="others" onchange="displayQuestion(this.value)" />Others</label>
   
   <div id="jcOption" style="display:none;">
   <label>JC COP: </label><input type="text" id="jFilter" placeholder="Enter your UAT">
   <br />
   <label><input type="radio" name="path" value="arts">Arts</label>
   <label><input type="radio" name="path" value="science">Science</label>
   <label><input type="radio" name="path" value="both">Both</label>
   </div>
   
   <div id="polyOption" style="display:none;">
   <label>Poly COP: </label><input type="text" id="pFilter" placeholder="Enter your COP">
   </div>
   
   <div id="othersOption" style="display:none;">
   <label>Working Experienec: </label><input type="text" id="wFilter" placeholder="Enter your Working Experience">
   </div>
   <br />
   <button type="submit" form="form1" onclick="doSomething()" value="Search">Search</button>
</form>

var x = d3.scale.linear()
    .range([0, 2 * Math.PI]);

var y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]);

var color = d3.scale.category20c();

var svg = d3.select("body").append("svg")
    .attr("width", width )
    .attr("height", height )
	.append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");

var partition = d3.layout.partition()
    .value(function(d) { return 1; });

var pFilter = 0
if(!document.getElementById("pFilter").value.match(/\S/)) { pFilter = 4}
else {pFilter = document.getElementById("pFilter").value}

///IMPORT DATA and change data into hierarcial data///
 d3.json("DVtest.json", function(data)
 {

testData = []
	data.forEach(function(d){
	if ( (d.polyCOP != "N/A") && (d.polyCOP <= pFilter)   &&  (d.polyCOP != "#"  ))
	{testData.push(d)}
	});	
	var newData = { name :" ", children : [] },
    levels = ["University","Faculty", "Course"];
	
	// For each data row, loop through the expected levels traversing the output tree
	testData.forEach(function(d){
	
    // Keep this as a reference to the current level
    var depthCursor = newData.children;
    // Go down one level at a time
    levels.forEach(function( property, depth ){

// Look to see if a branch has already been created
        var index;
        depthCursor.forEach(function(child,i){
            if ( d[property] == child.name ) index = i;
        });
        // Add a branch if it isn't there
        if ( isNaN(index) ) {
            depthCursor.push({ name : d[property], children : []});
            index = depthCursor.length - 1;
        }
        // Now reference the new child array as we go deeper into the tree
        depthCursor = depthCursor[index].children;
        // This is a leaf, so add the last element to the specified branch
        if ( depth === levels.length - 1 ) depthCursor.push({ name : "COP =" + d.polyCOP, test: "Course Fees =" + d.CourseFees, test2:"Intake =" + d.Intake, test3:"Interview =" +d.requireInterview});
    });
});

///
  var g = svg.selectAll("g")
      .data(partition.nodes(newData))
    .enter().append("g");

var path = g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .on("click", click);

text.append("tspan")
      .attr("x", 0)
      .text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
  text.append("tspan")
      .attr("x", 0)
      .attr("dy", "1em")
      .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
	text.append("tspan")
      .attr("x", 0)
      .attr("dy", "1em")
      .text(function(d) { return d.depth ? d.name.split(" ")[2] || "" : ""; });
	
	
  function click(d) {
    // fade out all text elements
    text.transition().attr("opacity", 0);

path.transition()
      .duration(750)
      .attrTween("d", arcTween(d))
      .each("end", function(e, i) {
          // check if the animated element's data e lies within the visible angle span given in d
          if (e.x >= d.x && e.x < (d.x + d.dx)) {
            // get a selection of the associated text element
            var arcText = d3.select(this.parentNode).select("text");
            // fade in the text element and recalculate positions
            arcText.transition().duration(750)
              .attr("opacity", 1)
               .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
              .attr("x", function(d) { return y(d.y); });
          }
      });
  }

d3.select(self.frameElement).style("height", height + "px");

// Interpolate the scales!
function arcTween(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
  return function(d, i) {
    return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}

testData = []
	data.forEach(function(d){
	var UserInPut =[];
	var UserInputz =0;
	var filter = [];
	var filterZ = 0;
	var First = d.jcCOP.split("");
	var Second = jFilter.split("");
	
	
	for ( var i = 0; i < 3; i++) 
	{ if (First[i] == "A") {filter.push(1)}
	else if (First[i] == "B") {filter.push(2)}
	else if (First[i] == "C") {filter.push(3)}
	else  {filter.push(4)} 
	}
	
	if (First[4] == "A") {filterZ += 1}
	else if (First[4] == "B") {filterZ += 2}
	else if (First[4] == "C") {filterZ += 3}
	else {filterZ += 4}
	
	for ( var i = 0; i < 3; i++) 
	{ if (Second[i] == "A") {UserInPut.push(1)}
	else if (Second[i] == "B") {UserInPut.push(2)}
	else if (Second[i] == "C") {UserInPut.push(3)}
	else  {UserInPut.push(4)} }
	
	
	if (Second[4] == "A") {UserInputz += 1}
	else if (Second[4] == "B") {UserInputz += 2}
	else if (Second[4] == "C") {UserInputz += 3}
	else {UserInputz += 4}
	
	console.log(UserInputz)
	console.log(UserInPut)
	console.log(filter)

if  (( d.jcCOP != "N/A") && (filter[0] >= UserInPut[0]) && (filter[1] >= UserInPut[1]) && (filter[2] >= UserInPut[2]) && (filterZ >= UserInputz))
	{testData.push(d)}
	});
	
	finalData = []
	testData.forEach(function(d){
	if(d3.select('input[name="path"]:checked').node().value == "arts")
		{
		if( (d.CourseType == "Arts") || (d.CourseType == "Both" )  ){finalData.push(d)}
		else {;} }
			
	else if (d3.select('input[name="path"]:checked').node().value == "science")
	{
	if ((d.CourseType == "Science") || (d.CourseType == "Both") )  
	{finalData.push(d)} 
	else {;}
	}
	
	
	
	else{finalData.push(d)}
	})
	
	
	var newData = { name :"root", children : [] },
    levels = ["University","Faculty", "Course"];
	
	// For each data row, loop through the expected levels traversing the output tree
	finalData.forEach(function(d){
    // Keep this as a reference to the current level
    var depthCursor = newData.children;
    // Go down one level at a time
    levels.forEach(function( property, depth ){

// Look to see if a branch has already been created
        var index;
        depthCursor.forEach(function(child,i){
            if ( d[property] == child.name ) index = i;
        });
        // Add a branch if it isn't there
        if ( isNaN(index) ) {
            depthCursor.push({ name : d[property], children : []});
            index = depthCursor.length - 1;
        }
        // Now reference the new child array as we go deeper into the tree
        depthCursor = depthCursor[index].children;
        // This is a leaf, so add the last element to the specified branch
        if ( depth === levels.length - 1 ) depthCursor.push({ name :  "COP= " + d.jcCOP, test: "Course Fees =" + d.CourseFees, test2:"Intake =" + d.Intake});
    });
});
///
  var g = svg.selectAll("g")
      .data(partition.nodes(newData))
    .enter().append("g");

var path = g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .on("click", click);

text.append("tspan")
      .attr("x", 0)
      .text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
  text.append("tspan")
      .attr("x", 0)
      .attr("dy", "1em")
      .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
	text.append("tspan")
      .attr("x", 0)
      .attr("dy", "1em")
      .text(function(d) { return d.depth ? d.name.split(" ")[2] || "" : ""; });
	  
	
	
  function click(d) {
    // fade out all text elements
    text.transition().attr("opacity", 0);

d3.select(self.frameElement).style("height", height + "px");

testData = []
	data.forEach(function(d){
	if ( (d.WorkExperience != "N/A") && (d.WorkExperience <= wFilter ))
	{testData.push(d);}
	});
	
	var newData = { name :"root", children : [] },
    levels = ["University","Faculty", "Course"];
	
	// For each data row, loop through the expected levels traversing the output tree
	testData.forEach(function(d){
    // Keep this as a reference to the current level
    var depthCursor = newData.children;
    // Go down one level at a time
    levels.forEach(function( property, depth ){

// Look to see if a branch has already been created
        var index;
        depthCursor.forEach(function(child,i){
            if ( d[property] == child.name ) index = i;
        });
        // Add a branch if it isn't there
        if ( isNaN(index) ) {
            depthCursor.push({ name : d[property], children : []});
            index = depthCursor.length - 1;
        }
        // Now reference the new child array as we go deeper into the tree
        depthCursor = depthCursor[index].children;
        // This is a leaf, so add the last element to the specified branch
        if ( depth === levels.length - 1 ) depthCursor.push({ name: "WorkExp= " + d.WorkExperience,  test: "Course Fees=" + d.CourseFees, test2:"Qualification=" + d.Qualificationrequired });
     });
});
///
  var g = svg.selectAll("g")
      .data(partition.nodes(newData))
    .enter().append("g");

var path = g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .on("click", click);

text.append("tspan")
      .attr("x", 0)
      .text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
  text.append("tspan")
      .attr("x", 0)
      .attr("dy", "1em")
      .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
	    text.append("tspan")
      .attr("x", 0)
      .attr("dy", "1em")
      .text(function(d) { return d.depth ? d.name.split(" ")[2] || "" : ""; });

function click(d) {
    // fade out all text elements
    text.transition().attr("opacity", 0);

d3.select(self.frameElement).style("height", height + "px");

function computeTextRotation(d) {
        var ang = (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
        return (ang > 90) ? 180 + ang : ang;
    }
///

});
}
}
 </script>

</body>

</html>

https://d3js.org/d3.v3.min.js