-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
1 lines (1 loc) · 8.69 KB
/
index.html
1
<!DOCTYPE html><html><head><title>Hangouts Analyzer</title><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:500,300,400"><link type="text/css" rel="stylesheet" href="index.min.css"><link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.7/c3.min.css"></head><body><div class="wrap"><nav><div class="container"><div class="nav-wrapper"><a id="titleLink" href="#/conversations" class="brand-logo">Hangouts Analyzer</a><ul class="right side-nav"><li><a id="aboutLink" class="modal-trigger" href="#about">About</a></li><li><a href="https://github.com/theopolisme/hangouts-analyzer">GitHub</a></li><li><a id="resetLink" href="#">Reset</a></li></ul></div></div></nav><div class="content"><div id="intro" class="modal"><h4>Welcome</h4><p>Welcome to Hangouts Analyzer, a tool for analyzing and visualizing the wealth of information available in your Google Hangouts history. To get started, upload your <b>Hangouts.json</b> file from <a href="https://www.google.com/settings/takeout">Google Takeout</a> (deselect all options except for "Hangouts", click "Next", click "Create archive", and then unzip the downloaded file and browse to the Hangouts folder to find the JSON file). <i>Don't worry, all processing happens directly on your computer—nothing is uploaded to any external servers.</i></p><p>Either drag and drop the file onto the page, or use the file selector below:</p><p><label class="upload-label"><input id="file" type="file"> <a class="waves-effect waves-light btn-large">Upload file</a></label></p></div><div id="missingNames" class="modal"><h4>Missing names</h4><p>Some of your conversations are missing contact information (<span id="noNames"></span> participants have only phone numbers as names), due to the way Google Takeout exports data. Would you like to upload your contact information in order to match phone numbers and IDs with names?</p><p>Go to <a href="https://www.google.com/settings/takeout">Google Takeout</a>, deselect all options except for "Contacts", click the downwards-facing arrow and change the format to "Comma-separated values (CSV)", click "Next", click "Create archive", and then unzip the downloaded file and browse to the Contacts folder to find the <b>All Contacts.csv</b> file to upload.</p><p>We'll automatically cache this file (locally, on your computer—no data is uploaded to external servers), so for future visualizations, you won't need to upload it again. At any time you can click "Reset" in the menu to delete the cached data and start over from scratch.</p><p>Either drag and drop the file onto the page, or use the file selector below:</p><p><label class="upload-label"><input id="contactFile" type="file"> <a class="waves-effect waves-light btn-large">Upload file</a></label><a id="noThanksUpload" class="waves-effect waves-light btn-flat bottom-right">No thanks</a></p></div><div id="about" class="modal"><h4>About</h4><p>Hangouts Analyzer is a project by <a href="https://theopolis.me">@theopolisme</a>, made with love in Memphis, Tennessee, in the year 2014. A venture into JavaScript data visualization and analytics.</p><p>Dedicated to Linnie, the reason why all this came to be ;)</p><p>Powered by <a href="https://jquery.com/">jQuery</a>, <a href="http://d3js.org/">d3</a>, <a href="http://c3js.org/">c3</a>, <a href="https://github.com/jensarps/IDBWrapper">IDBWrapper</a>, <a href="http://timeago.yarp.com/">jquery.timeago</a>, <a href="https://github.com/Dogfalo/materialize">materialize</a>, <a href="http://www.collectionsjs.com/">collections.js</a>, <a href="https://github.com/Mottie/tablesorter">tablesorter</a>, <a href="http://www.checkman.io/please/">Please JS</a>, <a href="https://github.com/chrisdavies/rlite">rlite</a>, <a href="https://github.com/thisandagain/sentiment">sentiment</a>, <a href="https://github.com/timdream/wordcloud2.js">wordcloud2.js</a>, & a healthy dose of crossed fingers</p><a href="https://github.com/theopolisme/hangouts-analyzer" class="waves-effect btn">Fork me on GitHub</a> <a class="waves-effect waves-light btn-flat modal_close bottom-right">Close</a></div><div id="viewer"></div><div class="loading"><div class="preloader-wrapper big active"><div class="spinner-layer spinner-blue"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div><div class="spinner-layer spinner-red"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div><div class="spinner-layer spinner-yellow"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div><div class="spinner-layer spinner-green"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div></div></div></div><footer><p class="tagline">A project by <a href="https://theopolis.me">@theopolisme</a>. Made in 2014 in Memphis, Tennessee.</p></footer><div id="lean_overlay"></div><script id="conversations-template" type="text/x-handlebars-template"><div id="conversationsView" class="container"><h4>Conversations</h4><table class="striped"><thead><tr><th>Participants</th><th>Last message</th><th># of messages</th></tr></thead><tbody></tbody></table></div></script><script id="conversation-template" type="text/x-handlebars-template"><div id="conversationView" class="container"><h4><span id="conversationTitle"></span></h4><div class="col s12"><ul class="tabs"><li class="tab col s4"><a href="#stats">Stats</a></li><li class="tab col s4"><a href="#emoji">Emoji</a></li><li class="tab col s4"><a href="#conversationContent">Content</a></li><li class="tab col s4"><a href="#more">More</a></li></ul></div><div id="stats" class="col s12"><div class="card-panel" id="messageFactoid"></div><div class="row"><div class="col s12 m6"><div class="card-panel"><h5>Messages sent by participant</h5><div id="messageDistro"></div></div></div><div class="col s12 m6"><div class="card-panel"><h5>Characters sent by participant</h5><div id="characterDistro"></div></div></div></div><div class="card-panel"><h5>Message send time by participant</h5><div id="eventSendTime"></div></div><div class="row"><div class="col s12 m6"><div class="card-panel"><h5>Who starts the conversation...</h5><div id="initiatorGraph"></div></div></div><div class="col s12 m6"><div class="card-panel"><h5>...and who gets the last word?</h5><div id="endersGraph"></div></div></div></div><div class="card-panel"><h5>Messages per day by participant</h5><div id="messagesPerDay"></div></div></div><div id="emoji" class="col s12"><div class="card-panel" id="emojiNotSupported">Your browser does not support emoji, so you will sadly be seeing a lot of empty boxes. Try another browser!</div><div class="card-panel"><h5>Number of emoji sent by participant</h5><div id="emojiUsage"></div></div><div class="card-panel"><h5>Emoji frequency by participant</h5><div id="emojiFrequency_byParticipant" class="row"></div></div></div><div id="conversationContent" class="col s12 center"><div class="card-panel"><h5>Most frequently used words</h5><div id="wordCloud_allEvents" class="word-cloud"><canvas></canvas></div></div><div class="card-panel"><h5>Most frequently used words by participant</h5><div id="wordCloud_byParticipant" class="row"></div></div></div><div id="more" class="col s12"><div class="card-panel"><h5>Export data</h5><p>You can export the contents of this conversation for further analysis or backup purposes.</p><p><div><a id="csvDownload" class="waves-effect waves-light btn-large">Download csv</a></div><div id="csvInfo">Format: sender,timestamp,message</div></p></div></div></div></script><script src="https://code.jquery.com/jquery-2.1.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/idbwrapper/1.4.1/idbstore.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.4.1/jquery.timeago.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.7/c3.min.js"></script><script src="index.min.js"></script><script>!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-55418641-4","auto"),ga("send","pageview");</script></body></html>