Demo Facebook pages "likes graph" related to Serious Games
Demo Facebook pages "likes graph" related to Serious Games
By Thierry Nabeth, senior research scientist @ independent researcher
(and former participant of the GALA NoE, the FP7 Network of Excellence on Serious Games)
This page displays the 'like' relationships graph of FaceBook pages (top nodes) in the domain of serious games (e.g. Serious Games Society FB page).
Note:
Clicking on a node will open the corresponding Facebook page.
This page displays the 'like' relationships graph of FaceBook pages (top nodes) in the domain of serious games (e.g. Serious Games Society FB page).
Graph visualization is used to make more visible these relationships.
The data describing each top page is obtained from FaceBook Graph API
To view the code, do view source in your favorite browser.
The library D3.js is used for displaying the graph.
Note: This is a work in progress.
More about the Data
The data describing each top page is obtained from FaceBook Graph API using the Graph API explorer,
and manually processed to create .json files (such as facebook-SGS.json).
The (amazing) library D3.js is used for displaying the graph.
This application relies in particular on the d3-force package
for calculating the position of the nodes in the graph visualization
As of now, in the application, the position of the nodes are the result of the pplication of the following forces:
Centering. (for centering the whole network in the center of the canvas)
Links. (for attracting the nodes connected with links)
Many-Body (from creating a repulsion between the nodes, to avoid they are not too close together)
More generally in D3.js, the position of the nodes result typically on the application of a set of multiple
forces that include:
Centering: ( cf. simulation.force("center", d3.forceCenter(x,y)) )
The centering force translates nodes uniformly so that the mean position of all nodes (the center of mass if all nodes have equal weight) is at the given position
Collision: ( cf. simulation.force("collide", d3.forceCollide(radius)) )
The collision force treats nodes as circles with a given radius, preventing nodes from overlapping.
Links: ( cf. simulation.force("link", d3.forceLink()) )
The link force pushes linked nodes together or apart (in a maner similar to a spring force) according to the desired link distance.
Many-Body: ( cf. simulation.force("charge", d3.forceManyBody()) )
The many-body (or n-body) force applies mutually amongst all nodes. It can be used to simulate gravity (attraction) if the strength is positive,
or electrostatic charge (repulsion) if the strength is negative.
Positioning ( cf. simulation.force("x", d3.forceX(valx)) )
The x- and y-positioning forces push nodes towards a desired position along the given dimension with a configurable strength.
To Do
This application is very much an application in progress
To do list:
Pining nodes. (note: using a 'long press gesture'?)
Additional simulation parametrisations.
Better support by mobile devices (e.g. Ipad), for instance with a tentative of implementation of double click, 'long press gesture', etc.
More interactivity (e.g. sliders)
A style sheet for a better look
Implementation of a (Node.js) back-end
Utilization of data originating from other systems (e.g.Twitter or LinkedIn)
This page displays the 'like' relationships graph of FaceBook pages (top nodes) in the domain of serious games (e.g. Serious Games Society FB page).