Adds Basic Gephi Learning Guide, Resolves #256 (#257)

* Basic Gephi walkthrough, resolves #256 * Add page test for basic gephi page
archivesunleashed · Jan 31, 2019 · 1518353bb77eec84e41426ea5100b03b2600c750 · 1518353
1 parent eb39de9
commit 1518353bb77eec84e41426ea5100b03b2600c750
diff --git a/app/assets/images/download-gexf.png b/app/assets/images/download-gexf.png
diff --git a/app/assets/images/gephi-1.png b/app/assets/images/gephi-1.png
diff --git a/app/assets/images/gephi-10.png b/app/assets/images/gephi-10.png
diff --git a/app/assets/images/gephi-11.png b/app/assets/images/gephi-11.png
diff --git a/app/assets/images/gephi-12.png b/app/assets/images/gephi-12.png
diff --git a/app/assets/images/gephi-2.png b/app/assets/images/gephi-2.png
diff --git a/app/assets/images/gephi-3.png b/app/assets/images/gephi-3.png
diff --git a/app/assets/images/gephi-4.png b/app/assets/images/gephi-4.png
diff --git a/app/assets/images/gephi-5.png b/app/assets/images/gephi-5.png
diff --git a/app/assets/images/gephi-6.png b/app/assets/images/gephi-6.png
diff --git a/app/assets/images/gephi-7.png b/app/assets/images/gephi-7.png
diff --git a/app/assets/images/gephi-8.png b/app/assets/images/gephi-8.png
diff --git a/app/assets/images/gephi-9.png b/app/assets/images/gephi-9.png
diff --git a/app/views/pages/basic-gephi.html.erb b/app/views/pages/basic-gephi.html.erb
@@ -0,0 +1,50 @@
+  
+<% provide(:title, 'Network Graphing with Gephi') %>
+  
+
+  
+<% cache do %>
+  
+  <div class="container">
+  
+    <h1 class="about_h1">An Introduction to Gephi</h1>
+  
+    <p class="about_p_italic">Tutorial by Ian Milligan (University of Waterloo)</p>
+  
+
+  
+    <h3 class="about_h3">Introduction</h3>
+  
+    <p class="about_p">This is a very basic introduction to Gephi. It begins with the assumption of no knowledge around Gephi, and explains how you can import the file you receive from AUK and do some basic transformations on it yourself.</p>
+  
+    <p class="about_p">While your graphs have some basic characteristics computed for them, you may want to start from fresh and learn some of the basics.</p>
+  
+
+  
+    <h3 class="about_h3">Getting Started: Importing Data</h3>
+  
+    <p class="about_p">This tutorial explores what you can learn from the derivative file marked as "Gephi" or "Raw Network" in your collections page. You can find this by selecting the Gephi or Raw Network derivative. See the screenshot below:</p>
+  
+    <%= image_tag("download-gexf.png", alt: "The derivative download buttons with the Gephi one highlighted", class:"body_img")%>
+  
+    <p class="about_p">The first step is to download and install Gephi, which you can find <%= link_to('here', 'http://gephi.github.io/', target: '_blank') %>.</p>
+  
+    <p class="about_p">Upon opening the Gephi application, you want to select “Open a Graph File...” and select the GEXF file that you have downloaded from AUK.</p>
+  
+    <%= image_tag("gephi-1.png", alt: "The opening page for the Gephi application", class:"body_img")%>
+  
+    <p class="about_p">You then want to click 'ok' on the next page. You can see in the sample data that you have a network with 125 nodes (or domains) with 200 edges (or links between those domains).</p>
+  
+
+  
+    <h3 class="about_h3">Basic Graph Layouts</h3>
+  
+    <%= image_tag("gephi-2.png", alt: "The import page for the Gephi application", class:"body_img")%>
+  
+    <p class="about_p">You'll now see the following basic layout in the Overview tab. Not too useful, is it? Let's begin by creating a new layout, which you'll see highlighted here below:</p>
+  
+    <%= image_tag("gephi-3.png", alt: "A basic layout in Gephi", class:"body_img")%>
+  
+    <p class="about_p">Select the layout tab at left, and select "Yifan Hu Proportional." Leave the values default, but you can begin to play with the figures and see what it does. To lay the graph out, click the "run" button.</p>
+  
+    <p class="about_p">The following image shows what this looks like after clicking "run" on the default visualization.</p>
+  
+    <%= image_tag("gephi-4.png", alt: "A Yifan-Hu layout in Gephi", class:"body_img")%>
+  
+    <p class="about_p">Let's add some labels so we can see what this all means. Click on the "T" button below the graph, which is highlighted below. You'll then see lots of labels. It is not too readable - don't worry, we will deal with that shortly.</p>
+  
+    <%= image_tag("gephi-5.png", alt: "Labels added to the graph", class:"body_img")%>
+  
+    <p class="about_p">The next step is to resize the nodes (domains) based on a characteristic. Let's make them bigger based on how many times they are linked to. This is called "in-degree" in Gephi.</p>
+  
+    <p class="about_p">This can sometimes be a bit challenging to find in the Gephi interface! In the "Appearance" window at left, click on the "size" icon, select "ranking," and then select "In-Degree" with a min sie of 3 and a max size of 40. Then click "Apply."</p>
+  
+    <p class="about_p">If the above is confusing, look at the screenshot below and try to reproduce what you see there.</p>
+  
+    <%= image_tag("gephi-6.png", alt: "Resizing nodes", class:"body_img")%>
+  
+    <p class="about_p">Now let's do the same for label size: the bigger the label, the more it is linked to; the smaller the label, the less it is linked to. You then want to click on the "text size" icon, select "Ranking," and then select "In-Degree." Let's do a min size of 0.1 and a max size of 3. If this is confusing, again try to recreate what you see in the screenshot below.</p>
+  
+    <%= image_tag("gephi-7.png", alt: "Resizing labels", class:"body_img")%>
+  
+    <p class="about_p">Some of the labels now overlap, so let's run another simple "layout." This time, we select "Label Adjust" and press run.</p>
+  
+    <%= image_tag("gephi-8.png", alt: "Label adjust", class:"body_img")%>
+  
+    <p class="about_p">We now have a pretty decently laid out network!</p>
+  
+
+  
+    <h3 class="about_h3">Applying a Statistical Analysis</h3>
+  
+    <p class="about_p">Now let's run a statistical analysis. We'll run a rudimentary community detection algorithm. We can find that in the "statistics" section on the right hand side. Click the "run" button next to modularity, and click through the next report. The two following screenshots show you where to look.</p>
+  
+    <%= image_tag("gephi-9.png", alt: "Modularity class one", class:"body_img")%>
+  
+    <%= image_tag("gephi-10.png", alt: "Modularity class two", class:"body_img")%>
+  
+    <p class="about_p">The final step is to apply the modularity categories to the graph. Let's colour the nodes based on the community that they appear in.</p>
+  
+    <p class="about_p">To do so, go back to apperance. This time click the painter's palette, select "Partition," and then apply "Modularity Class." As before, try to recreate what you see in the screenshot below if it is confusing.</p>
+  
+    <%= image_tag("gephi-11.png", alt: "Applying modularity class to the table", class:"body_img")%>
+  
+    <p class="about_p">At the end of this lesson, your graph should be looking quite a bit like this:</p>
+  
+    <%= image_tag("gephi-12.png", alt: "Final layout", class:"body_img")%>
+  
+    <p class="about_p">Congratulations! You now have a nicely-laid out graph. Try experimenting with other features in Gephi now. If you want to see a fully-fleshed out example of using Gephi with research, please read on to the <%=link_to("Network Graphing Archived Websites With Gephi", "/derivatives/gephi")%> lesson.</p>
+  
+  </div>
+  
+<% end %>
diff --git a/app/views/pages/derivatives.html.erb b/app/views/pages/derivatives.html.erb
@@ -48,9 +48,13 @@
            <p class="about_p">When using the web as a historical source, the ability to see the way websites link to each other can be invaluable. However, using network analysis in historical research can also be a daunting prospect. </p>
            <table id="auk_deriv_accord_table">
              <tbody class="auk_deriv_tbody_table">
