Initial commit

CreateJSON.java

+package aufgaben;
+
+import java.io.FileWriter;
+import java.io.IOException;
+import java.sql.Connection;
+import java.sql.DriverManager;
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.sql.Statement;
+import org.json.JSONArray;
+import org.json.JSONException;
+import org.json.JSONObject;
+
+public class CreateJSON {
+	
+	static JSONArray rows_1 = new JSONArray();
+	static JSONArray rows_2 = new JSONArray();
+
+	public static void main(String[] args) throws JSONException, IOException {
+		
+		try {
+			Class.forName("org.postgresql.Driver");
+		} catch(ClassNotFoundException e) {
+			e.printStackTrace();
+		}
+
+		String database = "Election";
+		String username = "postgres";
+		String password = "pandufla";
+		
+		Connection con = null;
+		Statement s = null;
+		try {
+			con = DriverManager.getConnection("jdbc:postgresql:" + database,
+												username, password);
+			s = con.createStatement();
+		} catch(SQLException e) {
+			e.printStackTrace();
+			System.exit(0);
+		}
+		
+		ResultSet rs = null;
+		String query = "SELECT hashtag_name, text_id, time FROM hashtag ORDER BY time ASC";
+		
+		try {
+			rs = s.executeQuery(query);
+			
+			while(rs.next()) {
+			   
+			   	
+			   JSONObject row_time = new JSONObject();
+			   JSONObject row_textid = new JSONObject();
+				
+			   row_time.put("name", rs.getString(1));
+			   row_time.put("time", rs.getString(3).substring(0, 10));
+			   rows_1.put(row_time);
+			   
+			   
+			   row_textid.put("id", rs.getString(1));
+			   row_textid.put("label", rs.getString(2));
+			   rows_2.put(row_textid);
+			}
+			/*store the hashtags and the time-stamp in json file, which we will later use to visualize the hashtags use over the time with sigma js*/
+			FileWriter file1 = new FileWriter("C:\\Users\\Matea\\Documents\\Latex files\\Datenbanksysteme\\hashtags_time.json");
+			file1.write(rows_1.toString());		
+			file1.close();
+			
+			/*store the hashtags and the text_id in json file, which we will later use to visualize the hashtag_netzwerk with sigma js*/
+			FileWriter file2 = new FileWriter("C:\\Users\\Matea\\Documents\\Latex files\\Datenbanksysteme\\hashtags.json");
+			file2.write(rows_2.toString());		
+			file2.close();
+			
+		} catch(SQLException e) {
+			e.printStackTrace();
+		}
+
+	}
+
+}

cluster1.json

+cluster1='[{"cluster1":["AsLongAsItTakes","NationalVoterRegistrationDay","MakeYoutubeGreatAgain","LightweightSenatorMarcoRubio","AIDSFreeGeneration","PhilandoCastile","TeacherAppreciationDay","SecondAmendment","MakeAmericaSafeAgain","DefendtheSecond","VoterRegistrationDay","FightForFamiliess","FightForFamilies","StandWithLouisiana","BlackWomensEqualPay","AmericaGreatAgain","StrongerTogether","MyTeacherIsWeird","CommanderInChiefForum","UnderstandSlaver","NebraskaPrimary","MaryBrigidMcManamon","WomensEqualityDay","TrumpSupporters","DeclareYourAmbition","sendDonaldtospace","HispanicHeritageMonth","FlashbackFriday","TerenceCrutcher","TrumpForPresident","fairandbalancedmyass","campaignfinance","MothersoftheMovement","SouthCarolinaPrimary","StopGunViolence","MegynKellyPresent","MAKEAMERICAGREATAGAIN","OpioidAwarenessWeek","ImWithHernandez","LibrarianOfCongress","fixdemocracyfirst","InternationalNursesDay","SuperBowlSunday","OpeningCeremony","makersandtakers","BlackMenForBernie","DemocraticSitIn","CaucusForTrumpp","MakeAmericaGreatAgain","makeamericagreatagain","WorldRefugeeDay"]}]'
\ No newline at end of file

cluster2.json

+cluster2='[{"cluster2":["DACA","WCS","RNC","DN","FNS","Utah","Trum","WHD","USMC","MD","Bush","UT","TBT","DDay","LSS","Fox","LGBT","LESM","Iowa","LSSC","AZ","WORK","FAIL","Derp","CNN","NATO","Puls","UAW","RTM","MAGA","With","UNG","SB","NPS","WH","YUGE","Cruz","Jobs","TPP","WHCD","FITN","CA","USA","MSM","GO","GOP","FIT","Ted","ISIS","RIP","HRC","SOT","Rio","Ford","LES","SOTU","ADA"]}]'
\ No newline at end of file

