Skip to content

Commit 2d6a58e

Browse files
paulgirardpaulgirard
committed
[how-to] first draft
1 parent 4e71471 commit 2d6a58e

11 files changed

Lines changed: 430 additions & 60 deletions

File tree

‎src/components/how-to/Gephi.astro‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
3+
---
4+
5+
<section>
6+
<h3>étape 1</h3>
7+
<p>azezae azezaeeazzae zaeaze zaeza eaz aze</p>
8+
</section>
9+
10+
<section>
11+
<h3>étape 2</h3>
12+
</section>

‎src/components/how-to/GephiLite.md‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<section>
2+
3+
## Open Gephi Lite
4+
5+
> Open Gephi Lite by visiting the address https://gephi.org/gephi-lite/ in your browser (preferably Firefox or Chrome)
6+
7+
</section>
8+
9+
<section>
10+
11+
## Import a dataset
12+
13+
</section>
14+
15+
<section>
16+
17+
### “Welcome”
18+
19+
A ‘Welcome’ window will appear, prompting you to create a new project.
20+
21+
![Gephi lite Welcome modal](./gephi-lite/welcome.png)
22+
23+
In Gephi Lite you can open
24+
25+
- Local graph files that are stored on your computer.
26+
- Graph files stored in your GitHub account.
27+
28+
Creating a network based on your own data depends on your project, discipline, data source, etc.
29+
30+
- An Excel or CSV file with two columns “Source” and “Target” (indicating the origin and end of the connection) is sufficient to produce a network in Gephi.
31+
- If your data table is encoded differently, you can use [Table2Net](https://medialab.github.io/table2net/) to convert it into a Gephi network.
32+
- Other data analysis and web analytics software can also be used to produce files (Gexf or GraphML) compatible with Gephi Lite.
33+
34+
> For this tutorial, select the first sample dataset, “Les_Miserables.gexf”, which contains a very simple network of characters from Victor Hugo's novel.
35+
36+
</section>
37+
38+
<section>
39+
40+
### “Data laboratory”
41+
42+
Now that the GEXF has been imported, a network appears in the centre of the “Graph” window.
43+
44+
> Before working on it, however, click on “Data” at the top of the Gephi Lite interface to open the data table window.
45+
46+
![Gephi Lite data table](./gephi-lite/datalab.png)
47+
48+
The “Data” window allows you to view, and if necessary edit, your data in tabular format.
49+
50+
At the top left of this window, the “Nodes” and “Edges” buttons allow you to navigate between the two tables.
51+
52+
In both of them you can
53+
54+
- sort the nodes and edges of your network, clicking on the headings of the table
55+
- search nodes and edges using the field on the top right
56+
57+
Using the menu on the left, you can also
58+
59+
- create new nodes, edges or columns
60+
- filters the tables
61+
- calculate metrics
62+
63+
> Click on the “Graph” tab at the very top of the interface, to go back to the main exploration window of Gephi Lite.
64+
65+
</section>
66+
67+
<section>
68+
69+
## Interacting with the network
70+
71+
</section>
72+
73+
<section>
74+
75+
### “Graph”
76+
77+
The “Graph” window is the heart of Gephi Lite. It displays your networks according to the parameters you set in the menu on the left.
78+
79+
![Les misérables.gexf in the graph view](./gephi-lite/graph.png)
80+
81+
Since most networks are too complex for each of their elements to be readable at the same time, the “Graph” window allows you to
82+
83+
- zoom: by using the scrolling gesture you use on your computer on the network
84+
- pane: by left-clicking and dragging on the background of the graph
85+
- move nodes around: by left-clicking and dragging them
86+
87+
On the bottom right of the graph, buttons allows you to switch between a series of tools to
88+
89+
- select nodes individually or through a rectangle or a lasso
90+
- to zoom in an out and to recenter your network
91+
92+
</section>
93+
94+
<section>
95+
96+
## Changing the objects size and colors
97+
98+
</section>
99+
100+
<section>
101+
102+
### “Appearance”
103+
104+
In the “Appearance” menu on the left side of the graph window, you can change the colour and size of nodes, edges and of their label based on pre-existing attributes or metrics calculated by Gephi.
105+
106+
</section>
107+
108+
<section>
109+
110+
### “Nodes Appearance”
111+
112+
By default in this sample GEXF dataset, nodes are coloured according to their “Modularity class”, a category obtained by a community detection calculation. You can change this choice or the palette of color used to represent it.
113+
114+
> Click on "Appearance", then “Nodes”.
115+
> In the “Set color from...” drop-down menu select “modularity_class”.
116+
117+
> Check the “Shade nodes colors”.
118+
> Select “Size” from the drop-down menu.
119+
> Chose black from the “Target color” color picker.
120+
> Set the “Shading degree” to 0,7.
121+
122+
![Nodes appearance tab open](./gephi-lite/appearance_nodes_1.png)
123+
124+
> Now unfold the “Size” drop-down menu
125+
> Choose the “Degree (dynamic)” option to change the size of your nodes proportionally to the number of their connections
126+
> Enter minimum and maximum values (e.g. 10 and 60) to resize the nodes
127+
> Notice that a legend for size and color is automatically generated and updated at the bottom of your graph
128+
129+
![Nodes appearance tab open and caption visible on graph](./gephi-lite/appearance_nodes_2.png)
130+
131+
</section>
132+
133+
<section>
134+
135+
### “Labels Appearance”
136+
137+
Under "Appearance”, in the submenu “Labels”, you can change the size and density of the labels of you graph.
138+
139+
> Unfold the drop-down menu under “Set label sizes from...” and chose “Nodes size”
140+
> Set the label size to “20”
141+
> Move the slider under “How many labels should appear any time” to hide the smaller labels
142+
143+
</section>
144+
145+
<section>
146+
147+
## Playing with the layout
148+
149+
</section>
150+
151+
<section>
152+
153+
### ForceAtlas2
154+
155+
In the “Layout” menu, you can modify the spatialisation of the graph by choosing one of the algorithms offered.
156+
157+
> Unfold the “Layout” menu.
158+
> Select “ForceAtlas 2” — the force-directed algorithm especially developed for Gephi.
159+
> Click the button “Start” at the bottom of the menu to launch the algorithm and see the nodes repulse each other and the edges binding the nodes that they connects.
160+
> When the algorithm has reached a stable balance between the two forces and you are satisfied with the result, click “Stop” to halt the spatialization process.
161+
162+
You will find that you need to play around with the settings to obtain a readable network:
163+
164+
> Check the “Adjust size?” check-box.
165+
> Change the “Scaling ratio” to 50 to give the graph more space.
166+
> Click “Start” again to launch the algorithm with the new settings.
167+
168+
</section>
169+
170+
<section>
171+
172+
## Graph metrics
173+
174+
</section>
175+
176+
<section>
177+
178+
### “Metrics”
179+
180+
The “Metrics” menu on the left side of the screen allows you to calculate certain properties of the graph. For example, it includes centrality metrics and calculations that provide information about the overall structure of the network, its clusters, and communities.
181+
182+
</section>
183+
184+
<section>
185+
186+
### “Betweeness centrality”
187+
188+
> To calculate betweenness centrality, select it under the “Metric” menu and click on “Compute metric” at the very bottom of the menu.
189+
> The values for this metric are now recorded in the Nodes table of the “Data” table in fresh new columns.
190+
191+
</section>
192+
193+
<section>
194+
195+
### “Appearance” to apply the new metric to the nodes
196+
197+
You can now return to the “Appearance” window to change the colour of the nodes based on the betweenness centrality you just calculated.
198+
199+
> Select “Nodes” under “ then the “Appearance”.
200+
> In the “Set color from...” drop-down menu select “betweennessCentrality”.
201+
> You can then choose the colour gradient by clicking directly on the coloured bar and change the colours manually.
202+
203+
</section>
204+
205+
<section>
206+
207+
## Filtering the graph
208+
209+
</section>
210+
211+
<section>
212+
213+
### “Filters”
214+
215+
The “Filters” menu allows you to filter your graph in multiple ways based on attributes or properties of nodes or edges, as well as based on the overall topology of the network.
216+
217+
> In the “Nodes” drop-down menu, select “Nodes”.
218+
> In the “Using” drop-down menu, select “degree (dynamic)”.
219+
> Click on the “Create filter” button.
220+
> Gephi Lite will automatically generate an histogram of the distribution of the degree in your network
221+
> Increase the “Min” value to 2, to hide all the nodes with less than 2 connections.
222+
> The small histogram now shows that you are no longer viewing the entire network.
223+
224+
</section>
225+
226+
<section>
227+
228+
## “Export” the graph file and picture
229+
230+
To export your network file:
231+
232+
> Open the “Workspace” menu at the top left of Gephi Lite's interface.
233+
> Select “Export graph file” to download your network in .gexf format.
234+
235+
To export the network picture:
236+
237+
> Select “Export image” to download a .png snapshot of your network as you visualized it
238+
239+
</section>
240+
<section>
241+
242+
## Saving the Gephi Lite project
243+
244+
Exporting the graph file or a picture is not the (only) output of your work. Before leaving, don't forget to save your Gephi Lite project itself.
245+
246+
> Open the “Workspace” menu
247+
> Click on “Save as…”
248+
> Choose if you want to download the project on your computer as a .json or save it to your GitHub account.
249+
250+
You can then reopen it later with all your changes intact!
251+
252+
</section>

‎src/components/how-to/gephi-lite/appearance_nodes_1.png‎

277 KB
Loading

‎src/components/how-to/gephi-lite/appearance_nodes_2.png‎

419 KB
Loading

‎src/components/how-to/gephi-lite/datalab.png‎

212 KB
Loading

‎src/components/how-to/gephi-lite/graph.png‎

305 KB
Loading

‎src/components/how-to/gephi-lite/welcome.png‎

35.2 KB
Loading

‎src/pages/how-to/index.astro‎

Lines changed: 22 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,26 @@
11
---
2-
import UnderConstructionPage from "../../components/UnderConstructionPage.astro";
2+
import Gephi from "../../components/how-to/Gephi.astro";
3+
import GephiLite from "../../components/how-to/GephiLite.md";
4+
import Layout from "../../layouts/Layout.astro";
35
---
46

5-
<UnderConstructionPage title="How-to">
6-
<p>The How to page will propose a beginner tutorial and list existing tutorials you can find online.</p>
7-
<div slot="more-information">
8-
<p>Meanwhile you can visit the tutorials made by the community:</p>
9-
<p>
10-
<b>Ver&oacute;nica Espinoza</b> teaches Gephi applied to computer sciences and digital anthropology at NetHabitus (Mexico).
11-
On her Medium blog, she publishes numerous resources that allow users to discover and compare the features of several
12-
network analysis software programs, including <a
13-
href="https://www.google.com/url?q=https://medium.com/@vespinozag&sa=D&source=editors&ust=1756735244743974&usg=AOvVaw2wyMMCPwevWenHM2-xFp17"
14-
>Gephi tutorials</a
15-
> on various plugins, functionalities, and tools for extracting networks from various sources. She also publishes resources
16-
and tools on her
17-
<a
18-
href="https://www.google.com/url?q=https://www.veronicaespinoza.org/welcome&sa=D&source=editors&ust=1756735244744353&usg=AOvVaw29ge92FfGUZEbcRu7u9LgX"
19-
>personal website</a
20-
>.
21-
</p>
22-
<p>
23-
<b>Martin Grandjean</b> teaches Gephi applied to history and the humanities at the University of Lausanne (Switzerland).
24-
On his blog, which features many examples of how Gephi can be used on a variety of datasets, he offers a
25-
<a
26-
href="https://www.google.com/url?q=https://www.martingrandjean.ch/gephi-introduction/&sa=D&source=editors&ust=1756735244744936&usg=AOvVaw32OvUxXJTv0OdKGF6sTCCh"
27-
>Gephi tutorial</a
28-
> that walks users through the main steps of analyzing a dataset, including a geographical component, a transition
29-
from a 2-mode to a 1-mode graph, and a complete video walkthrough. He also posts explanatory videos on his <a
30-
href="https://www.google.com/url?q=https://www.youtube.com/@MartinGrandjean&sa=D&source=editors&ust=1756735244745438&usg=AOvVaw2ds15CHrQ7pQTMYZkUCZNy"
31-
>YouTube channel</a
32-
>.
33-
</p>
34-
<p>
35-
<b>Mathieu Jacomy</b> co-creator of Gephi, teaches Gephi applied to the social sciences at Aalborg University in Copenhagen
36-
(Denmark). On his website, which brings together a host of tutorials and notebooks on Controvery Mapping, he offers
37-
<a
38-
href="https://www.google.com/url?q=https://jacomyma.github.io/mapping-controversies/%23visualizing-networks-gephi&sa=D&source=editors&ust=1756735244746150&usg=AOvVaw1Q8bsfpcw6e3tiubYs86N_"
39-
>several Gephi tutorials</a
40-
>, from introductory level to specific lessons on bipartite networks, weighted networks or the use of Table2Net (a
41-
tool he developed himself) to prepare data. Have also a look at his
7+
<Layout>
8+
<header class="banner py-5">
9+
<section class="container my-5 py-4">
10+
<h1>How to?</h1>
11+
</section>
12+
</header>
4213

43-
<a
44-
href="https://www.google.com/url?q=https://www.youtube.com/@jacomyma&sa=D&source=editors&ust=1756735244746622&usg=AOvVaw2ibYfXBsApf4b0wtOy-rl5"
45-
>YouTube channel</a
46-
> and his blog - <a
47-
href="https://www.google.com/url?q=https://reticular.hypotheses.org/&sa=D&source=editors&ust=1756735244746766&usg=AOvVaw1emsss82uDsfOg4HGbHldZ"
48-
>Reticular</a
49-
> - where he publishes reflections on the visual analysis of networks.
50-
</p>
51-
<p>
52-
<b>Cl&eacute;ment Levallois</b> Cl&eacute;ment Levallois teaches Gephi applied to economics and design at Gobelins
53-
Paris (France). He has compiled his <a
54-
href="https://www.google.com/url?q=https://seinecle.github.io/gephi-tutorials/&sa=D&source=editors&ust=1756735244747353&usg=AOvVaw1OgTEkI2rHbyYZlklJXs4l"
55-
>Gephi tutorials</a
56-
> on a dedicated website, covering features such as importing, filters, dynamic networks, and the use of various tools
57-
and plugins that he has developed himself to facilitate graph data processing. He also created the
58-
<a
59-
href="https://www.google.com/url?q=https://nocodefunctions.com/&sa=D&source=editors&ust=1756735244747844&usg=AOvVaw2ofXixE87orZ693snBgUlj"
60-
>nocodefunctions</a
61-
> website to bring together the various tools he develops.
62-
</p>
63-
</div>
64-
</UnderConstructionPage>
14+
<main class="py-5">
15+
<section class="how-to container">
16+
<article class="how-to-column" id="gephi">
17+
<h2>Gephi</h2>
18+
<Gephi />
19+
</article>
20+
<article class="how-to-column" id="gephi-lite">
21+
<h2>Gephi Lite</h2>
22+
<GephiLite />
23+
</article>
24+
</section>
25+
</main>
26+
</Layout>

0 commit comments

Comments
 (0)