updates

SEASVis · Jun 14, 2022 · f86fc5d · f86fc5d
1 parent cc9819e
commit f86fc5d
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 26 deletions.
diff --git a/css/styles_arc.css b/css/styles_arc.css
@@ -1,15 +1,32 @@
+root{
+    --pretty--color-default:#bb89ca;
+    --pretty--color-primary:#00aaad;
+    --pretty--color-info:#cbdb2a;
+    --pretty--color-success:#fcb315;
+    --pretty--color-warning:#4e88c7;
+    --pretty--color-danger:#ffde2d;
+    --pretty--color-dark:#77ced9;
+}
 .menu{
     border-left: 2px solid grey;
     font-size: 2rem;
 }
 
+
 .menuHeader{
     font-size:4rem;
 }
 
 select {
     text-overflow:ellipsis;
 }
+
+#selectFilter,option{
+    font-family: 'Arial', 'Font Awesome 5 Pro';
+    /*font-weight: 900;*/
+}
+
+
 .menuFilter{
     display:flex;
     flex-flow:column nowrap;
@@ -21,4 +38,5 @@ select {
 
 .bottomBorder{
     border-bottom: 2px solid black;
-}
+}
+
diff --git a/css/styles_researchInterests.css b/css/styles_researchInterests.css
@@ -1,7 +1,6 @@
 h1, h3, p {
 	text-align: center;
 }
-
 h1 {
 	font-size:52px;
 	font-family: 'Open Sans', sans-serif;
@@ -59,6 +58,11 @@ select.custom-select option[disabled]{
 	height: 7vh;
 }
 
+#faculty-interest-table{
+	display:block;
+	overflow-x:scroll;
+}
+
 #researchInterestsTooltip {
 	width: 400px;
 }
