Back in August, Mica came across an HTML5 demo of static D3 force-directed graph and thought it might be a good option for developing a collaborative data science tool in Meteor. As chance would have it, Mica was searching Github for an un-related project a few days later and discovered CytoscapeJS. CytoscapeJS is a well-documented, robust library for network graphing.

A Few Potential Usecases

  • UI for Docker container orchestration.
  • Exploring, annotating, and segmenting data from sensor networks.
  • Organizing information and data for research papers directly from graphs (deep mindmapping)
  • Looking for patterns in infectious disease outbreaks.

Team Members

  • Joshua Chavez (Eagle Point, Oregon, USA)
  • Mica Cardillo (Phoenix, Oregon, USA)
  • Max Franz (Toronto, Canada)

What It Does

It's very primitive at this point. Once a graph is created and data is added, users can add nodes by clicking on the graph. Users change the position of nodes by clicking and dragging them. Users can select nodes by clicking on them and a red dot will appear, and then users can draw edges to connect one node to another. Users can pan and zoom as well. All of the data and node coordinates are synced in real time to all the other clients connected to the same graph. Graphs can be set to public or private.

How We Built It

We set up a Hackpad to brainstorm possible ways to divvy up the work. We attempted the "everything in smart package" approach. Look in the /packages directory.

Challenges We Encountered

  1. Time management. 24 hours did not end up being enough to implement some of the basic editing UI such as the ability to remove nodes and edges from the graph, or to debug the csv importer we were going to use to preload some interesting large graph datasets.
  2. We were going to incorporate artwells:accounts-guest package to make it as easy as possible for users to get started. However, that package does not have a conversion path for anonymous users to turn into real users.
  3. The ian:accounts-ui-bootstrap-3 has a limitation, as we discovered. It won't work as a dependency of another package. This became the exception to our "everything in packages" approach.

Accomplishments We're Proud Of

We have an alpha that is reactive (albeit missing basic features and UI) and were able to do some preliminary testing with with dummy collections of 10,000+ nodes. In the coming weeks, we'll add the critical missing features that will actually make this useful.

What We Learned

Need to have a bigger supply of snacks for next time.

What's Next for Stargraph?

We have a lot planned. See Github for more information.

Meteor Packages

  • meteor-platform
  • maxkfranz:cytoscape
  • twbs:bootstrap
  • natestrauser:x-editable-bootstrap
  • workman:x-editable-reactive-template
  • fontawesome:fontawesome
  • underscore
  • templating
  • jquery
  • session
  • mongo
  • ian:accounts-ui-bootstrap-3
  • accounts-password'
  • accounts-base
  • iron:router
  • underscore
  • ~~~~ the packages below contain our hackathon code ~~~~
  • sg:layouts *
  • sg:pub-sec *
  • sg:data-manage *
  • sg:cytoscape *

Built With

Share this project: