setup p5 environment

calculating org frequency

starting to visualize orgs

changing visualization style and adding p5 library

start to displaying orgs data

update orgs mode

completing base visualization

finishing all the basic functional

fix trailing comma

change library source to cdn

move the visual to separated html file

change redirect to soc-orgs generated page

change the href target

remove vendor directory

index.html

@@ -2,7 +2,7 @@
 title: Unofficial GSoC organisation list
 ---
 <a href="list.html">2018 Organisation list</a>
-
+<a href="orgs.html">Choose base on category</a>
 <div class="search">
 {% jekyll_pages_api_search_interface %}
 </div>

jsonloader.js

@@ -0,0 +1,27 @@
+loadJSON = (callback) => {
+
+    let xobj = new XMLHttpRequest();
+    xobj.overrideMimeType("application/json")
+    xobj.open('GET', './_data/orgs.json', true);
+    xobj.onreadystatechange = () => {
+        if (xobj.readyState === 4 && xobj.status === 200) {
+
+            // .open will NOT return a value but simply returns undefined in async mode so use a callback
+            callback(xobj.responseText);
+
+        }
+    }
+    xobj.send(null);
+
+}
+
+
+loadData = cb => {
+    loadJSON( response => {
+        let json = JSON.parse(response)
+        cb(json)
+    })
+}
+
+
+

list.html

@@ -6,4 +6,7 @@
   {% for org in site.data.orgs %}
     <li><a href="orgs/{{ org.slug }}.html">{{ org.name }}</a>
   {% endfor %}
+
+
 </url>
+

orgs.html

@@ -0,0 +1,66 @@
+<style>
+	body {
+		margin: 0;
+	}
+
+
+	#container {
+		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;
+	}
+
+	#title {
+		float: left;
+	}
+
+	#quit-btn {
+		float: right;
+	}
+
+	#quit-btn:hover {
+		background-color: cc0023;
+	}
+
+	#web {
+		padding: 5px;
+		color: #fff;
+		background-color: #ff0043;
+	}
+
+	#web:hover {
+		background-color: #ff2243;
+	}
+</style>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
+<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+    crossorigin="anonymous"></script>
+<script src="jsonloader.js"></script>
+<script src="visualizer.js"></script>
+
+<div id="container">
+	<div id="head">
+		&nbsp;
+		<div id="title"> Hello </div>
+		<div id="quit-btn"> &times; </div>
+	</div>
+	<div id="body">
+		<p id="desc"></p>
+	</div>
+
+	<a href="" id="web">Visit Web</a>
+
+</div>