cluster3.json

+cluster3='[{"cluster3":["Charleston","RNCinCLE","WestVirginia","ChangeAgent","DemPlatform","WomanCard","CTPrimary","Politician","OrlandoUnited","DEPrimary","HaileyPuckett","LaurenceTribe","RestoreTheVRA","SallyRideDay","SaveElephants","LittleMarco","NewYorkValues","AmericaFirs","VoteTrumpSCC","NotOneMore","Statehood","DemsinPHL","StopCommonCore","goodtrouble","NoMoreSilence","ArmedForcesDay","Filibuster","TheDonald","laurencetribe","CreatorsAskHR","WIPrimary","EndGunViolence","RogerStone","imwithyou","WakeUpAmeric","VoteTrumpNV","SayHerName","SouthCarolina","VoteTrumpNY","GOPDebate","OHHillYes","HarveyPitt","BrexitVotee","NHPrimary","ArmyBDay","DemsinPhilly","RNCINCLE","IAPolitics","VoteTrumpNH","ClintonKain","NABJNAHJ","VoteTrumpNC","JimmyFallon","RIPrimary","RobotRubio","Wisconsin","slipping","SuperTuesdayy","MichaelMoore","Decision","NeverCruz","VoteTrumpMI","MSPrimary","TRUMPDOG","OnTheRecord","VoteTrumpMA","debatenight","DisarmHat","TrumpinEverett","HoustonFlood","NaturalBorn","WheresHillary","CrookedHillary","presidenttrump","ArizonaPrimary","INPrimar","TrumpYourself","PrimaryDay","Laurence","NeverDem","ROGERAILES","GOPdebate","debatenigh","StandTogethe","DivoDeJuarez","extremevetting","NVcaucus","RNCInCLE","EauClaire","MDPrimary","GOPinCLE","WeMadeHistory","NetNeutrality","JuanGabriel","LeadRight","VirWINia","YouthDay","LawandOrder","LoveTrumpsHate","HillaryOnGMA","DemsInPHL","VotersSpeak","LaborDay","ActOnClimate","NewHampshire","WeAreBernie","EstoyConElla","PAPrimary","MichaelBrown","TrumpWaikiki","TrumpTrain","NeverHillar","DisarmHate","IowaCaucus","Obamacare","DebateNight","iRegistered","GOPDebatee","VoteTrum","election","Srebrenica","MSNBCTownhal","voteTrum","UtahPrimary","ImWithHer","Imwithyo","CoastGuardDay","BikersForTrump","TrumpIsWithYou","UtahCaucus","DNCinPHL","CruzFraud","TrumpWon","CincoDeMayo","WISCONSIN","StopGunViolenc","GoldenGlobe","SCPrimary","AlwaysTrum","NeilCavuto","SuperTuesday","WesternTuesday","HillaryClinton","SmallBizWee","Teachers","RepMikeKelly","GoodTrouble","TrumpCountry","LoneStarState","ObamaCare","DavidCameron","FeelTheBern","TrumpYoursel","EndCommonCore","EarthDay","gunviolence","FirstInPOTUS","MorningJoe","CreatorsAskHRC","Olmstead","ElectionDay","NHPolitics","HistoryMad","EastVillage","RNCwithBerni","ORPrimary","NeverForget","CommonCore","NYPrimary","Benghazi","NoLoyalty","KansasCaucus","TurnUpToVote","AmericanSamoa","VoteTrumpSC","holdthefloor","TeamTrump","CripTheVot","DonaldTrump","NoBillNoBreakk","KentuckyDerby","CAPrimary","ImWithYo","MattSchlapp","VoteTrumpVT","VoterFraud","INDPrimary","RollCallVote","NoBillNoBreak","WashingtonDC","imwithher","WattersWorld","FallonTonight","TheTonightShow","DemsInPhilly","LaudatoS","jenniferrubin","smallbiz","CommonLaw","JuntosSePuede","AZPrimary","BrexitVote","Caribbean","NoMoreSilenc","WIBackHer","Wimbledon","TrumpTrai","AmericaFirst","KenLangone","INPrimary","ThankAVet","RiggedSyste","PurpleHeartDa","VoteTrump","Excellent","ShesWithU","WeTrumpHat","DemsInPH","JohnRyder","HillaryKaine","NevadaCaucus","ALConvention","CitizensUnited","KhizrKhan","HillaryOnCNN","Brussels","MothersDay","LyingTed","womancard","BuildTheWall","SuperSaturda","NewYorkValue","IranDeal","NeverTrum","AmericaFIRST","UTCaucus","AlwaysTrump","MoreInCommo","BlacksForTrum","VoteTrumpWI","StoptheHate","veterans","MemorialDay","ClintonKaine","RosanellEaton","TrumpMovement","StanleyCup","IACaucus","NeverTrump","TrumpPence","MadeForHistory","vaticanwalls","DemConvention","MeetTheTrumps","MikePence","GunViolence","MaitnerStrong","WeWantTrump","NYCPride","GOPConventionn","NBCNewsForum","VoteTrumpIL","MadeInAmerica","Mediafraud","LoveTrumpsHat","ImWithYou","NeverHillary","GOPConvention","TrumpDallas","CaucusForTrump","ThanksObam"]}]'
\ No newline at end of file

