This project will create online wizards to let users easily create and customize interactive visualizations with their own network and geospatial data. Before the wizard is finished, we are very excited to release demo visualizations as examples of what users will be able to produce and customize. We are very keen to get your feedback on how the visualizations work, what customization options are needed, and other general feedback. We’ve tested these visualizations in the latest versions of Safari, Firefox, Opera, and Chrome on Windows, Linux, and Mac, but we consider these to be very much work-in-progress. The more specific you can be in describing any suggestions or issues the better. Please at a minimum include your operating system (Windows, Mac, Linux) and browser version.
So, please leave feedback! What works, what’s missing, and what would you ideally change? Leave a comment below or send an email.
Click an image below to launch that visualization. Alternatively, read more about the project, read more about the network visualizations, read more about the map visualization, or view our open-source code on GitHub.
Thanks so much!
Demo 1: Visualization of followers at @OIITwitter
Background information about this visualization
Demo 2: Visualization of UK Central Government
Demo 3: Visualization of Literacy and Gender
Background information about this visualization
Demo 4: US Elections on Twitter
Background information about this visualization
Great work! It reminds me of Wolfram Alpha’s (https://www.wolframalpha.com/) facebook report – do you have a stake in that also?
Hi Dominik! Thanks for your kind words.
We don’t have a stake in the Wolfram Alpha personal analytics project, but we have certainly taken note of those developments. In collaboration with my supervisor (Dr. Bernie Hogan) we have used the InteractiveVis project to visualise Facebook networks and allow users to export their data. If you are interested in taking a look, you can find the app at https://apps.facebook.com/namegenweb/
Thanks – this looks even better than WolframAlpha, because one can actually export the data! Can wait to play around with them in Gephi ^^
I was wondering lately – how do you get access to FB data? Or is it only the personal user data they are supposed to give to you by law? In the end, it’s probably the biggest sociological database on the planet… in private hands -.-
Yes Dominik this is something of a personal peeve of mine too – there is no way to access raw Facebook data unless you are a member of the data team or you are one of the privileged few researchers who are given access. The possibilities afforded by open access to researchers would be very great indeed.
Our app simply accesses the data of the user who has authorised it, using the Facebook API. There is no way to access any data that would not otherwise be available to the user (for example two degree “friends of friends” networks are not possible because users cannot download their friend’s friend list, so we must instead capture a 1.5 degree mutual friends network). If you are interested in how to capture Facebook data, the sourcecode for NameGen is available on GitHub for free. We welcome contributions.
Uh, nice! I’ll have a look at it! t-1.5y to finish my MPP at Hertie School, the so applying to OII!
Looks great! Several comments:
Shujian, thanks for the comments. You looked at the visualizations just after some changes were pushed and within them we changed the data set. So, the dataset you saw was actually a Facebook-ego net, not the Twitter data. The ultimate goal of the project is to create a wizard to allow other individuals to easily create visualizations like these. Most of the very good ideas you raise are decisions we’ll leave up to the user, e.g.
Thanks again for the comments! We really appreciate them.
Pingback: Updated with IE-compatibility, conference appearance, wizard coming soon | Interactive Visualizations
Pingback: US election zoom-in | Interactive Visualizations
Hello,
I am trying to create a project in Arabic language but the words appears corrupted in the browser (only words coming from JSON files, the ones embedded in the html file are okay). Is there a specific way to encode it properly? I tired to look into the js files but with no hopes
Regards,
Omar
Omar,
Could you try the beta-version of the plugin referenced here https://github.com/oxfordinternetinstitute/gephi-plugins/issues/11#issuecomment-15705989 and let me know if it solves the issue for you. If not, what operating system and what version of Java are you using?
Cheers,
Scott
Scott,
Many thanks for your reply. It worked fine with the version you listed above. So shall I carry-on using this beta-version?
Kind regards,
Omar
Hi Omar,
Just to update this for anyone who is reading later. The current version of the plugin now fixes this issues so from here onwards there is no need to use the beta version. (No problem to continue doing so right now, however.)
Cheers,
Scott
Your plugin for Gephi is awesome! Thank you for putting so much work into it 🙂
I was wondering if there is a way to export a gephi graph into a sigma.js ForceAtlas2 animation.
What I like most about gephi is to actually watch the algo run and see all the nodes organize themselves as if it were directed by magic.
Now, there is a sigma.js working example of an animated ForcedAtlas2 algo running in browser http://bit.ly/GOnRLF… BUT, in the example, he uses a random graph to animate run the algo on. And I cannot figure out how to use my own network data in his example.
My question is if anyone knows how to use your own gephi generated data in the sigma.js ForceAtlas2 instead of just using it on a randomly generated graph as he does in the example file.
Please, any help or guidance would be totally most excellently awesome. Thanks again, Zack
Hi Zack,
The easiest thing to do, should be do layout your graph in Gephi with the “Random Layout”. Then export your graph using file->export->sigma.js template and same where you like. You’ll then need to edit two files along the files of the example you link to. First, open the index.html file in a text editor (e.g., notepad) and add a line to include the “sigma.forceatlas2.js” file (e.g., <script src="sigma.forceatlas2.js"></script>) and save the sigma.forceatlas2.js file from the example or repository in the same location as index.html. Also in the index.html, add the button to start/stop layout where you’d like (<button class="btn" id="stop-layout">Stop Layout</button>).
Second, open the main.js file in the js folder with a text editor. Find the line that is a.draw and replace it with the relevant code from the example at that point: e.g.,
sigInst.startForceAtlas2();
var isRunning = true;
document.getElementById(‘stop-layout’).addEventListener(‘click’,function(){
if(isRunning){
isRunning = false;
sigInst.stopForceAtlas2();
document.getElementById(‘stop-layout’).childNodes[0].nodeValue = ‘Start Layout’;
}else{
isRunning = true;
sigInst.startForceAtlas2();
document.getElementById(‘stop-layout’).childNodes[0].nodeValue = ‘Stop Layout’;
}
},true);
document.getElementById(‘rescale-graph’).addEventListener(‘click’,function(){
sigInst.position(0,0,1).draw();
},true);
}
Excellent work!! I have been trying to add a node shape attribute to the GEXF data files (square, diamond, start, or custom from an external image) but so far no luck. Any suggestions? Thank you!
The underlying sigma.js library doesn’t support node shapes at the moment — code has been contributed to the repository but not yet incorporated. Once it is (or if I end up branching my own sigma.js codebase) I’ll be able to add this to the framework.
Hi,
I have also used the sigma JS plugin to export my graph from gephi.
Link – > lineage.azurewebsites.net
I want to make this a directed graph with arrows going from one node to another Do I need to change any particular option in a particular file ? What am I missing ?. Please help .
Mangesh
Hi Mangesh,
It is not currently possible to show edge arrows on the graph. This is something I hope to add in the future.
Cheers,
Scott
AOA,
I go through this whole list thanks for valuable comments.
Is there anyway to use csv files with sigma.js and then make graphs rather than making graph in gephi and then rendering in browsers.
if you have link do sent me please.
Hi Abdul,
It would be possible to read in a CSV, but if that CSV doesn’t have node sizes and positions then the existing framework won’t be able to visualize it. Beyond using Gephi to do this layout work, you could perform the layout each viewer’s computer with JavaScript (e.g., https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.layout.forceAtlas2) or use a server-side option such as R/igraph or the Gephi Toolkit (http://gephi.github.io/toolkit/). If you are going to use the JavaScript option you will want to not use this framework but redevelop directly with the latest version of sigma.js for the best compatibility with new plugins.
Cheers,
Scott