@@ -94,3 +98,26 @@ select.custom-select option[disabled]{
 .no-match-message{
 	font-size: 1.5em;
 }
+
+::-webkit-scrollbar {
+	width: 8px;
+	height:8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 3px rgb(145,145,145);
+	border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+	background: rgb(0,130,101);
+	border:1px solid black;
+	border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	background: #b30000;
+}
diff --git a/js/vis_arc_z_New.js b/js/vis_arc_z_New.js
@@ -3,7 +3,7 @@ class visArc {
         this.parentElement = parentElement;
         this.data = Object.assign(data);
 
-        // console.log(data, this.data)
+        console.log(this.data)
 
 
         this.initVis();
@@ -12,7 +12,7 @@ class visArc {
     initVis() {
         let vis = this;
 
-        vis.margin = {top: 20, right: 5, bottom: 0, left: 0};
+        vis.margin = {top: 50, right: 20, bottom: 0, left: 0};
         vis.width = $("#" + vis.parentElement).width() ;
         vis.height = $("#" + vis.parentElement).height();
 
@@ -28,7 +28,7 @@ class visArc {
 
         vis.svg
             .append("rect")
-            .attr("width", vis.width+50)
+            .attr("width", vis.width)
             .attr("height", vis.height*3)
             .attr("x", -300)
             .attr("y", -50)
@@ -92,7 +92,7 @@ class visArc {
         // .cornerRadius(1)
 
         vis.arcBuilder.setRadii = function(d){
-            vis.arcHeight = 0.5 * Math.abs(d.y2-d.y1);
+            vis.arcHeight = 0.4 * Math.abs(d.y2-d.y1);
             this
                 .innerRadius(vis.arcHeight - d.thickness/2)
                 .outerRadius(vis.arcHeight + d.thickness/2);
@@ -476,7 +476,12 @@ class visArc {
         if (sortMethod == 'academicArea') {
             // GROUP
             vis.sortFunction = function (a, b) {
-                return a.group - b.group || d3.ascending(a.id, b.id)
+                let splitA = a.id.split(" ");
+                let splitB = b.id.split(" ");
+                let lastA = splitA[splitA.length - 1];
+                let lastB = splitB[splitB.length - 1];
+
+                return a.group - b.group || d3.ascending(lastA, lastB)
             };
         } else if (sortMethod == 'numCollab') {
             // FREQUENCY
@@ -486,7 +491,13 @@ class visArc {
         } else if (sortMethod == 'alphabetical') {
             // ALPHABETICAL
             vis.sortFunction = function (a, b) {
-                return d3.ascending(a.id, b.id)
+                    let splitA = a.id.split(" ");
+                    let splitB = b.id.split(" ");
+                    let lastA = splitA[splitA.length - 1];
+                    let lastB = splitB[splitB.length - 1];
+
+
+                return d3.ascending(lastA, lastB)
             };
         }
 
@@ -508,8 +519,20 @@ class visArc {
             vis.filteredLinks[i].doT = indexK
         })
 
+        // console.log(vis.filteredNodes.sort((a,b)=>{
+        //     let splitA = a.id.split(" ");
+        //     let splitB = b.id.split(" ");
+        //     let lastA = splitA[splitA.length - 1];
+        //     let lastB = splitB[splitB.length - 1];
+        //
+        //     if (lastA < lastB) return -1;
+        //     if (lastA > lastB) return 1;
+        // }))
+
         vis.displayNodes = vis.filteredNodes
         vis.displayLinks = vis.filteredLinks
+
+        console.log(vis.displayLinks)
         vis.updateVis()
     }
 

diff --git a/js/vis_researchInterests.js b/js/vis_researchInterests.js
@@ -6,7 +6,20 @@ class visResearchInterests {
     constructor(parentElement, latestPeopleInfo){
         this.parentElement = parentElement;
         // this.peopleInfo = peopleInfo; //remove all instances and replace with latest People Info
-        this.peopleInfo = latestPeopleInfo;
+        this.peopleInfo = latestPeopleInfo.sort((a,b)=>{
+            let splitA = a.Title.split(" ");
+            let splitB = b.Title.split(" ");
+            let lastA = splitA[splitA.length - 1];
+            let lastB = splitB[splitB.length - 1];
+
+            if (lastA < lastB) return -1;
+            if (lastA > lastB) return 1;
+            });
+        // })
+
+
+        console.log(this.peopleInfo)
+
 
         // this.peopleInfo.forEach(x=>console.log(x))
 
@@ -40,8 +53,8 @@ class visResearchInterests {
         //     "Electrical Engineering":"#FFDE2D","Environmental Science & Engineering":"#B7E5EA", "Material Science & Mechanical Engineering":"#B379E8"}
         vis.cbColors = ['#01D9DC',"#41A23D","#FCB315","#0D5AAF", "#FFDE2D","#B7E5EA", "#B379E8"]
 
-        vis.areaLoc = [{x: 0, y:-20},{x: vis.width/20*2+vis.areaList[2].length, y:-20},{x: vis.width/20*4+vis.areaList[3].length, y:-20},{x: 500, y:-20},{x: 700, y:-20},
-            {x: 150, y:0},{x: 450, y:0},]
+        vis.areaLoc = [{x: 20, y:-20},{x: 175+vis.areaList[2].length, y:-20},{x: 375+vis.areaList[3].length, y:-20},{x: 600, y:-20},{x: 800, y:-20},
+            {x: 200, y:0},{x: 500, y:0},]
 
         vis.legendScale = d3.scaleOrdinal()
             .domain(vis.areaList)
@@ -83,12 +96,16 @@ class visResearchInterests {
 
         // intrinsic properties of the adjacency matrix
         //vis.cellWidth = 2;
-        vis.yShift = 150;
-        vis.xShift = 400;
+        vis.yShift = 175;
+        vis.xShift = 150;
         vis.originalYShift = vis.yShift;
         vis.originalXShift = vis.xShift;
         vis.ySquareShift = 10;
 
+        // var maxScroll = d3.select("#"+vis.parentElement).node().scrollWidth
+
+
+
         vis.cellScalar =1; //0.85;
         vis.cellPadding = 1;
 
@@ -394,7 +411,7 @@ class visResearchInterests {
         //let tempScaleShift = vis.cellScalar * d3.min([((vis.width - vis.xShift) / vis.displayFaculty.length), ((vis.height - vis.yShift) / vis.displayResearchInterests.length)]);
         if (vis.displayFaculty.length == vis.allFaculty.length) {
             //tempScaleShift = vis.cellScalar * d3.min([((vis.width) / vis.displayFaculty.length), ((vis.height) / vis.displayResearchInterests.length)]);
-            vis.xShift = -0.8 * vis.margin.left;
+            vis.xShift = -1.2 * vis.margin.left;
             //vis.yShift = -0.8 * vis.margin.top;
         } else {
             vis.xShift = vis.originalXShift;

diff --git a/vis_arc_z.html b/vis_arc_z.html
@@ -2,9 +2,13 @@
 <head>
     <meta charset="utf-8">
     <title>Arc Visualization: Faculty-Faculty Collaborations</title>
+    <script src="https://kit.fontawesome.com/9593bd7a92.js"></script>
     <link rel="stylesheet" type="text/css" href="./inspector.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
     <!-- Bootstrap-->
     <link rel="stylesheet" href="css/bootstrap.css">
+
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
     <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
@@ -50,7 +54,7 @@ <h4 class="justify-content-left"> Sort By: </h4>
                 <h4 class="justify-content-left"> Filter: </h4>
                 <select id="selectFilter" onChange="changeSort()">
                     <option value="all" selected>All</option>
-                    <option value="AppliedMath">Applied Mathematics</option>
+                    <option value="AppliedMath"> <span class="fa-cog">&#xf111;</span> Applied Mathematics</option>
                     <option value="AppliedPhysics">Applied Physics</option>
                     <option value="Bioengineering">Bioengineering</option>
                     <option value="ComputerScience">Computer Science</option>
@@ -59,6 +63,7 @@ <h4 class="justify-content-left"> Filter: </h4>
                     <option value="MatSciMechEng">Material Science & Mechanical Engineering</option>
                 </select>
             </div>
+
             <div class="row justify-content-center bottomBorder" style="height: 10vh"></div>
             <div class="row justify-content-center " style="height: 5vh;margin-top:2vh;">
                 <div class="facultyInfo" id="facultyInfoBox"></div>

diff --git a/vis_researchInterests.html b/vis_researchInterests.html
@@ -23,18 +23,24 @@
 
 	<div class="container-fluid" style="height: 100vh; padding-top: 1vh">
 
-		<div class="row justify-content-center header">
-			<div class="col-9">
-				<h1> Faculty Research Area Comparison</h1>
-			</div>
-		</div>
+<!--		<div class="row justify-content-center header">-->
+<!--			<div class="col-9">-->
+<!--				<h1> Faculty Research Area Comparison</h1>-->
+<!--			</div>-->
+<!--		</div>-->
 		<div class="row options">
 			<div class="col-3 justify-content-center">
 				<select  id='faculty-table-filter-academic-selector' class="custom-select align-self-center" onchange="filterChangeFacultyTableAA()">
 					<option value="All">All Academic Areas</option>
 				</select>
 			</div>
 
+			<div class="col-3 justify-content-center">
+				<select  id='faculty-table-filter-research-selector' class="custom-select align-self-center" onchange="filterChangeFacultyTableRI()">
+					<option value="All">All Research Interests</option>
+				</select>
+			</div>
+
 			<div class="col-2 justify-content-center color-switch cbf-switch">
 				<div class="pretty p-switch p-fill" >
 					<input type="checkbox" value="false" onChange="changeColorPalette()" />
@@ -74,15 +80,11 @@ <h1> Faculty Research Area Comparison</h1>
 					</div>
 				</div>
 			</div>
-			<div class="col-3 justify-content-center">
-				<select  id='faculty-table-filter-research-selector' class="custom-select align-self-center" onchange="filterChangeFacultyTableRI()">
-					<option value="All">All Research Interests</option>
-				</select>
-			</div>
+
 		</div>
 		<hr/>
 
-		<div class="row justify-content-center" style="height: 95vh; margin-top: 0vh;">
+		<div class="row justify-content-center blab" style="height: 95vh; margin-top: 0vh;">
 			<div class="col-12">
 				<div id="faculty-interest-table" style="height: 100%; width:100%;"></div>
 			</div>