Adding basic visualization for organization list using P5.js

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "jquery": true
+    },
+    "globals": {
+        "loadData": true
+    },
+    "rules": {
+        "no-unused-vars": [2, {"vars": "local"}]
+    },
+    "extends": [
+        "p5js",
+        "standard"
+    ]
+}

.gitignore

@@ -1 +1,4 @@
 _site
+
+node_modules/
+package-lock.json

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,20 @@
+const 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)
+}
+
+/* global loadData */
+const 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>

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gsoc-orgs",
+  "version": "1.0.0",
+  "description": "",
+  "main": "jsonloader.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/summerofcode/gsoc-orgs.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/summerofcode/gsoc-orgs/issues"
+  },
+  "homepage": "https://github.com/summerofcode/gsoc-orgs#readme",
+  "dependencies": {
+
+  },
+  "devDependencies": {
+    "eslint": "^4.18.2",
+    "eslint-config-p5js": "^1.0.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-standard": "^3.0.1"
+  }
+}