Developing Custom UIs to Explore Graph Databases Using Sigma.js

FOSDEM 2025, 1 February 2025
Data Analytics devroom

Alexis Jacomy
OuestWare

ouestware.com
github.com/jacomyal
vis.social/@jacomyal

let's start with
RICardo

RICardo

ricardo.medialab.sciences-po.fr

Research on
International
Commerce

goal:

crafting a dataset on international trades from ~1830 to ~1930 between sovereign entities

core data: trades

an entity reports a trade with another entity, with:

- direction (import/export)
- monetary value
- year

entities are as described in the raw reports

- France
- Southern France
- France & Monaco
- Western Europe
- Paris
   ...

:(

additional dataset:

GeoPolHist provides reference sovereign entities along time, and links them to entities from RICardo

medialab.github.io/GeoPolHist

exchange rates along time

last dataset:

today, let's focus on:

  • raw yearly trade reports
    (with normalized monetary values)

  • relations between entities

let's first put the data in Neo4j and use their browser

github.com/jacomyal/2025-fosdem

the Neo4j indexation scripts are available at

some observations

1. there are many relations

2. trades between sovereign entities is often indirect

  • Colonies

  • Groups

  • Parts (cities, regions...)
    ...

there can be mistakes in the original reports interpretation

3.

this dataset is tricky to explore!

it's a good usecase for some custom UI

here comes
sigma.js

sigmajs.org
vis.social/@sigmajs

built with visual network analysis in mind

graphology

provides many graph algorithms

  • Metrics (pagerank...)

  • Layouts (ForceAtlas2...)

  • Traversal, clustering...

sigma

provides many rendering helpers

  • Nodes (images, borders...)

  • Edges (curves, arrows...)

  • Layers (maps, heatmaps...)

used in many tools already

let's build our exploration interface!

github.com/jacomyal/2025-fosdem

the web application is also available at

the web application is
built with Vite + TypeScript 

"dependencies": {
  "@sigma/edge-curve": "^3.1.0",
  "graphology": "^0.26.0",
  "graphology-layout": "^0.6.1",
  "graphology-layout-forceatlas2": "^0.10.1",
  "neo4j-driver": "^5.27.0",
  "sigma": "^3.0.1"
},

1. ego networks

Neo4j

raw graph data

rich graph data

interactive view

Cypher query

graphology scripting

sigma application

Cypher query

  1. get neighbors: (c)-[r1]-(n)

  2. for each unique neighbors pair, get relations:
    (n1)-[r2]-(n2)

For a given center c

graphology scripting

  1. aggregate all parallel trades

  2. use ForceAtlas2 to get better node positions

  3. set graphical variables
    (sizes, colors, labels)

sigma application

  1. make parallel edges curved

  2. add zoom in/out/reset buttons

  3. add caption

  4. highlight neighbors on hover

2. how to see indirect trades

Cypher query

2. Get all paths with depth 3

For two entities e1 and e2

(e1)-[r1]-(entA)-[r2:TRADES]-(entB)-[r3]-(e2)

1. Get all paths with depth 2

(e1)-[r1]-(entA)-[r2:TRADES]-(e2)

same graphology and sigma scripting

demo time \o/

some insights

the rendered network does not need to be the exact query result

scripting graphology is really easy and comfortable

the separation between graphology and sigma makes the code stay quite simple

I couldn't find the pattern with depth 3
(e1)-[r1]-(entA)-[r2:TRADES]-(entB)-[r3]-(e2)

and it makes sense, since reports mostly come from sovereign entities

I wrote that query for nothing :'(

thanks

:)