-  
-                <tr class="auk_deriv_tr_table">
                  <td class="auk_deriv_td_table"><strong>Tutorial</strong></td>
-  
-                  <td class="auk_deriv_td_table"><%=link_to("Network Graphing Archived Websites With Gephi", "/derivatives/gephi")%></td>
+  
+                  <td class="auk_deriv_td_table">
+  
+                    <ul>
+  
+                      <li class="card_li"><strong><%=link_to("An Introduction to Gephi", "/derivatives/basic-gephi")%></strong>: This tutorial provides a basic "click by click" approach to using Gephi.</li>
+  
+                      <li class="card_li"><strong><%=link_to("Network Graphing Archived Websites With Gephi", "/derivatives/gephi")%></strong>: This tutorial provides an intermediate-level exploration of using Gephi to answer historical questions with a web archive file.</li>
+  
+                    </ul>
+  
+                  </td>
                </tr>
                <tr class="auk_deriv_tr_table">
                  <td class="auk_deriv_td_table"><strong>File Output</strong></td>

diff --git a/config/routes.rb b/config/routes.rb
@@ -24,6 +24,7 @@
  get 'documentation' => 'pages#documentation'
  get 'faq' => 'pages#faq'
  get 'privacypolicy' => 'pages#privacypolicy'
+  
+  get 'derivatives/basic-gephi' => 'pages#basic-gephi'
  get 'derivatives/gephi' => 'pages#gephi'
  get 'derivatives/domains' => 'pages#domains'
  get 'derivatives/text-antconc' => 'pages#text-antconc'

diff --git a/test/controllers/pages_controller_test.rb b/test/controllers/pages_controller_test.rb
@@ -68,4 +68,10 @@ class PagesControllerTest < ActionDispatch::IntegrationTest
    assert_response :success
    assert_select 'title', 'Sentiment Analysis With the Natural Language Toolkit | Archives Unleashed'
  end
+  
+
+  
+  test 'should get basic gephi page' do
+  
+    get derivatives_basic_gephi_path
+  
+    assert_response :success
+  
+    assert_select 'title', 'Network Graphing with Gephi | Archives Unleashed'
+  
+  end
 end