250 lines
58 KiB
HTML
250 lines
58 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<script src="lib/bindings/utils.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
|
|
<center>
|
|
<h1></h1>
|
|
</center>
|
|
|
|
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
|
|
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
|
|
<center>
|
|
<h1></h1>
|
|
</center>
|
|
<style type="text/css">
|
|
|
|
#mynetwork {
|
|
width: 100%;
|
|
height: 700px;
|
|
background-color: #222222;
|
|
border: 1px solid lightgray;
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
|
|
|
|
#loadingBar {
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
width: 100%;
|
|
height: 700px;
|
|
background-color:rgba(200,200,200,0.8);
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition: all 0.5s ease;
|
|
-ms-transition: all 0.5s ease;
|
|
-o-transition: all 0.5s ease;
|
|
transition: all 0.5s ease;
|
|
opacity:1;
|
|
}
|
|
|
|
#bar {
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
width:20px;
|
|
height:20px;
|
|
margin:auto auto auto auto;
|
|
border-radius:11px;
|
|
border:2px solid rgba(30,30,30,0.05);
|
|
background: rgb(0, 173, 246); /* Old browsers */
|
|
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
#border {
|
|
position:absolute;
|
|
top:10px;
|
|
left:10px;
|
|
width:500px;
|
|
height:23px;
|
|
margin:auto auto auto auto;
|
|
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
|
|
border-radius:10px;
|
|
}
|
|
|
|
#text {
|
|
position:absolute;
|
|
top:8px;
|
|
left:530px;
|
|
width:30px;
|
|
height:50px;
|
|
margin:auto auto auto auto;
|
|
font-size:22px;
|
|
color: #000000;
|
|
}
|
|
|
|
div.outerBorder {
|
|
position:relative;
|
|
top:400px;
|
|
width:600px;
|
|
height:44px;
|
|
margin:auto auto auto auto;
|
|
border:8px solid rgba(0,0,0,0.1);
|
|
background: rgb(252,252,252); /* Old browsers */
|
|
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fcfcfc", endColorstr="#ededed",GradientType=0 ); /* IE6-9 */
|
|
border-radius:72px;
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="card" style="width: 100%">
|
|
|
|
|
|
<div id="mynetwork" class="card-body"></div>
|
|
</div>
|
|
|
|
|
|
<div id="loadingBar">
|
|
<div class="outerBorder">
|
|
<div id="text">0%</div>
|
|
<div id="border">
|
|
<div id="bar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
// initialize global variables.
|
|
var edges;
|
|
var nodes;
|
|
var allNodes;
|
|
var allEdges;
|
|
var nodeColors;
|
|
var originalNodes;
|
|
var network;
|
|
var container;
|
|
var options, data;
|
|
var filter = {
|
|
item : "",
|
|
property : "",
|
|
value : []
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// This method is responsible for drawing the graph, returns the drawn network
|
|
function drawGraph() {
|
|
var container = document.getElementById("mynetwork");
|
|
|
|
|
|
|
|
// parsing and collecting nodes and edges from the python
|
|
nodes = new vis.DataSet([{"color": "#97c2fc", "font": {"color": "white"}, "id": 0, "label": "Project Update Meeting", "shape": "dot", "size": 10, "title": "Hi John,\n\nJust a reminder that we have a project u"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 19, "label": "Weekly Tech News Digest", "shape": "dot", "size": 10, "title": "Hello John,\n\nHere\u2019s your curated list of the lates"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 54, "label": "New Software Deployment", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u2019re deploying the new software update "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 1, "label": "Your Amazon.com order has shipped!", "shape": "dot", "size": 10, "title": "Hello John Doe,\n\nWe\u0027re happy to let you know that "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 55, "label": "Your Order is Arriving Soon!", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour Amazon order will arrive today by 8"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 94, "label": "Walmart Delivery Notification", "shape": "dot", "size": 10, "title": "Hi John Doe,\n\nYour recent Walmart purchase has bee"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 106, "label": "Your Order has Shipped!", "shape": "dot", "size": 10, "title": "Hello John,\n\nGood news! Your order containing \u0027Lat"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 2, "label": "New Documentaries on Netflix this January!", "shape": "dot", "size": 10, "title": "Hi John,\n\nKickstart your year with some thought-pr"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 40, "label": "Upcoming Content on Netflix This March", "shape": "dot", "size": 10, "title": "Hi John,\n\nReady for fresh content this March? From"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 3, "label": "How have you been?", "shape": "dot", "size": 10, "title": "Hi John,\n\nJust wanted to check in and see how you\u0027"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 49, "label": "Missing You!", "shape": "dot", "size": 10, "title": "Dear John,\n\nWe\u2019ve been missing you and hope you ca"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 4, "label": "Reunion Plans!", "shape": "dot", "size": 10, "title": "Hey everyone,\n\nIt\u0027s been too long! How about we pl"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 80, "label": "Weekend Getaway?", "shape": "dot", "size": 10, "title": "Hi John,\n\nThinking about a spontaneous weekend get"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 5, "label": "Your January Bank Statement", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour bank statement for January 20"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 13, "label": "January Statement Available", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour January credit card statement"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 59, "label": "Your March Statement is Ready", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour March credit card statement i"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 74, "label": "Monthly Transactions Summary", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour monthly transaction summary f"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 98, "label": "Balance Confirmation Request", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nPlease confirm your account balanc"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 110, "label": "Monthly Statement Available", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour June statement is now availab"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 6, "label": "You have new connection requests!", "shape": "dot", "size": 10, "title": "Hi John,\n\nYou have received new connection request"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 52, "label": "New Skills You Might Be Interested In", "shape": "dot", "size": 10, "title": "Hi John,\n\nBased on your professional interests, we"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 130, "label": "New Endorsements and Skill Recommendations", "shape": "dot", "size": 10, "title": "Hi John,\n\nYou\u2019ve received new endorsements for you"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 7, "label": "Membership Renewal Reminder", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe hope you\u0027re enjoying your time at Fit"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 63, "label": "March Fitness Challenge Results", "shape": "dot", "size": 10, "title": "Hi John,\n\nCongratulations on participating in our "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 112, "label": "Payment Reminder for June", "shape": "dot", "size": 10, "title": "Dear John,\n\nThis is a friendly reminder that your "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 8, "label": "Annual Performance Review", "shape": "dot", "size": 10, "title": "Dear John,\n\nWe have scheduled your annual performa"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 114, "label": "Mid-Year Performance Review Scheduled", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour mid-year performance review is sche"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 9, "label": "Order Confirmation: Local Grocery Store", "shape": "dot", "size": 10, "title": "Hi John,\n\nThank you for your order with Local Groc"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 23, "label": "Your Walmart Order is Out for Delivery!", "shape": "dot", "size": 10, "title": "Hi John Doe,\n\nGood news! Your recent Walmart purch"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 39, "label": "Your Package is Delivered!", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour Amazon order has been delivered. Th"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 192, "label": "Scheduled Package Delivery", "shape": "dot", "size": 10, "title": "Dear John,\n\nYour package is scheduled to be delive"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 10, "label": "Discover Your New Favorite Playlist", "shape": "dot", "size": 10, "title": "Hi John,\n\nStart your week with personalized playli"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 85, "label": "Spotify Playlist for Your Week", "shape": "dot", "size": 10, "title": "Hi John,\n\nStart your week with Spotify\u0027s personali"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 115, "label": "Your Top Tracks of the Month", "shape": "dot", "size": 10, "title": "Hi John,\n\nHere are your top tracks for May. Explor"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 183, "label": "Your Personalized Playlist", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour new personalized playlist is ready."}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 12, "label": "Catching up this weekend?", "shape": "dot", "size": 10, "title": "Hey John,\n\nHow about grabbing a coffee this Saturd"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 118, "label": "Coffee Chat?", "shape": "dot", "size": 10, "title": "Hey John,\n\nWould love to catch up over coffee some"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 35, "label": "Important: Verify Your Account Information", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nWe need you to verify your account"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 14, "label": "New Followers on Instagram!", "shape": "dot", "size": 10, "title": "Hi John,\n\nYou have new followers waiting to see yo"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 60, "label": "Share Your Moments on Instagram", "shape": "dot", "size": 10, "title": "Hi John,\n\nShare your memorable moments on Instagra"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 99, "label": "New Photo Tags Notification", "shape": "dot", "size": 10, "title": "Hi John,\n\nYou\u2019ve been tagged in new photos. Check "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 156, "label": "john_doe, See Your Latest Activity", "shape": "dot", "size": 10, "title": "Hey John,\n\nHere\u2019s your latest activity on Instagra"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 186, "label": "See Your Recent Mentions and Retweets", "shape": "dot", "size": 10, "title": "Hey John,\n\nCheck out your latest Twitter mentions "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 15, "label": "Your Latest Utility Bill is Available", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour current utility bill is now a"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 61, "label": "Your Latest Water Bill is Due", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour water bill for this month is "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 123, "label": "June Electricity Bill", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour electricity bill for June is "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 148, "label": "Water Service Bill - July", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour water service bill for July i"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 157, "label": "July Gas Bill Ready", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour July gas bill is ready for re"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 18, "label": "Invitation to Speak at Tech Conference 2024", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe are thrilled to invite you as a speak"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 33, "label": "Check Out This Article!", "shape": "dot", "size": 10, "title": "Hi John,\n\nI read this interesting article about th"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 25, "label": "Top Tech Trends in 2024", "shape": "dot", "size": 10, "title": "Hello John,\n\nStaying ahead in tech? Check out the "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 72, "label": "The Latest in Tech: April Edition", "shape": "dot", "size": 10, "title": "Hi John,\n\nCatch up with the most exciting tech new"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 113, "label": "Tech Weekly Newsletter - June Edition", "shape": "dot", "size": 10, "title": "Hey John,\n\nHere\u0027s your June edition of Tech Weekly"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 119, "label": "June Technology Trends", "shape": "dot", "size": 10, "title": "Hello John,\n\nCatch up with the latest technology t"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 163, "label": "Latest Updates in AI Technology", "shape": "dot", "size": 10, "title": "Hi John,\n\nThis month\u2019s issue covers the latest bre"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 20, "label": "Quarterly Investment Update", "shape": "dot", "size": 10, "title": "Hi John,\n\nAttached, please find your quarterly inv"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 128, "label": "Investment Summary - Q2 2024", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nAttached is your investment summar"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 21, "label": "Your Reserved Books Are Ready for Pickup", "shape": "dot", "size": 10, "title": "Dear John,\n\nThe books you reserved are now ready f"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 169, "label": "Books to Cozy Up With This Fall", "shape": "dot", "size": 10, "title": "Dear John,\n\nCheck out our selection of books to ke"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 24, "label": "Family Gathering This April", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u2019re planning a family gathering in Apr"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 26, "label": "Long Time, No See!", "shape": "dot", "size": 10, "title": "Hey John,\n\nIt\u2019s been ages since we last caught up."}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 57, "label": "Summer Family Reunion Update", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u2019re planning to hold the summer family"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 48, "label": "March Edition Now Available", "shape": "dot", "size": 10, "title": "Hello John,\n\nDive into the latest tech innovations"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 88, "label": "Special Edition Publication", "shape": "dot", "size": 10, "title": "Hi John,\n\nGrab our special edition with in-depth f"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 155, "label": "Tech Highlights Event - Get Your Tickets!", "shape": "dot", "size": 10, "title": "Hi John,\n\nTech Highlights 2024 is approaching. Sec"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 140, "label": "Weekend Trip to the Lake", "shape": "dot", "size": 10, "title": "Hey John,\n\nA few of us are planning a weekend trip"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 191, "label": "Weekend Activities in Your Area", "shape": "dot", "size": 10, "title": "Hello John,\n\nExplore exciting weekend activities h"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 27, "label": "Notice of New Secure Login Features", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nTo enhance your account security, "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 65, "label": "Suspicious Activity Detected", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nWe detected unusual activity on yo"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 28, "label": "You were mentioned in a tweet!", "shape": "dot", "size": 10, "title": "Hi John,\n\nSomeone mentioned you in a tweet! See wh"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 91, "label": "Trending Topics You Might Like", "shape": "dot", "size": 10, "title": "Hi John,\n\nStay up to date with the latest trending"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 29, "label": "Upcoming Dental Appointment Reminder", "shape": "dot", "size": 10, "title": "Hello John Doe,\n\nThis is a reminder for your denta"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 76, "label": "Health Check-Up Reminder", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nThis is a reminder for your annual"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 121, "label": "Appointment Reminder", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nThis is a reminder for your appoin"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 31, "label": "Order Confirmation for Hiking Gear", "shape": "dot", "size": 10, "title": "Hi John,\n\nThank you for your order of the new hiki"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 34, "label": "Board Game Night This Friday!", "shape": "dot", "size": 10, "title": "Hey John,\n\nAre you up for a board game night this "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 89, "label": "Game Night Planning", "shape": "dot", "size": 10, "title": "Hey John,\n\nThinking of hosting a game night at my "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 197, "label": "Monthly Security Update", "shape": "dot", "size": 10, "title": "Dear John,\n\nStay informed with the latest security"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 36, "label": "You Have New Notifications", "shape": "dot", "size": 10, "title": "Hi John,\n\nYou have new notifications waiting on Fa"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 178, "label": "John, Catch Up on New Posts from Friends", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour friends have shared new updates and"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 37, "label": "Policy Renewal Notice", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nThis is a reminder that your car i"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 92, "label": "Coverage Changes Notice", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nPlease review the changes in your "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 68, "label": "Package Delivery Confirmation", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour package has been successfully deliv"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 136, "label": "Delivery Confirmation", "shape": "dot", "size": 10, "title": "Hello John,\n\nYour recent purchase from Amazon has "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 107, "label": "New Arrivals This Month", "shape": "dot", "size": 10, "title": "Hi John,\n\nCheck out the latest movies and series a"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 42, "label": "Planning a Spring Picnic", "shape": "dot", "size": 10, "title": "Hey John,\n\nWith spring almost here, how about a pi"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 96, "label": "Picnic Plans for the Long Weekend", "shape": "dot", "size": 10, "title": "Hi John,\n\nThinking of doing a family picnic for th"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 168, "label": "Re: Team Outing Plan", "shape": "dot", "size": 10, "title": "Hi Laura,\n\nHow about a hike followed by a picnic? "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 43, "label": "Preparation for Tax Filing", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nGet ready for the upcoming tax sea"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 164, "label": "Plan for Tax Season Ahead", "shape": "dot", "size": 10, "title": "Hello John,\n\nA friendly reminder to start gatherin"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 44, "label": "Job Opportunities You May Like", "shape": "dot", "size": 10, "title": "Hi John,\n\nBased on your profile, we\u0027ve found job o"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 45, "label": "Medical Test Results Available", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour recent medical test results a"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 100, "label": "Appointment Confirmation", "shape": "dot", "size": 10, "title": "Hi John Doe,\n\nYour upcoming appointment with Dr. S"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 56, "label": "Renewal Notice for Your Subscription", "shape": "dot", "size": 10, "title": "Hi John,\n\nIt\u2019s time to renew your magazine subscri"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 103, "label": "May\u0027s Tech World Newsletter", "shape": "dot", "size": 10, "title": "Hello John,\n\nDiscover the technological advancemen"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 50, "label": "BBQ at My Place!", "shape": "dot", "size": 10, "title": "Hey John,\n\nThrowing a BBQ on Saturday evening. You"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 86, "label": "Memorial Day BBQ", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u0027re hosting a BBQ for Memorial Day wee"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 160, "label": "Birthday BBQ Invite", "shape": "dot", "size": 10, "title": "Hey man,\n\nHosting a BBQ for my birthday next Satur"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 53, "label": "Annual Insurance Policy Update", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nPlease review the annual updates t"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 108, "label": "Family Reunion Plans", "shape": "dot", "size": 10, "title": "Hello John,\n\nYour aunt Linda just suggested having"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 82, "label": "Your Gas Bill is Available", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour gas bill for April is ready. "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 141, "label": "Monthly Health Summary", "shape": "dot", "size": 10, "title": "Dear John,\n\nHere\u2019s your health activity summary fo"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 204, "label": "Join Our September Fitness Challenge", "shape": "dot", "size": 10, "title": "Hi John,\n\nOur September fitness challenge is open!"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 67, "label": "Feedback on Last Week\u0027s Presentation", "shape": "dot", "size": 10, "title": "Hi John,\n\nI wanted to give you some feedback on yo"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 87, "label": "Weekly Team Meeting", "shape": "dot", "size": 10, "title": "Hello Team,\n\nThis is a reminder for our weekly tea"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 185, "label": "Upcoming Product Launch Meeting", "shape": "dot", "size": 10, "title": "Hi Team,\n\nWe have a meeting scheduled for August 2"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 78, "label": "Delivery Delayed", "shape": "dot", "size": 10, "title": "Hi John,\n\nDue to unforeseen circumstances, your pa"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 90, "label": "Automatic Payment Confirmation", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nYour scheduled automatic payment h"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 203, "label": "Routine Security Check Scheduled", "shape": "dot", "size": 10, "title": "Dear John,\n\nA routine security check is scheduled "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 77, "label": "Brainstorming Session Next Week", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u2019ve organized a brainstorming session "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 83, "label": "Client Feedback on Proposal", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe received some feedback from the clien"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 202, "label": "Feedback on Latest UI Designs", "shape": "dot", "size": 10, "title": "Hi John,\n\nCould you review and provide feedback on"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 84, "label": "Limited Time Sale Announcement", "shape": "dot", "size": 10, "title": "Hi John,\n\nDon\u2019t miss our limited-time sale on elec"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 117, "label": "Exclusive Gadget Sale for Members", "shape": "dot", "size": 10, "title": "Hello John,\n\nWe\u0027re running an exclusive sale on th"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 179, "label": "Winning Bid Confirmation", "shape": "dot", "size": 10, "title": "Congrats John!\n\nYou\u2019ve won the bid on the tech gad"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 139, "label": "Your TechCorp Software Invoice", "shape": "dot", "size": 10, "title": "Dear John,\n\nAttached is your invoice for TechCorp "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 127, "label": "Annual Company Picnic", "shape": "dot", "size": 10, "title": "Hello Team,\n\nWe\u0027re excited to invite you all to th"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 152, "label": "Re: Annual Company Picnic", "shape": "dot", "size": 10, "title": "Hi Sandra,\n\nCount me in for the company picnic. Lo"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 138, "label": "Join Our July Book Club Meetup", "shape": "dot", "size": 10, "title": "Hey John,\n\nJoin us for our next book club meeting "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 133, "label": "Re: Coffee Chat?", "shape": "dot", "size": 10, "title": "Hi Peter,\n\nThanks for the invite. How about Thursd"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 120, "label": "You Have 2 New Friend Requests", "shape": "dot", "size": 10, "title": "Hi John,\n\nYou\u0027ve received two new friend requests."}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 122, "label": "Your Next Travel Adventure?", "shape": "dot", "size": 10, "title": "Hey John,\n\nSummer is here, and it\u2019s the perfect ti"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 135, "label": "Explore July\u2019s Exotic Destinations", "shape": "dot", "size": 10, "title": "Hello John,\n\nLooking for an adventure this July? C"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 150, "label": "Explore Last-Minute Travel Deals", "shape": "dot", "size": 10, "title": "Hey John,\n\nPlanning a spontaneous getaway? Check o"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 195, "label": "Top Destinations for the Fall", "shape": "dot", "size": 10, "title": "Hello John,\n\nFind the top travel destinations for "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 125, "label": "Summer Book Sale!", "shape": "dot", "size": 10, "title": "Hello John,\n\nDive into new adventures with our sum"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 142, "label": "Early Bird Registration for Tech Summit 2024", "shape": "dot", "size": 10, "title": "Hello John,\n\nThe Tech Summit 2024 is happening soo"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 143, "label": "Review Your Financial Goals", "shape": "dot", "size": 10, "title": "Hi John,\n\nLet\u2019s schedule a time to review your fin"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 180, "label": "Quarterly Financial Insights", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour quarterly financial insights are re"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 147, "label": "July 4th BBQ Photos", "shape": "dot", "size": 10, "title": "Hi John,\n\nI just uploaded some photos from our Jul"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 171, "label": "Summer Family Picnic Photos", "shape": "dot", "size": 10, "title": "Hi John,\n\nHere are some lovely photos from our fam"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 149, "label": "Exclusive List of Must-Reads This Month", "shape": "dot", "size": 10, "title": "Hi John,\n\nHere\u0027s a handpicked list of must-reads f"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 200, "label": "Autumn Reads Arriving Soon", "shape": "dot", "size": 10, "title": "Hi John,\n\nGet ready for cozy reading with new arri"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 172, "label": "Try Out for Local Soccer League", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u2019re recruiting for our local soccer le"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 176, "label": "Soccer This Saturday?", "shape": "dot", "size": 10, "title": "Hey John,\n\nWant to join us for a soccer game this "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 193, "label": "Front-End Development Team Meeting", "shape": "dot", "size": 10, "title": "Hello Team,\n\nA meeting is scheduled for August 31 "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 11, "label": "Birthday Plans for Mom", "shape": "dot", "size": 10, "title": "Hey John,\n\nMom\u0027s birthday is coming up in February"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 16, "label": "Code Review Feedback", "shape": "dot", "size": 10, "title": "Hi John,\n\nI\u0027ve reviewed the code you submitted and"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 17, "label": "Your Adobe Subscription Renewal", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour Adobe Creative Cloud subscription i"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 22, "label": "Solution for the Bug Issue", "shape": "dot", "size": 10, "title": "Hey John,\n\nI found a potential solution to the bug"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 30, "label": "Company Town Hall Meeting", "shape": "dot", "size": 10, "title": "Dear John,\n\nWe are holding a company-wide town hal"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 32, "label": "Your Payment for Spotify was Successful!", "shape": "dot", "size": 10, "title": "Hi John,\n\nThanks for your continuing subscription "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 38, "label": "Pair Programming Session Request", "shape": "dot", "size": 10, "title": "Hi John,\n\nCould you help me out with a pair progra"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 41, "label": "Family Recipe for You", "shape": "dot", "size": 10, "title": "Hi John,\n\nI\u2019ve shared with you the family recipe p"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 46, "label": "Action Items Post Staff Meeting", "shape": "dot", "size": 10, "title": "Hi John,\n\nFollowing our staff meeting, here are yo"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 47, "label": "Your Best Buy Order is Ready for Pickup", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour Best Buy order is available for pic"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 51, "label": "New Savings Plan Options", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nExplore our new savings plan optio"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 58, "label": "Road Trip Proposal!", "shape": "dot", "size": 10, "title": "Hey John,\n\nReady for a road trip? We\u2019re thinking t"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 62, "label": "Please Review the New Project Specs", "shape": "dot", "size": 10, "title": "Hi John,\n\nCan you review the attached specificatio"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 64, "label": "Hiking this Weekend?", "shape": "dot", "size": 10, "title": "Hi John,\n\nThe weather looks great for a hike this "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 66, "label": "Your 5K Race Results Are In!", "shape": "dot", "size": 10, "title": "Congrats John!\n\nThank you for participating in the"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 69, "label": "Apple TV+ April Releases", "shape": "dot", "size": 10, "title": "Hi John,\n\nExplore what\u2019s new this April on Apple T"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 70, "label": "Easter Celebration Plans!", "shape": "dot", "size": 10, "title": "Hi John,\n\nEaster is around the corner. Are you joi"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 71, "label": "Office Closure Notification", "shape": "dot", "size": 10, "title": "Hi John,\n\nPlease be informed that the office will "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 73, "label": "Call Me When You\u0027re Free", "shape": "dot", "size": 10, "title": "Hey John,\n\nJust wanted to catch up. Give me a call"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 75, "label": "Account Security Alert", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u2019ve noticed a new login attempt from a"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 79, "label": "Exclusive: Upcoming Matches", "shape": "dot", "size": 10, "title": "Hi John,\n\nCheck out the schedule for upcoming foot"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 81, "label": "April Fool\u0027s Day Prank Ideas!", "shape": "dot", "size": 10, "title": "Hey John,\n\nGot any fun ideas for April Fool\u0027s Day "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 93, "label": "Code Merge Notification", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour recent code changes have been merge"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 95, "label": "Your May Audiobook Selections", "shape": "dot", "size": 10, "title": "Hi John,\n\nCheck out the latest selections availabl"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 97, "label": "Cycling Trip Next Month", "shape": "dot", "size": 10, "title": "Hey John,\n\nPlanning a cycling trip next month. Wou"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 101, "label": "Action Items for End of May", "shape": "dot", "size": 10, "title": "Hi John,\n\nAs we approach the end of May, please fo"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 102, "label": "Your Return Request has been Approved", "shape": "dot", "size": 10, "title": "Hey John,\n\nYour request for return has been approv"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 104, "label": "Baking Weekend!", "shape": "dot", "size": 10, "title": "Hi John,\n\nLet\u0027s have a baking marathon this weeken"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 105, "label": "Project Alpha Update", "shape": "dot", "size": 10, "title": "Hi John,\n\nJust a quick update on Project Alpha: Th"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 109, "label": "Movie Night This Friday?", "shape": "dot", "size": 10, "title": "Hey John,\n\nHow about a movie night this Friday at "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 111, "label": "John, See Who Viewed Your Profile", "shape": "dot", "size": 10, "title": "Hi John,\n\n5 people have viewed your profile this w"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 116, "label": "Dad\u2019s Birthday Plans", "shape": "dot", "size": 10, "title": "Hey John,\n\nDad\u2019s 60th birthday is coming up! Let\u0027s"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 124, "label": "Cousin Jake\u0027s Graduation", "shape": "dot", "size": 10, "title": "Hi John,\n\nI wanted to remind you that Jake\u2019s gradu"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 126, "label": "Coding Workshop This Weekend", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe have a coding workshop on Sunday that"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 129, "label": "Concert Tickets Just Released", "shape": "dot", "size": 10, "title": "Hey John,\n\nWe just released tickets for the Summer"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 131, "label": "Coffee Beans on Discount!", "shape": "dot", "size": 10, "title": "Dear John,\n\nOur premium coffee beans are now on di"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 132, "label": "Rent Reminder for July", "shape": "dot", "size": 10, "title": "Hey John,\n\nJust a quick reminder that rent is due "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 134, "label": "More to Watch for You!", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u0027ve updated your recommendations with "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 137, "label": "Stock Market Trends Report - July", "shape": "dot", "size": 10, "title": "Hi John,\n\nHere\u2019s your monthly stock market trends "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 144, "label": "Holiday Schedule Announcement", "shape": "dot", "size": 10, "title": "Dear Staff,\n\nPlease be informed of the upcoming ho"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 145, "label": "Your Travel Insurance Policy", "shape": "dot", "size": 10, "title": "Dear John,\n\nAttached is your travel insurance poli"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 146, "label": "Join the Summer Tennis League!", "shape": "dot", "size": 10, "title": "Hello John,\n\nThe Summer Tennis League starts soon!"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 151, "label": "Team Outing Plan", "shape": "dot", "size": 10, "title": "Hi Team,\n\nLet\u2019s plan a team outing for next month."}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 153, "label": "Movies and Snacks Combo Deals", "shape": "dot", "size": 10, "title": "Hello John,\n\nGrab exciting combo deals on movies a"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 154, "label": "Garden Photos", "shape": "dot", "size": 10, "title": "Hi John,\n\nI wanted to share some photos of the gar"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 158, "label": "Join Our Webinar on Cloud Computing!", "shape": "dot", "size": 10, "title": "Dear John,\n\nWe invite you to join our webinar on t"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 159, "label": "Summer Adventure Gear Sale!", "shape": "dot", "size": 10, "title": "Hi John,\n\nGet ready for summer adventures with up "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 161, "label": "Your Monthly Digest from NewsWeek", "shape": "dot", "size": 10, "title": "Hi John,\n\nHere\u0027s your monthly digest from Newsweek"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 162, "label": "Discounts on Luggage - Limited Time Offer", "shape": "dot", "size": 10, "title": "Hello John,\n\nPlanning a trip? Don\u2019t miss out on ou"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 165, "label": "Join Our Weekly Running Club", "shape": "dot", "size": 10, "title": "Hi John,\n\nOur running club meets every Wednesday e"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 166, "label": "New Classes at Community Fitness", "shape": "dot", "size": 10, "title": "Hello John,\n\nCheck out the new classes we\u2019ve added"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 167, "label": "Join the 2024 Summer Tech Retreat", "shape": "dot", "size": 10, "title": "Hi John,\n\nEscape to our Summer Tech Retreat this A"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 170, "label": "Re: Your TechCorp Software Invoice", "shape": "dot", "size": 10, "title": "Hi,\n\nI\u0027m verifying the details on the invoice as i"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 173, "label": "August Art Workshops in Your Area", "shape": "dot", "size": 10, "title": "Hello John,\n\nExplore your creative side with our a"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 174, "label": "Time for Your Car Maintenance", "shape": "dot", "size": 10, "title": "Dear John Doe,\n\nIt\u2019s time for your routine car mai"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 175, "label": "New Fall Collections Just In!", "shape": "dot", "size": 10, "title": "Hi John,\n\nCheck out our new arrivals for the fall "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 177, "label": "Don\u2019t Miss the Tech World Expo", "shape": "dot", "size": 10, "title": "Hello John,\n\nJoin us at the Tech World Expo for an"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 181, "label": "Camping Trip Planning", "shape": "dot", "size": 10, "title": "Hey John,\n\nLet\u0027s finalize details for our camping "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 182, "label": "Integrating Schema Markup Techniques", "shape": "dot", "size": 10, "title": "Hi John,\n\nThis month\u2019s newsletter covers advanced "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 184, "label": "August Book Club Meeting", "shape": "dot", "size": 10, "title": "Hello John,\n\nJoin us for this month\u0027s book club me"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 187, "label": "Grooming Session for Charlie", "shape": "dot", "size": 10, "title": "Hi John,\n\nCharlie is due for his grooming session."}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 188, "label": "Early Registration Open for the Futuristi Conference", "shape": "dot", "size": 10, "title": "Hello John,\n\nSecure your spot at the Futuristi Con"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 189, "label": "Thanksgiving Get-Together", "shape": "dot", "size": 10, "title": "Hey John,\n\nThinking about hosting Thanksgiving thi"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 190, "label": "RSVP for the Tech Networking Night", "shape": "dot", "size": 10, "title": "Hi John,\n\nJoin us for a night of tech networking o"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 194, "label": "Renew Your Domain Name", "shape": "dot", "size": 10, "title": "Hi John,\n\nYour domain name is due for renewal on S"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 196, "label": "Special Anniversary Celebration", "shape": "dot", "size": 10, "title": "Hi John,\n\nWe\u2019re planning to celebrate grandma and "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 198, "label": "Book Launch Event in Your City", "shape": "dot", "size": 10, "title": "Hello John,\n\nJoin us for an exclusive book launch "}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 199, "label": "Market Update: Real Estate Trends", "shape": "dot", "size": 10, "title": "Hi John,\n\nThe latest trends in the real estate mar"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 201, "label": "Tech Series Webinar: Register Now", "shape": "dot", "size": 10, "title": "Hi John,\n\nOur next Tech Series webinar is on Cyber"}, {"color": "#97c2fc", "font": {"color": "white"}, "id": 205, "label": "Digital Marketing Event Pass", "shape": "dot", "size": 10, "title": "Hello John,\n\nClaim your pass for the Digital Marke"}]);
|
|
edges = new vis.DataSet([{"from": 0, "to": 19, "width": 0.6020876169204712}, {"from": 0, "to": 54, "width": 0.6065760850906372}, {"from": 1, "to": 55, "width": 0.6206849813461304}, {"from": 1, "to": 94, "width": 0.6467823386192322}, {"from": 1, "to": 106, "width": 0.7233731746673584}, {"from": 2, "to": 40, "width": 0.6376587748527527}, {"from": 3, "to": 49, "width": 0.633479118347168}, {"from": 4, "to": 80, "width": 0.6021168231964111}, {"from": 5, "to": 13, "width": 0.6577705144882202}, {"from": 5, "to": 59, "width": 0.632247805595398}, {"from": 5, "to": 74, "width": 0.6782002449035645}, {"from": 5, "to": 98, "width": 0.6267273426055908}, {"from": 5, "to": 110, "width": 0.7338678240776062}, {"from": 6, "to": 52, "width": 0.6432111859321594}, {"from": 6, "to": 130, "width": 0.6784820556640625}, {"from": 7, "to": 63, "width": 0.7138792276382446}, {"from": 7, "to": 112, "width": 0.6383438110351562}, {"from": 8, "to": 114, "width": 0.8601391315460205}, {"from": 9, "to": 23, "width": 0.6948636770248413}, {"from": 9, "to": 39, "width": 0.6101434230804443}, {"from": 9, "to": 55, "width": 0.7094593048095703}, {"from": 9, "to": 94, "width": 0.6555511951446533}, {"from": 9, "to": 192, "width": 0.7923880815505981}, {"from": 10, "to": 85, "width": 0.9135634899139404}, {"from": 10, "to": 115, "width": 0.6112997531890869}, {"from": 10, "to": 183, "width": 0.7970952987670898}, {"from": 12, "to": 118, "width": 0.6642357110977173}, {"from": 13, "to": 35, "width": 0.6455633640289307}, {"from": 13, "to": 59, "width": 0.7525432109832764}, {"from": 13, "to": 74, "width": 0.7253788709640503}, {"from": 13, "to": 98, "width": 0.6392173171043396}, {"from": 14, "to": 60, "width": 0.8037220239639282}, {"from": 14, "to": 99, "width": 0.7056718468666077}, {"from": 14, "to": 156, "width": 0.7572348713874817}, {"from": 14, "to": 186, "width": 0.6376414895057678}, {"from": 15, "to": 61, "width": 0.6751308441162109}, {"from": 15, "to": 123, "width": 0.7002256512641907}, {"from": 15, "to": 148, "width": 0.6180893182754517}, {"from": 15, "to": 157, "width": 0.6068388223648071}, {"from": 18, "to": 33, "width": 0.6416289806365967}, {"from": 19, "to": 25, "width": 0.627679169178009}, {"from": 19, "to": 72, "width": 0.6247379779815674}, {"from": 19, "to": 113, "width": 0.689918041229248}, {"from": 19, "to": 119, "width": 0.615484356880188}, {"from": 19, "to": 163, "width": 0.7178340554237366}, {"from": 20, "to": 128, "width": 0.7131235599517822}, {"from": 21, "to": 169, "width": 0.6313247680664062}, {"from": 23, "to": 55, "width": 0.682860255241394}, {"from": 23, "to": 94, "width": 0.8769910931587219}, {"from": 23, "to": 192, "width": 0.6151453256607056}, {"from": 24, "to": 26, "width": 0.6018514037132263}, {"from": 24, "to": 57, "width": 0.633011519908905}, {"from": 25, "to": 48, "width": 0.6467095613479614}, {"from": 25, "to": 72, "width": 0.6505475044250488}, {"from": 25, "to": 88, "width": 0.6565441489219666}, {"from": 25, "to": 113, "width": 0.7070900201797485}, {"from": 25, "to": 119, "width": 0.7130675911903381}, {"from": 25, "to": 155, "width": 0.6488678455352783}, {"from": 26, "to": 118, "width": 0.659995436668396}, {"from": 26, "to": 140, "width": 0.6240694522857666}, {"from": 26, "to": 191, "width": 0.619152307510376}, {"from": 27, "to": 35, "width": 0.6886163353919983}, {"from": 27, "to": 65, "width": 0.6075227856636047}, {"from": 28, "to": 91, "width": 0.6236828565597534}, {"from": 28, "to": 186, "width": 0.7218813896179199}, {"from": 29, "to": 76, "width": 0.6749803423881531}, {"from": 29, "to": 121, "width": 0.6865177154541016}, {"from": 31, "to": 106, "width": 0.62089604139328}, {"from": 34, "to": 89, "width": 0.6047431230545044}, {"from": 35, "to": 59, "width": 0.60207200050354}, {"from": 35, "to": 65, "width": 0.6573892831802368}, {"from": 35, "to": 98, "width": 0.6268163919448853}, {"from": 35, "to": 197, "width": 0.6400400400161743}, {"from": 36, "to": 178, "width": 0.7569342851638794}, {"from": 37, "to": 92, "width": 0.6026924848556519}, {"from": 39, "to": 68, "width": 0.680756151676178}, {"from": 39, "to": 136, "width": 0.6600345969200134}, {"from": 39, "to": 192, "width": 0.6329970359802246}, {"from": 40, "to": 107, "width": 0.6149271130561829}, {"from": 42, "to": 96, "width": 0.6604728698730469}, {"from": 42, "to": 168, "width": 0.6759220957756042}, {"from": 43, "to": 164, "width": 0.764426589012146}, {"from": 44, "to": 52, "width": 0.7543768882751465}, {"from": 44, "to": 130, "width": 0.6265866756439209}, {"from": 45, "to": 100, "width": 0.6007746458053589}, {"from": 45, "to": 121, "width": 0.6271631717681885}, {"from": 48, "to": 56, "width": 0.6997255086898804}, {"from": 48, "to": 72, "width": 0.8419359922409058}, {"from": 48, "to": 88, "width": 0.7269384860992432}, {"from": 48, "to": 103, "width": 0.7070428133010864}, {"from": 48, "to": 113, "width": 0.7722768783569336}, {"from": 48, "to": 119, "width": 0.7332110404968262}, {"from": 50, "to": 86, "width": 0.6433854699134827}, {"from": 50, "to": 160, "width": 0.6254711151123047}, {"from": 52, "to": 130, "width": 0.7404159307479858}, {"from": 53, "to": 76, "width": 0.6358033418655396}, {"from": 53, "to": 92, "width": 0.7860134840011597}, {"from": 55, "to": 94, "width": 0.6994032859802246}, {"from": 55, "to": 106, "width": 0.6531272530555725}, {"from": 55, "to": 192, "width": 0.6218034625053406}, {"from": 56, "to": 72, "width": 0.6249409914016724}, {"from": 56, "to": 113, "width": 0.6198111176490784}, {"from": 57, "to": 86, "width": 0.6226562857627869}, {"from": 57, "to": 108, "width": 0.694320559501648}, {"from": 59, "to": 74, "width": 0.648821234703064}, {"from": 59, "to": 110, "width": 0.6668661832809448}, {"from": 60, "to": 99, "width": 0.6420689225196838}, {"from": 60, "to": 156, "width": 0.7614472508430481}, {"from": 60, "to": 186, "width": 0.6459332704544067}, {"from": 61, "to": 82, "width": 0.6905537843704224}, {"from": 61, "to": 123, "width": 0.6511757373809814}, {"from": 61, "to": 148, "width": 0.8086001873016357}, {"from": 61, "to": 157, "width": 0.665221095085144}, {"from": 63, "to": 141, "width": 0.6737946271896362}, {"from": 63, "to": 204, "width": 0.7820399403572083}, {"from": 65, "to": 74, "width": 0.6352730989456177}, {"from": 65, "to": 98, "width": 0.6175387501716614}, {"from": 67, "to": 87, "width": 0.6200979351997375}, {"from": 67, "to": 185, "width": 0.6668986678123474}, {"from": 68, "to": 78, "width": 0.7273855209350586}, {"from": 68, "to": 192, "width": 0.7035952806472778}, {"from": 72, "to": 88, "width": 0.7249614596366882}, {"from": 72, "to": 103, "width": 0.6944131851196289}, {"from": 72, "to": 113, "width": 0.8056954145431519}, {"from": 72, "to": 119, "width": 0.7373950481414795}, {"from": 74, "to": 82, "width": 0.6051394939422607}, {"from": 74, "to": 90, "width": 0.6024734377861023}, {"from": 74, "to": 98, "width": 0.6439899206161499}, {"from": 74, "to": 110, "width": 0.6740188598632812}, {"from": 76, "to": 92, "width": 0.6363979578018188}, {"from": 76, "to": 121, "width": 0.7843915224075317}, {"from": 76, "to": 203, "width": 0.606478214263916}, {"from": 77, "to": 87, "width": 0.6233726143836975}, {"from": 78, "to": 192, "width": 0.629533052444458}, {"from": 82, "to": 148, "width": 0.6213726997375488}, {"from": 82, "to": 157, "width": 0.7321239709854126}, {"from": 83, "to": 202, "width": 0.6026268005371094}, {"from": 84, "to": 117, "width": 0.710840106010437}, {"from": 84, "to": 179, "width": 0.6336597800254822}, {"from": 85, "to": 183, "width": 0.7039598226547241}, {"from": 86, "to": 160, "width": 0.7005819082260132}, {"from": 88, "to": 103, "width": 0.6658908128738403}, {"from": 88, "to": 113, "width": 0.7258342504501343}, {"from": 88, "to": 119, "width": 0.6820231676101685}, {"from": 90, "to": 139, "width": 0.6010074615478516}, {"from": 91, "to": 186, "width": 0.7779260277748108}, {"from": 92, "to": 121, "width": 0.6356264352798462}, {"from": 94, "to": 106, "width": 0.6435080766677856}, {"from": 96, "to": 127, "width": 0.691550612449646}, {"from": 96, "to": 152, "width": 0.7361409664154053}, {"from": 96, "to": 168, "width": 0.623380184173584}, {"from": 99, "to": 156, "width": 0.6114393472671509}, {"from": 100, "to": 121, "width": 0.7396208047866821}, {"from": 103, "to": 113, "width": 0.7436655163764954}, {"from": 103, "to": 119, "width": 0.7083103656768799}, {"from": 106, "to": 117, "width": 0.6359196901321411}, {"from": 106, "to": 136, "width": 0.6850862503051758}, {"from": 113, "to": 119, "width": 0.8243690729141235}, {"from": 113, "to": 138, "width": 0.6632287502288818}, {"from": 113, "to": 155, "width": 0.6005858182907104}, {"from": 113, "to": 163, "width": 0.6037129163742065}, {"from": 118, "to": 133, "width": 0.6004846096038818}, {"from": 119, "to": 138, "width": 0.6376252174377441}, {"from": 120, "to": 178, "width": 0.68680739402771}, {"from": 122, "to": 135, "width": 0.757965087890625}, {"from": 122, "to": 150, "width": 0.6515917181968689}, {"from": 122, "to": 195, "width": 0.7352085113525391}, {"from": 123, "to": 148, "width": 0.6736819744110107}, {"from": 123, "to": 157, "width": 0.6744723320007324}, {"from": 125, "to": 169, "width": 0.63067626953125}, {"from": 127, "to": 152, "width": 0.7641897797584534}, {"from": 135, "to": 195, "width": 0.7159895896911621}, {"from": 141, "to": 204, "width": 0.6943261623382568}, {"from": 142, "to": 155, "width": 0.6526319980621338}, {"from": 143, "to": 180, "width": 0.6403518915176392}, {"from": 147, "to": 171, "width": 0.6755272746086121}, {"from": 148, "to": 157, "width": 0.7283381223678589}, {"from": 149, "to": 169, "width": 0.6000950336456299}, {"from": 150, "to": 195, "width": 0.6827698945999146}, {"from": 156, "to": 186, "width": 0.677264928817749}, {"from": 169, "to": 200, "width": 0.6724875569343567}, {"from": 172, "to": 176, "width": 0.6898561716079712}, {"from": 185, "to": 193, "width": 0.6235671043395996}]);
|
|
|
|
nodeColors = {};
|
|
allNodes = nodes.get({ returnType: "Object" });
|
|
for (nodeId in allNodes) {
|
|
nodeColors[nodeId] = allNodes[nodeId].color;
|
|
}
|
|
allEdges = edges.get({ returnType: "Object" });
|
|
// adding nodes and edges to the graph
|
|
data = {nodes: nodes, edges: edges};
|
|
|
|
var options = {
|
|
"configure": {
|
|
"enabled": false
|
|
},
|
|
"edges": {
|
|
"color": {
|
|
"inherit": true
|
|
},
|
|
"smooth": {
|
|
"enabled": true,
|
|
"type": "dynamic"
|
|
}
|
|
},
|
|
"interaction": {
|
|
"dragNodes": true,
|
|
"hideEdgesOnDrag": false,
|
|
"hideNodesOnDrag": false
|
|
},
|
|
"physics": {
|
|
"enabled": true,
|
|
"stabilization": {
|
|
"enabled": true,
|
|
"fit": true,
|
|
"iterations": 1000,
|
|
"onlyDynamicEdges": false,
|
|
"updateInterval": 50
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
network = new vis.Network(container, data, options);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
network.on("stabilizationProgress", function(params) {
|
|
document.getElementById("loadingBar").removeAttribute("style");
|
|
var maxWidth = 496;
|
|
var minWidth = 20;
|
|
var widthFactor = params.iterations/params.total;
|
|
var width = Math.max(minWidth,maxWidth * widthFactor);
|
|
document.getElementById("bar").style.width = width + "px";
|
|
document.getElementById("text").innerHTML = Math.round(widthFactor*100) + "%";
|
|
});
|
|
network.once("stabilizationIterationsDone", function() {
|
|
document.getElementById("text").innerHTML = "100%";
|
|
document.getElementById("bar").style.width = "496px";
|
|
document.getElementById("loadingBar").style.opacity = 0;
|
|
// really clean the dom element
|
|
setTimeout(function () {document.getElementById("loadingBar").style.display = "none";}, 500);
|
|
});
|
|
|
|
|
|
return network;
|
|
|
|
}
|
|
drawGraph();
|
|
</script>
|
|
</body>
|
|
</html> |