Skip to content

Commit 42705db

Browse files
jacomymajacomyma
authored
Merge pull request #56 from gephi/ticket/42_gephi_desktop_page_content
Copy of current website 'Feature' page as Gephi desktop new page
2 parents 506a513 + f51011d commit 42705db

7 files changed

Lines changed: 293 additions & 7 deletions

File tree

‎public/desktop/layout_01.png‎

295 KB
Loading

‎public/desktop/layout_02.png‎

803 KB
Loading

‎public/desktop/realtime_01.png‎

454 KB
Loading

‎public/desktop/realtime_02.png‎

499 KB
Loading

‎public/desktop/realtime_03.png‎

525 KB
Loading

‎src/pages/desktop/index.astro‎

Lines changed: 291 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,26 @@ import Layout from "../../layouts/Layout.astro";
4848

4949
<section class="container pb-5">
5050
<section class="feature feature-flat">
51+
<!-- TODO: Insert a better background image for this topic -->
5152
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
5253
<section class="feature-headline">
5354
<div class="feature-text">
5455
<h2>
5556
<Icon name="ph:lightbulb" class="text-primary" />
56-
<span>Gephi is nice!</span>
57+
<span>Gephi Desktop</span>
5758
</h2>
5859
<p>
59-
And then some text! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo amet, cum aliquid
60-
praesent zzril aliquid culpa euismod enim anim facer reprehenderit soluta rebum, odio diam nihil nonummy
61-
fugiat exerci proident eos dolore at stet clita sed.
60+
Started in 2008, <strong>Gephi</strong> is the leading visualization and exploration software for all kinds
61+
of graphs and networks.
62+
</p>
63+
64+
<p>
65+
<strong>Gephi</strong> is open-source and free under the <a
66+
href="https://www.gnu.org/licenses/gpl-3.0.fr.html">GPL License</a
67+
>.
6268
</p>
6369
<p>
64-
Labore nostrud, ea duis volutpat consectetuer adipisici nobis feugait nobis doming proident facilisis
65-
feugait commodi sanctus.
70+
It's written in <a href="https://www.java.com">Java</a>, and runs on Windows, Mac OS X and Linux.
6671
</p>
6772
</div>
6873
</section>
@@ -79,6 +84,286 @@ import Layout from "../../layouts/Layout.astro";
7984
</figure>
8085
</section>
8186
</section>
87+
88+
<section class="feature feature-flat">
89+
<!-- TODO: Insert a better background image for this topic -->
90+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
91+
<section class="feature-headline">
92+
<div class="feature-text">
93+
<h2>
94+
<Icon name="ph:star" class="text-primary" />
95+
<span>Features</span>
96+
</h2>
97+
<p>
98+
<strong>Gephi</strong> is a tool for data analysts and scientists keen to <strong
99+
>explore and understand graphs.</strong
100+
>
101+
</p>
102+
<p>
103+
Like GIMP but for <strong>graph data</strong>, the user interacts with the representation, manipulate the
104+
structures, shapes and colors to reveal hidden patterns.
105+
</p>
106+
<p>
107+
The goal is to help data analysts to <strong
108+
>make hypothesis, intuitively discover patterns, isolate structure singularities</strong
109+
> or faults during data sourcing. It is a complementary tool to traditional statistics, as <strong
110+
>visual thinking
111+
</strong>with interactive interfaces is now recognized to facilitate reasoning.
112+
</p>
113+
<p>
114+
This is a software for <a href="https://en.wikipedia.org/wiki/Exploratory_data_analysis"
115+
>Exploratory Data Analysis</a
116+
>, a paradigm appeared in the <strong>Visual Analytics</strong> field of research.
117+
</p>
118+
</div>
119+
</section>
120+
121+
<section class="feature-arguments">
122+
<figure class="figure">
123+
<iframe
124+
width="560"
125+
height="315"
126+
src="https://www.youtube.com/embed/TFBkAO1MjnU?si=Zkmbg_S2XJHlgtuq"
127+
title="YouTube video player"
128+
frameborder="0"
129+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
130+
referrerpolicy="strict-origin-when-cross-origin"
131+
allowfullscreen></iframe>
132+
<figcaption class="figure-caption text-muted text-center">A short introduction to Gephi</figcaption>
133+
</figure>
134+
</section>
135+
</section>
136+
137+
<section class="feature feature-flat">
138+
<!-- TODO: Insert a better background image for this topic -->
139+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
140+
<section class="feature-headline">
141+
<div class="feature-text">
142+
<h2>
143+
<Icon name="ph:cursor-click" class="text-primary" />
144+
<span>Real-time visualization</span>
145+
</h2>
146+
<p>
147+
Profit from the fastest <strong>graph visualization engine</strong> to speed-up understanding and pattern discovery
148+
in large graphs.
149+
</p>
150+
<p>
151+
Powered by its <strong>custom OpenGL engine </strong>, <strong>Gephi</strong> is pushing the envelope on how
152+
interactive and efficient <strong>network exploration</strong> can be.
153+
</p>
154+
<ul>
155+
<li>Networks up to <strong>100,000 nodes</strong> and <strong>1,000,000 edges</strong></li>
156+
<li>Iterate through visualization using <strong>dynamic filtering</strong></li>
157+
<li>Rich tools for meaningful <strong>graph manipulation</strong></li>
158+
</ul>
159+
</div>
160+
</section>
161+
162+
<section class="feature-arguments">
163+
<figure class="figure">
164+
<img src="/public/desktop/realtime_01.png" class="border figure-img img-fluid" alt="" />
165+
</figure>
166+
167+
<figure class="figure">
168+
<img src="/public/desktop/realtime_02.png" class="border figure-img img-fluid" alt="" />
169+
</figure>
170+
</section>
171+
</section>
172+
173+
<section class="feature feature-flat">
174+
<!-- TODO: Insert a better background image for this topic -->
175+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
176+
<section class="feature-headline">
177+
<div class="feature-text">
178+
<h2>
179+
<Icon name="ph:git-fork" class="text-primary" />
180+
<span>Layout</span>
181+
</h2>
182+
<p>
183+
Layout algorithms give the shape to the graph. <strong>Gephi</strong> provides <strong
184+
>state-of-the-art network layout algorithms</strong
185+
>, both for efficiency and quality.
186+
</p>
187+
<p>
188+
<strong>The Layout module</strong> allows user to change layout settings while running, and therefore dramatically
189+
increase user feedback and experience.
190+
</p>
191+
192+
<ul>
193+
<li>Force-based algorithms</li>
194+
<li>Optimize for graph readability</li>
195+
</ul>
196+
</div>
197+
</section>
198+
199+
<section class="feature-arguments">
200+
<figure class="figure">
201+
<img src="/public/desktop/layout_01.png" class="border figure-img img-fluid" alt="" />
202+
</figure>
203+
204+
<figure class="figure">
205+
<img src="/public/desktop/layout_02.png" class="border figure-img img-fluid" alt="" />
206+
</figure>
207+
</section>
208+
</section>
209+
210+
<section class="feature feature-flat">
211+
<!-- TODO: Insert a better background image for this topic -->
212+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
213+
<section class="feature-headline">
214+
<div class="feature-text">
215+
<h2>
216+
<Icon name="ph:chart-scatter" class="text-primary" />
217+
<span>Metrics</span>
218+
</h2>
219+
<p>
220+
The statistics and metrics framework offer the most common metrics for <strong
221+
>social network analysis
222+
</strong> (SNA) and <strong>scale-free networks</strong>.
223+
</p>
224+
<ul>
225+
<li>Betweenness Centrality, Closeness, Diameter, Clustering Coefficient, PageRank</li>
226+
<li>Community detection (Modularity)</li>
227+
<li>Random generators</li>
228+
<li>Shortest path</li>
229+
</ul>
230+
</div>
231+
</section>
232+
233+
<section class="feature-arguments">
234+
<!-- TODO: Insert pictures or media to illustrate this topic -->
235+
</section>
236+
</section>
237+
238+
<section class="feature feature-flat">
239+
<!-- TODO: Insert a better background image for this topic -->
240+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
241+
<section class="feature-headline">
242+
<div class="feature-text">
243+
<h2>
244+
<Icon name="ph:map-trifold" class="text-primary" />
245+
<span>Make Cartography</span>
246+
</h2>
247+
<p>
248+
Use ranking or partition data to make meaningful the <strong>network representation</strong>. Customize
249+
colors, size or labels to bring sense to the network representation.
250+
</p>
251+
<p>
252+
The <strong>vectorial based</strong> preview rendering lets you put the final touch and care about aesthetics
253+
before explorting in <strong>SVG</strong>, <strong>PNG</strong> or <strong>PDF</strong>.
254+
</p>
255+
<ul>
256+
<li>Customizable export parameters</li>
257+
<li>Save presets</li>
258+
</ul>
259+
</div>
260+
</section>
261+
262+
<section class="feature-arguments">
263+
<!-- TODO: Insert pictures or media to illustrate this topic -->
264+
</section>
265+
</section>
266+
267+
<section class="feature feature-flat">
268+
<!-- TODO: Insert a better background image for this topic -->
269+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
270+
<section class="feature-headline">
271+
<div class="feature-text">
272+
<h2>
273+
<Icon name="ph:grid-nine" class="text-primary" />
274+
<span>Data Table and Edition</span>
275+
</h2>
276+
<p>
277+
<strong>Gephi</strong> has its own <strong>Data Laboratory</strong> to manipulate data columns, search and
278+
transform the data.
279+
</p>
280+
<ul>
281+
<li>Powerful Search/Replace</li>
282+
<li>Manipulate columns</li>
283+
<li>Batch-edit, custom column merge and more</li>
284+
</ul>
285+
</div>
286+
</section>
287+
288+
<section class="feature-arguments">
289+
<!-- TODO: Insert pictures or media to illustrate this topic -->
290+
</section>
291+
</section>
292+
293+
<section class="feature feature-flat">
294+
<!-- TODO: Insert a better background image for this topic -->
295+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
296+
<section class="feature-headline">
297+
<div class="feature-text">
298+
<h2>
299+
<Icon name="ph:exclude" class="text-primary" />
300+
<span>Dynamic Filtering</span>
301+
</h2>
302+
<p>
303+
<strong>Filter the network </strong> to select nodes and/or edges based on the <strong
304+
>network structure</strong
305+
> or<strong>data</strong> .
306+
</p>
307+
<p>
308+
Use interactive user interface to filter the network <strong>in real-time</strong>.
309+
</p>
310+
</div>
311+
</section>
312+
313+
<section class="feature-arguments">
314+
<!-- TODO: Insert pictures or media to illustrate this topic -->
315+
</section>
316+
</section>
317+
318+
<section class="feature feature-flat">
319+
<!-- TODO: Insert a better background image for this topic -->
320+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
321+
<section class="feature-headline">
322+
<div class="feature-text">
323+
<h2>
324+
<Icon name="ph:tray-arrow-down" class="text-primary" />
325+
<span>Input / Output</span>
326+
</h2>
327+
<p>
328+
<strong>Gephi</strong> can read the majority of <strong>graph file formats</strong> but also supports
329+
<strong>CSV</strong> and <strong>databases</strong> import.
330+
</p>
331+
<ul>
332+
<li>Spreadsheet import wizard</li>
333+
<li>Database import</li>
334+
<li>Save/Load project files</li>
335+
</ul>
336+
</div>
337+
</section>
338+
339+
<section class="feature-arguments">
340+
<!-- TODO: Insert pictures or media to illustrate this topic -->
341+
</section>
342+
</section>
343+
344+
<section class="feature feature-flat">
345+
<!-- TODO: Insert a better background image for this topic -->
346+
<div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
347+
<section class="feature-headline">
348+
<div class="feature-text">
349+
<h2>
350+
<Icon name="ph:circles-three-plus" class="text-primary" />
351+
<span>Extensible</span>
352+
</h2>
353+
<p>
354+
The built-in <strong>Plugins Center</strong> automatically gets the list of plugins available from the
355+
<strong><a href="/desktop/plugins">Gephi Plugin portal</a></strong> and takes care of all software updates.
356+
</p><p>
357+
There are various<strong> community-built</strong> plugins that extends <strong>Gephi's</strong>
358+
functionalities.
359+
</p>
360+
</div>
361+
</section>
362+
363+
<section class="feature-arguments">
364+
<!-- TODO: Insert pictures or media to illustrate this topic -->
365+
</section>
366+
</section>
82367
</section>
83368
</main>
84369
</Layout>

‎src/styles/_homepage.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,9 @@
7070
}
7171

7272
.feature-text {
73+
@extend .fs-4;
74+
7375
p {
74-
@extend .fs-4;
7576

7677
&:last-child {
7778
margin: 0;

0 commit comments

Comments
 (0)