Explaining graph visualization, partially resolves #275 (#277)

* Explaining graph viz, partially resolves #275 * Fleshes out the Gephi files documentation as well
archivesunleashed · Mar 27, 2019 · 9a80b8686a20bd66e0c2b2aa0a0a2148b3b15c83 · 9a80b86
1 parent 3e55812
commit 9a80b8686a20bd66e0c2b2aa0a0a2148b3b15c83
Unified Split

Showing with 7 additions and 3 deletions.

+4 −1 app/views/collections/show.html.erb

+3 −2 app/views/pages/documentation.html.erb
diff --git a/app/views/collections/show.html.erb b/app/views/collections/show.html.erb
@@ -75,7 +75,10 @@
        <%= javascript_tag do %>
          $("#graph-modal").data("gexf_url", `<%= ENV['BASE_HOST_URL'] + user_collection_download_gexf_path(@user.id, @collection.id, @collection.account) %>`);
        <% end %>
-  
-      <% end %>
+  
+        <div class="container text-right">
+  
+          <%= link_to('What does this graph show?', '#', data: { toggle: 'tooltip', title: 'This diagram visualizes the domains that are captured as well as any domains that they may link to. These linked-to domains may or may not be contained within the web archived collection. You can read more about this graph in our documentation.'}) %>
+  
+          <% end %>
+  
+        </div>
      <% unless !File.exists? domains_path(@user.id, @collection.id, @collection.account) %>
        <h2>Download Collection Derivatives</h2>
        <div class="text-center">

diff --git a/app/views/pages/documentation.html.erb b/app/views/pages/documentation.html.erb
@@ -71,8 +71,8 @@
      <li class="about_li">An interactive hyperlink diagram: you can use this to explore the basic hyperlink structure of your collection.</li>
      <li class="about_li">Five output files that can be downloaded for further research and analysis. These include:</li>
      <ul class="about_ul">
-  
-        <li class="about_li"><strong>Gephi</strong> file, which can be loaded into <%= link_to('Gephi', 'https://gephi.org/', target: '_blank') %>. It will have basic characteristics already computed and a basic layout. You can find more information on using this file in the "<%=link_to("Network Graphing Archived Websites With Gephi", "/derivatives/gephi")%>" tutorial.</li>
-  
-        <li class="about_li"><strong>Raw Network</strong> file, which can also be loaded into <%= link_to('Gephi', 'https://gephi.org/', target: '_blank') %>. You will have to use that network program to lay it out yourself.</li>
+  
+        <li class="about_li"><strong>Gephi</strong> file, which can be loaded into <%= link_to('Gephi', 'https://gephi.org/', target: '_blank') %>. It will have basic characteristics already computed and a basic layout. You can find more information on using this file in the "<%=link_to("Network Graphing Archived Websites With Gephi", "/derivatives/gephi")%>" tutorial. Note that this graph file contains both the archived websites as well as the domains that they are linking to.</li>
+  
+        <li class="about_li"><strong>Raw Network</strong> file, which can also be loaded into <%= link_to('Gephi', 'https://gephi.org/', target: '_blank') %>. You will have to use that network program to lay it out yourself. Similarly to above, note that this graph file contains both the archived websites as well as the domains that they are linking to.</li>
        <li class="about_li"><strong>Domains</strong> file, which will be a CSV file containing the frequency of domains found within your web archive.</li>
        <li class="about_li"><strong>Full Text</strong> file, which will be a large text file containing the extracted plain text of all the HTML files found within a collection. You might want to try loading it into a visualization platform like <%= link_to('Voyant Tools', 'http://voyant-tools.org/', target: '_blank') %> to see patterns and trends within your web archive.
        <li class="about_li"><strong>Full Text by Domain</strong>, which will be a large ZIP file containing ten text files corresponding to the plain text of the top ten domains. For example, if the domain "liberal.ca" is the most popular domain in your web archive, there will be a text file called "liberal-ca.txt". As above, you might want to use <%= link_to('Voyant Tools', 'http://voyant-tools.org/', target: '_blank') %> to see patterns and trends.</strong>
@@ -84,6 +84,7 @@
    <h3 class="about_h3">Interactive Hyperlink Diagram</h3>
    <p class="about_p">We use <%= link_to('GraphPass', 'https://github.com/archivesunleashed/graphpass', target: '_blank') %> to help to create an interactive hyperlink diagram powered by <%= link_to('Sigma js', 'http://sigmajs.org', target: '_blank') %> on the collection page. Sigma is a JavaScript library that assists in drawing and displaying graphs. GraphPass produces visualization-related data in the network files such as color, position and size based on common social network algorithms. In the hyperlink diagram each node (dot) represents a domain (i.e. all of the URLs within a domain such as "yorku.ca" or "newyorktimes.com") and each edge (line) represents a link from one node to another.</p>
+  
+    <p class="about_p">This diagram visualizes the domains that are captured as well as any domains that they may link to. These linked-to domains may or may <strong>not</strong> be contained within the web archived collection.</p>
    <p class="about_p">Users can explore and interact with the hyperlink diagram using the helper buttons in the top left corner of the network window.</p>
      <ul class="about_ul">
        <li class="about_li"><strong>Full Screen</strong> - opens up the network to full screen for easier interaction</li>