cluster4.json

+cluster4='[{"cluster4":["trump","Indiana","sitin","UPUPUP","debate","Enough","Clinto","Elkhart","Prince","CBNNews","Enjoy","Debates","Brexit","Carrier","Mahalo","NewDay","Racine","Arizona","POTUS","Women","TeamUSA","TitleIX","Mormon","Frozen","Trump","WOMEN","NAACP","Turkey","TrumpLV","Greta","FoxNews","TRUMP","primary","Wausau","TrumpN","debat","GIBill","WATCH","MayDa","SheWo","polls","media","GPLFers","iVoted","ugpride","APAHM","Donald","Debate","NewYork","Jonas","brexit","NASCAR","TedCruz","SCOTUS","Diwali","enough","SheWon","Colbert","RNCinCL","LAfloo","Polls","dtmag","Orlando","Hillary","Mexico","AIPAC","taxplan","Hannity","ECONOMY","ICYMI","Rubio"]}]'
\ No newline at end of file

hashtags.html

+<!doctype html>
+ <html>
+    <head>
+      <meta charset="utf-8">
+       <title>American-Elections-2016:Hashtags</title>
+  
+
+<!-- Import Sigma JS -->
+<script src="js/build/sigma.min.js"></script>
+<script src="js/build/plugins/sigma.layout.forceAtlas2.min.js"></script>
+<script type="text/javascript" src="hashtags.json"></script>
+
+<style>
+  #hashtags {
+    position: absolute;
+    width:100%;
+    height: 100%;
+  }
+</style>
+</head>
+<body>
+<div id="hashtags"></div>
+  <script>
+
+    /*with a java-method we stored all the hashtags and the text_ids in a .json-file (s. row: 11), 
+    which we use here to visualize the data*/
+    var mydata = JSON.parse(hashtags);
+    /*in clean_data we store all the id_hash-lists*/
+    var clean_data = [];
+    /*in id_hash we store the hashtags that appear together in a tweet, so later we can add the edges between them*/
+    var id_hash = [];
+    
+    /*put the first element of my data*/
+    id_hash.push(mydata[0].label);
+    clean_data.push(id_hash);    
+
+
+      /*we iterate through the .json-file and store all the hashtags that appear together in a list (id_hash)*/
+      for(var i = 0; i < mydata.length; i++){
+          var equal_text_id = 0;
+          
+          for(var j = 0; j < clean_data.length; j++){
+           
+            if(clean_data[j][0] == mydata[i].label){
+              equal_text_id++;
+              clean_data[j].push(mydata[i].id);              
+            }
+          }if(equal_text_id == 0 && !equals(clean_data, mydata[i].id)){
+           
+            time_hash = [];
+            time_hash.push(mydata[i].label);
+            time_hash.push(mydata[i].id);
+            clean_data.push(time_hash);          
+        }         
+      }
+
+  /*help function: if one hashtag already exists in our clean_data and it appears alone in a tweet, 
+  we dont create a new (separate) list containing this hashtag (to avoid duplicates) (s. row 48)*/
+  function equals(list, name){
+    for(var i = 0; i < list.length; i++){
+      for(var j = 1 ; j < list[i].length; j++){
+        if(list[i][j] == name){
+          return true;
+        }
+      }
+    }return false;
+  }
+
+
+
+    /*we create the sigma chart for the hastag-network*/
+    var s = new sigma('hashtags');
+
+    for(var i = 0; i < clean_data.length; i++){
+      for(var j = 1; j < clean_data[i].length; j++){
+        s.graph.addNode({
+          id: clean_data[i][j]+(i+j),
+          label:clean_data[i][j],
+          size: 1,
+          color: '#000'
+        });
+      }
+    }
+
+    /*we crate edges between all the hashtags in one list (id_hash)*/
+    for(var i = 0; i < clean_data.length; i++){
+      if(clean_data[i].length > 2){
+      for(var j = 1; j < clean_data[i].length; j++){
+        for(var k = j+1; k < clean_data[i].length; k++){
+          s.graph.addEdge({
+            id: "edge"+clean_data[i][0]+(i+j)+clean_data[i][k]+(i+k),
+            source: clean_data[i][j]+(i+j),
+            target: clean_data[i][k]+(i+k)
+          });
+          /*check if the edges are correct: clean_data[i][0] == text_id of the tweet containing the hashtag-pairs*/
+          console.log("edge between: "+clean_data[i][j]+" und "+clean_data[i][k]+" in "+clean_data[i][0]);
+        }
+
+        }
+      }
+    }
+
+
+    /*representing the network in a circle*/
+    s.graph.nodes().forEach(function(node, i, a) {
+    node.x = Math.cos(Math.PI * 2 * i / a.length);
+    node.y = Math.sin(Math.PI * 2 * i / a.length);
+    });
+     
+
+    s.refresh();
+    /*nodes-animation*/
+    s.startForceAtlas2({worker: true,adjustSizes:true,gravity: 5,outboundAttractionDistribution:true});
+        
+
+    </script>
+  </body>
+</html>

