finishing all the basic functional

list.html

@@ -17,20 +17,21 @@
 
 
   #container {
-	border: solid #ff2243 3px;
-	position: absolute;
- 	text-align: center;
-	left: 50%;
-	top: 50%;
-	background-color: #fff;
-	padding: 0px;
+		width: 25%;
+		border: solid #ff2243 3px;
+		position: absolute;
+		text-align: center;
+		left: 50%;
+		top: 50%;
+		background-color: #fff;
+		padding: 0px;
   }
 
   #head{
-	top: 0%;
-	margin: 0;
-	color: #fff;
- 	background-color: #ff0043; 
+		top: 0%;
+		margin: 0;
+		color: #fff;
+		background-color: #ff0043; 
   }
 
   #title{
@@ -45,6 +46,16 @@
   	background-color: cc0023;
   }
 
+	#web{
+		padding: 5px;
+		color: #fff;
+		background-color: #ff0043;
+	}
+
+	#web:hover{
+		background-color: #ff2243;
+	}
+
 </style>
 
 <script src="jsonloader.js"></script>
@@ -59,7 +70,9 @@
 		<div id="quit-btn"> &times </div>
 	</div>
 	<div id="body">
-		<div>Description</div>
 		<p id="desc"></p>
 	</div>
+
+	<a href="" id="web">Visit Web</a>
+
 </div>

visualizer.js

@@ -96,7 +96,7 @@ const colorsTable = (data) => {
 }
 
 function draw() {
-  //console.log(currState)
+
   background('#eee')
   translate(...view)
   switch (currState) {
@@ -133,11 +133,9 @@ function draw() {
       break
 
     case ORGS_MODE:
-     //console.log(selectedCategory.category_name) 
-
+
 
       let [i, j] = [0, 0]
-     console.log(node.length + ' ' + datPos.length)
 
       node.forEach((n, index) => {
         push()
@@ -158,9 +156,14 @@ function draw() {
   drawDesc(...trig)
 
   $('#quit-btn').click(() => {
-     console.log('pressed')
+
      $('#container').slideUp()
   })
+
+  // $('#web').click(() => {
+  //   window.location.href = 'google.com'
+  // })
+
 } 
 
 
@@ -194,9 +197,14 @@ function mouseClicked(){
 	let changeState = true
 	for(let index = 0; index < datPos.length; index++){
 	    if(dist(...mousePos, ...datPos[index]) <= 10){
-		$('#container').slideDown()
-		changeState = false
-		break
+
+        document.getElementById('title').innerHTML = node[index].name
+        document.getElementById('desc').innerHTML = node[index].tagline
+        document.getElementById('web').setAttribute('href', node[index].website_url
+      )  
+        $('#container').slideDown()
+        changeState = false
+        break
 	    }
 	}
 	if(changeState){
@@ -284,7 +292,6 @@ const drawDesc = (trigger, idx) => {
 		noStroke()
 		text(node[idx].name,
 		x2, y2 + 10)
-
             default:
             break
         }