Visualization Demos

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

21 thoughts on “Visualization Demos”

    1. Joshua Melville

      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/

      Reply ↓
      1. Dominik Golle

        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 -.-

        Reply ↓
        1. Joshua Melville

          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.

          Reply ↓
  2. Shujian B.

    Looks great! Several comments:

    1. Is it necessary to display uid, name, first name and last name? Name is already on the top.
    2. Locale: it’s better to convert the country code to country name, for user’s convenience.
    3. big_pic: since the URL is available, why don’t you just show the picture? Or at least make the link linkable.
    4. Modularity Class and Eccentricity are something that make sense in Gephi, but maybe users do not need to know. Sometimes people will get confused by the numbers.
    5. what’s the clustering method for different color display? not sure why some people bundle together.
    6. “Return to Full Network” is a little bit hard to find. Maybe by clicking on the blank area can guide users back to the home screen?
    7. “Directed” vs “Undirected” – since the follower and followee relationships are known, maybe the graph can be directed. Some people may have many connections, but it’s not because he/she is popular. Maybe he/she just followed a lot of people. So the pointers will make more sense.. I guess..
    Reply ↓
    1. Scott Post author

      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.

      1. The creator of the visualization will be able to choose what attributes to display in the right hand panel. So, yes, probably most creators will not want to include all these
      2. We show attribute text exactly as in the dataset; so if a creator of a visualization will have to expand these in their network if they want to display them
      3. It is possible to indicate which attribute is an image file and load this and the restored Twitter data does this. The creator of a visualization will have to indicate what attribute has a url to do this
      4. We’ll leave displaying these or not up to the creator of the visualization. I agree that they can be confusing to viewers without proper explanation.
      5. Clustering in the Facebook network was a force-directed layout on who linked together most. The Twitter network now in use is much more dense so it doesn’t break apart as much.
      6. Good point on the “Return to Full Network”. I have to look into how easily we can capture the clicks onto empty areas of the canvas
      7. Directed networks are indicated with (small, probably too small) arrows and directed can be indicated in the right-hand panel (as in the government visualization). The Facebook data is undirected and the Twitter data has been narrowed to only mutual relationships, which is why direction is not shown in these graphs.

      Thanks again for the comments! We really appreciate them.

      Reply ↓

  3. Pingback: Updated with IE-compatibility, conference appearance, wizard coming soon | Interactive Visualizations

  4. Pingback: US election zoom-in | Interactive Visualizations

  5. Omar

    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

    Reply ↓
      1. Omar

        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

        Reply ↓
        1. Scott Post author

          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

          Reply ↓
  6. Zack Dee

    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

    Reply ↓
    1. Scott Post author

      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);
      }

      Reply ↓
  7. Enric G. Torrents

    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!

    Reply ↓
    1. Scott Post author

      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.

      Reply ↓
  8. Mangesh

    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

    Reply ↓
    1. Scott Post author

      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

      Reply ↓
  9. Abdul Majeed

    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.

    Reply ↓
    1. Scott Post author

      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

      Reply ↓

Leave a Reply to Scott Cancel reply

Your email address will not be published. Required fields are marked *