My First Week GSoC Journey: Building GraphNet — A Graph Library

Introduction

The Google Summer of Code (GSoC) program has provided me with an incredible opportunity to work on the project: GraphNet. With excitement and determination, I embarked on my GSoC journey, where my initial weeks were dedicated to project initiation, planning the folder structure, and kick-starting the development by creating a graph using the Canvas API. In this article, I will share my experiences, challenges, and accomplishments during this eventful week.

Project Initiation and Planning

Before diving into the code, it was crucial to lay a solid foundation for the project. This involved setting up the necessary tools, defining project requirements, and establishing a clear roadmap.

I along with my mentor carefully planned the folder structure for the project. Organizing the codebase into logical components and modules ensures a maintainable and scalable library. We divided the structure into core, components, utilities, and examples folders, each serving a specific purpose and aiding future contributors in understanding the codebase.

Creating a Graph using Canvas API

The heart of GraphNet lies in its ability to create and manipulate graphs. To kick-start this process, I decided to utilize the power of the Canvas API, a robust HTML5 feature that enables programmable drawing on web pages.

In the initial stages, I focused on creating a basic graph representation on the canvas. I started by defining the graph’s nodes and edges, taking care to ensure that they could be easily customized and connected. By utilizing the canvas’ drawing capabilities, I was able to visualize the graph in a visually appealing manner.

Then, I added some animation to the graph.

Next Steps

Looking ahead, my next steps involve enhancing the graph creation process by introducing additional customization options, such as node styling, edge types, and labels and my main focus will be on Graph physique.