Publish a spreadsheet as an editable graph/network visualisation

[maxkfranz]

Background

Cytoscape.js is a graph theory library for JS. It is often used to create interactive apps that contain graphs. Google Sheets is an app to edit and share spreadsheets online.

Goal

Build an app that allows the user to publish a spreadsheet from Google Sheets as a graph.

Description

Here is an overview of the tasks the project would entail:

1. Create a Node client-server scaffolded project using slush-js
2. Create a HTTP server using Express
3. Use Passport to allow for login using Google accounts via OAuth2
4. Use the Google API npm packages (googleapis and google-auth-library) to allow a user to select and read in a spreadsheet
5. Load the spreadsheet into a Cytoscape graph
6. Use socket.io to save changes that the user makes to the graph as they happen. Only allow the owner user to make edits. Other users can only view.
7. Save the graph JSON and the spreadsheet metadata in RethinkDB
8. Allow anyone to access the graph from a unique URL.
9. Create UI for the user to edit the style of the graph. Basically, this is a UI to create a Cytoscape stylesheet.
10. Allow running different layouts on the graph.
11. Enhancement : Detect when the spreadsheet changes in Google spreadsheet and live update the graph. This may require polling the Google Sheets API.

Skills

List skills/technologies that the student should be familiar with. Also tag the issue with these.

Essential : JS, Node, HTML, CSS, server-side experience, client side UI dev & design experience

Nice to have : Webpack, Express, Cytoscape

Difficulty level 3

This project is difficultly level 3. It is a more difficult project. It requires quickly learning many APIs and many technologies. The student needs to be proficient in building an efficient web server, with a well designed REST API and/or websocket API. The student also needs to be capable of designing clean, minimalistic, easy-to-use user interfaces using web technologies.

Public Repository

https://github.com/cytoscape/cytoscape.js

Potential mentors

Max Franz

[ghost]

I would like to work over this

[Tivcrmn]

Hello, @maxkfranz, I am a senior student in BUPT from China and also I am a frontend developer. I have done a lot of full-stack project using Vue, Express and MongoDB. And also I have some experience with some data visualization tools such as chart.js and g2. I am so interested in the project and look forward to participate in it. Please give me some suggestions about how to get started with it.Or should I get familiar with the tools used in the project and try to do some demos by myself? Looking forward to your reply!!! Thank you!!!!!

[maxkfranz]

Please see the NRNB instructions on how to write and submit a proposal: http://nrnb.org/gsoc.html

[Tivcrmn]

@maxkfranz , Thank you so much!!! I will try to do some demos and make a proposal. Hope that I can join the project.

[yashagarwal97]

Hi Sir, My name is Yash Agarwal. I am keen to take up this project.

About Myself: My name is Yash Agarwal. I am currently pursuing Bachelor of Technology in Computer Science and MS by Research in Bioinformatics at International Institute of Information Technology, Hyderabad, India. I am currently in my 3rd year.

Why I want to take up this project: Sir, I am pursuing research in the field of bioinformatics. I am currently working on a research project on "Analysis and Visualisation of protein networks" and thus, I'm quite interested in contributing to the development of the field. I'm quite familiar with the various visualisation features that can be implemented with the network construction and thus my prior knowledge of the field will help me contribute significantly to this project.

Skills Sir, I am proficient in HTML, CSS, Cytoscape, Javascript, JSON, Php and Python.

Please give me some suggestions about how to get started with it. Thank you.

Regards, Yash Agarwal.