hashtags_diagramm.html

+ <!DOCTYPE html>
+ <html>
+    <head>
+       <meta charset="utf-8"></meta>
+       <title>American-Election-2016:Hashtag-Time-Chart</title>
+       <script src="js/jquery-3.2.1.min.js"></script>
+       <script src="js/flot-master/jquery.flot.js"></script>
+       <script src="js/flot-master/jquery.flot.time.js"></script>
+       <script type="text/javascript" src="hashtags_time.json"></script>
+      
+	</head>
+    	<body>
+		<script>
+
+		/*with a java-method we stored all the hashtags and their time-stamps in a json-file (s. row: 9), 
+		which we use here to visualize the data*/
+
+		var mydata = JSON.parse(hashtags_time);
+		var data = [];
+		var data_start = [];
+		/*we store all the hashtags names in hashtag_name:
+		hashtag_name will be assigned value to yaxis.ticks*/
+		var hashtag_name = [];
+		
+		/*because in our .json file (and our dbs) one hashtag (if used more than once) appears multiple times with a different time-stamp
+		we have to clean the .json file*/
+		/*in time_hash we first store the hashtag_name and all the time-stamps of this hashtag*/
+		var time_hash = [];
+		/*in clean_data we store all the time_hash lists*/
+		var clean_data = [];
+
+		time_hash.push(mydata[0].name);
+	    time_hash.push(mydata[0].time);
+	    clean_data.push(time_hash);    
+
+	    /*we iterate through the .json flie and compare the hashtag_names if they are same -> we store only the time-stamp
+	    else -> we create new time_hash list with the new hashtag_name
+	   	at the end we have the clean_data containing lists of hashtags with their time-stamps: 
+	    the 0-Element of a list is the hashtag-name, the 1. Element is the first appear of a hashtag and 
+	    the last-Element ist the last appear of a hashtag (because the hashtags were stored in an ascending order (by time) in our .json)*/
+      	for(var i = 0; i < mydata.length; i++){
+      		var equal = 0;
+	        for(var j = 0; j < clean_data.length; j++){
+
+	          if(clean_data[j][0] == mydata[i].name){
+	            equal++;
+	            clean_data[j].push(mydata[i].time);
+	          }
+	        }if(equal == 0){
+          time_hash = [];
+          time_hash.push(mydata[i].name);
+          time_hash.push(mydata[i].time);
+          clean_data.push(time_hash);
+        }  
+      }
+
+		/*we store all the hashtags names in hashtag_name
+		hashtag_name will be assigned value to yaxis.ticks*/
+		for(var i = 0; i <clean_data.length; i++){
+			hashtag_name.push([i,clean_data[i][0]]);
+		}
+
+		/*we convert the string-time into time*/
+		function gd(year, month, day, first) {
+			if(first){
+				return new Date(parseInt(year), parseInt(month)-1, parseInt(day)).getTime();
+			}
+			if(!first){
+				return new Date(parseInt(year), parseInt(month)-1, parseInt(day)+1).getTime();
+			}
+		}
+
+			/*in data we store the time and the position, which we later assign to the graphs data*/
+			for(var i = 0; i < clean_data.length; i++){
+				var len = clean_data[i].length;
+				data.push([gd(clean_data[i][len-1].substring(0,4), clean_data[i][len-1].substring(5,7), clean_data[i][len-1].substring(8,10), false), i]);
+				/*in data_start we store the first appearnces of the hashtags*/
+				data_start.push([gd(clean_data[i][1].substring(0,4), clean_data[i][1].substring(5,7), clean_data[i][1].substring(8,10), true), i]);
+			}
+
+			/*initially we show the Time-Bar-Chart of all the hashtags: the bars are painted grey till their first appear and afterwards green.*/ 
+			var dataset = [{label: "all hashtags", data: data}, {data:data_start}];
+
+			 $(document).ready(function () {
+			    $.plot($("#barchart"), dataset, {
+			    	series: {
+					    bars: {
+					        show: true,
+					        barWidth: 0.1,
+					        horizontal: true,
+					    }
+					},
+					xaxis: {
+						tickLength: 15,
+						mode: "time",
+            			timeformat: "%d/%m",
+            			tickSize: [1, "day"],
+            			min: gd(2016, 1, 5, true),
+        				max: gd(2016, 9, 28, true)
+					},yaxis:{						
+						tickLength: 15,
+						ticks: hashtag_name
+					},
+					grid:{
+						borderWidth: 1,         
+					},
+					colors: ['green', '#a6a6a6']
+
+				});    
+			});
+
+	/*we create option-Elements in the select-parent, 
+	so we can choose a single hashtag to be visualized*/
+	$(document).ready(function(){
+    	var select = document.getElementById('hashtag');
+
+		for (var i = 0; i < clean_data.length; i++){
+		    var opt = document.createElement('option');
+		    opt.value = clean_data[i][0];
+		    opt.id = clean_data[i][0];
+		    opt.innerHTML = clean_data[i][0];
+		    select.appendChild(opt);
+		}
+		
+    	
+	});
+
+	/*this function will be called when the user chooses one hashtag and pushes the button (s. row 215)*/
+	function myFunction() {
+		/*if the users selects the all hashtags - option, the page will be reloaded
+		and the chart with all hashtags will be shown again*/
+		
+		if(document.getElementById('all').selected){
+			location.reload();
+		}
+
+		/*we check which option was selected and we pass it as an argument in the hashtag_data(which we assaign to the graphs data)*/
+		for(var i = 0; i < clean_data.length; i++){
+			if(document.getElementById(clean_data[i][0]).selected){
+				/*first_appear is the date when this particular hashtag appeared for the first time (use: s. row 167)*/
+				var first_appear = gd(clean_data[i][1].substring(0,4), clean_data[i][1].substring(5,7), clean_data[i][1].substring(8,10), true);
+				console.log(first_appear + "sting: "+clean_data[i][1]);
+				var hashtag_data = [];
+				var len = clean_data[i].length;
+				hashtag_data.push([gd(clean_data[i][len-1].substring(0,4), clean_data[i][len-1].substring(5,7), clean_data[i][len-1].substring(8,10), false), i]);
+				var dataset = [{label: "#"+clean_data[i][0], data: hashtag_data}];
+
+				/*we make the chart smaller, for simpler visualisation*/
+				$(document.getElementById('barchart')).css('height','300px');
+				if(clean_data[i][1] == "2016-09-27"){
+					$(document.getElementById('barchart')).css('width','400px');
+				}
+				 $.plot($("#barchart"), dataset, {
+			    	series: {
+			    		   stack: true,
+					    bars: {
+					        show: true,
+					        barWidth: 1,
+					        horizontal: true
+					    }
+					},
+					xaxis: {
+						tickLength: 15,
+						mode: "time",
+            			timeformat: "%d/%m",
+            			tickSize: [1, "day"],
+            			min: first_appear,
+        				max: gd(2016, 9, 28, false)
+					},yaxis:{						
+						tickLength:0
+					},
+					colors: ['green']
+
+				});
+
+			}
+		}
+	}
+		
+
+       </script>
+       <style type="text/css">
+       body{
+       	background-color: #f2f2f2;
+       }
+      
+       	button{
+       		color: grey; 
+       		font-weight: bold;
+       		border: transparent; 
+       		font-size: 30px;
+       		background-color: #f2f2f2;
+       		
+       	}
+       	#hashtag{
+       		height: 30px;
+       	}
+       	.parent{
+       		width: 1200px;
+       		height: 500px;
+       		border-radius: 3px;
+       		margin-right: auto;
+       		margin-left: auto;
+       		padding: 20px;
+       		background-color: #fff;
+       		box-shadow: 10px 10px 5px #888888;
+       	}
+       </style>
+    
+      
+      <div id="selection" style="text-align: center; margin-bottom: 20px">
+      <select id="hashtag">
+      	<option id="all" value="">all hashtags</option>
+      </select>
+      <button onclick="myFunction()">&#8680</button>
+      </div>
+      <div class=parent>
+      <div class="scroll" style="overflow: auto; width: 100%; height: 100%">
+      <!--the width and height of the chart had to be very large because of the large number of hashtags 
+      (which we later make it smaller, when only one hashtag is shown)-->
+      <div id="barchart" style="width: 10000px; height: 5000px;"></div>
+      </div>
+      </div>
+   </body>
+ </html>
\ No newline at end of file

hashtags_similarity.html

+<!doctype html>
+ <html>
+    <head>
+      <meta charset="utf-8">
+       <title>American-Election-2016:Hashtag-Similarity</title>
+  
+
+<!-- Import Sigma JS -->
+<script src="js/build/sigma.min.js"></script>
+<script src="js/build/plugins/sigma.layout.forceAtlas2.min.js"></script>
+<script type="text/javascript" src="cluster1.json"></script>
+<script type="text/javascript" src="cluster2.json"></script>
+<script type="text/javascript" src="cluster3.json"></script>
+<script type="text/javascript" src="cluster4.json"></script>
+
+<style>
+  #hashtags {
+    position: absolute;
+    width:100%;
+    height: 100%;
+  }
+</style>
+</head>
+<body>
+<div id="hashtags"></div>
+  <script>
+
+    /*with a java-method we stored all the clusters in .json-files (s. row: 11-14), 
+        which we use here to visualize the data*/
+    var mydata1 = JSON.parse(cluster1);
+    var mydata2 = JSON.parse(cluster2);
+    var mydata3 = JSON.parse(cluster3);
+    var mydata4 = JSON.parse(cluster4);
+
+    /*we create the sigma chart for the hastag-network*/
+    var s = new sigma('hashtags');
+
+    /*we add all nodes (labled with hashtag_name) the mydata[i].id represents the hashtag_name*/
+
+    /*the first cluster is represented with black nodes*/
+    for(var i = 0; i < mydata1[0].cluster1.length; i++){
+         s.graph.addNode({
+          id: i,
+          x: Math.random(),
+          y: Math.random(),
+          label: mydata1[0].cluster1[i],
+          size: 1,
+          color: '#000'
+     
+      });
+    }
+    /*the second cluster is represented with yellow nodes*/
+    for(var i = 0; i < mydata2[0].cluster2.length; i++){
+         s.graph.addNode({
+          x: Math.random(),
+          y: Math.random(),
+          id: mydata1[0].cluster1.length+i,
+          label: mydata2[0].cluster2[i],
+          size: 1,
+          color: '#ffd700'
+     
+      });
+    }
+    /*the third cluster is represented with blue nodes*/
+    for(var i = 0; i < mydata3[0].cluster3.length; i++){
+         s.graph.addNode({
+           x: Math.random(),
+          y: Math.random(),
+          id: mydata2[0].cluster2.length+mydata1[0].cluster1.length+i,
+          label: mydata3[0].cluster3[i],
+          size: 1,
+          color: '#31698a'
+     
+      });
+    }
+    /*the fourth cluster is represented with green nodes*/
+    for(var i = 0; i < mydata4[0].cluster4.length; i++){
+        s.graph.addNode({
+        x: Math.random(),
+        y: Math.random(),
+        id: mydata2[0].cluster2.length+mydata1[0].cluster1.length+mydata3[0].cluster3.length+i,
+        label: mydata4[0].cluster4[i],
+        size: 1,
+        color: '#20b2aa'
+     
+      });
+    }
+     
+
+    s.refresh();
+    /*nodes-animation*/
+    s.startForceAtlas2({worker: false,adjustSizes:false,gravity: 5,outboundAttractionDistribution:true});
+        
+
+    </script>
+  </body>
+</html>