From d0b89bd54812b65c80166b4ec59df527ee6c9056 Mon Sep 17 00:00:00 2001 From: Umang Singh <67512605+U-S01@users.noreply.github.com> Date: Sat, 25 Feb 2023 14:45:52 +0530 Subject: [PATCH 1/3] Update README.md --- README.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a79cc2a..435ccad 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,52 @@ -# GraphNet -Graphnet is a javascript graph library that will be created as a module to the semantic UI framework. Whereas Graphnet dynamically renders all nodes and edges via websocket connections, node and edge positioning algorithms such as force, random, circular, and others must be provided within the Graphnet as builtin modules. +## Graphnet + +Graphnet is a JavaScript graph library that provides powerful tools for visualizing and interacting with graphs on the web. It is designed to be used as a module within the Semantic UI framework, and includes built-in modules for various node and edge positioning algorithms. + +## Getting Started + +To use Graphnet in your web project, you'll first need to install it using npm: + +npm install graphnet + +Once you've installed Graphnet, you can import it into your project using the following code: + +import Graphnet from 'graphnet'; + +## Usage + +Graphnet provides a flexible and customizable API for creating and manipulating graphs. Here are some examples of how to use Graphnet in your web project: + +Creating a Graph + +const graph = new Graphnet.Graph(); + +This will create a new empty graph that you can add nodes and edges to. + +Adding Nodes and Edges + +To add a new node to the graph, you can use the addNode() method: + +const node = graph.addNode({ id: 1, label: 'Node 1' }); + +This will create a new node with an ID of 1 and a label of "Node 1". You can also add edges between nodes using the addEdge() method: + +const edge = graph.addEdge({ source: 1, target: 2 }); + +This will create a new edge between nodes with IDs 1 and 2. + +Rendering the Graph + +To render the graph on a web page, you can create a new Graphnet visualization object and pass in the graph: + +const visualization = new Graphnet.Visualization({ container: '#graph-container' }); +visualization.render(graph); + +Node and Edge Positioning Algorithms + +Graphnet includes built-in modules for various node and edge positioning algorithms. To use one of these algorithms, you can pass it in as an option when creating the visualization object: + +const visualization = new Graphnet.Visualization({ container: '#graph-container', layout: 'force' }); + +## Contributing + +If you'd like to contribute to Graphnet, please fork the repository and create a new pull request with your changes. We welcome all contributions and feedback! From 35996256e785c2f7d425e8335ba1decb9501d7c2 Mon Sep 17 00:00:00 2001 From: Umang Singh <67512605+U-S01@users.noreply.github.com> Date: Sat, 25 Feb 2023 14:49:31 +0530 Subject: [PATCH 2/3] Update README.md --- README.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 435ccad..590bdab 100644 --- a/README.md +++ b/README.md @@ -6,46 +6,46 @@ Graphnet is a JavaScript graph library that provides powerful tools for visualiz To use Graphnet in your web project, you'll first need to install it using npm: -npm install graphnet +`npm install graphnet` Once you've installed Graphnet, you can import it into your project using the following code: -import Graphnet from 'graphnet'; +`import Graphnet from 'graphnet';` ## Usage Graphnet provides a flexible and customizable API for creating and manipulating graphs. Here are some examples of how to use Graphnet in your web project: -Creating a Graph - -const graph = new Graphnet.Graph(); +# Creating a Graph +` +const graph = new Graphnet.Graph();` This will create a new empty graph that you can add nodes and edges to. -Adding Nodes and Edges +# Adding Nodes and Edges -To add a new node to the graph, you can use the addNode() method: +To add a new node to the graph, you can use the `addNode()` method: -const node = graph.addNode({ id: 1, label: 'Node 1' }); +`const node = graph.addNode({ id: 1, label: 'Node 1' });` -This will create a new node with an ID of 1 and a label of "Node 1". You can also add edges between nodes using the addEdge() method: +This will create a new node with an ID of 1 and a label of "Node 1". You can also add edges between nodes using the `addEdge()` method: -const edge = graph.addEdge({ source: 1, target: 2 }); +`const edge = graph.addEdge({ source: 1, target: 2 });` This will create a new edge between nodes with IDs 1 and 2. -Rendering the Graph +# Rendering the Graph To render the graph on a web page, you can create a new Graphnet visualization object and pass in the graph: -const visualization = new Graphnet.Visualization({ container: '#graph-container' }); -visualization.render(graph); +`const visualization = new Graphnet.Visualization({ container: '#graph-container' }); +visualization.render(graph);` -Node and Edge Positioning Algorithms +# Node and Edge Positioning Algorithms Graphnet includes built-in modules for various node and edge positioning algorithms. To use one of these algorithms, you can pass it in as an option when creating the visualization object: - -const visualization = new Graphnet.Visualization({ container: '#graph-container', layout: 'force' }); +` +const visualization = new Graphnet.Visualization({ container: '#graph-container', layout: 'force' });` ## Contributing From e16e371b393087bdd3eed451025fb4c7e4e0a894 Mon Sep 17 00:00:00 2001 From: Umang Singh <67512605+U-S01@users.noreply.github.com> Date: Sat, 25 Feb 2023 14:50:34 +0530 Subject: [PATCH 3/3] Update README.md --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 590bdab..9f51d93 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -## Graphnet +# Graphnet Graphnet is a JavaScript graph library that provides powerful tools for visualizing and interacting with graphs on the web. It is designed to be used as a module within the Semantic UI framework, and includes built-in modules for various node and edge positioning algorithms. -## Getting Started +# Getting Started To use Graphnet in your web project, you'll first need to install it using npm: @@ -12,17 +12,17 @@ Once you've installed Graphnet, you can import it into your project using the fo `import Graphnet from 'graphnet';` -## Usage +# Usage Graphnet provides a flexible and customizable API for creating and manipulating graphs. Here are some examples of how to use Graphnet in your web project: -# Creating a Graph +## Creating a Graph ` const graph = new Graphnet.Graph();` This will create a new empty graph that you can add nodes and edges to. -# Adding Nodes and Edges +## Adding Nodes and Edges To add a new node to the graph, you can use the `addNode()` method: @@ -34,19 +34,19 @@ This will create a new node with an ID of 1 and a label of "Node 1". You can als This will create a new edge between nodes with IDs 1 and 2. -# Rendering the Graph +## Rendering the Graph To render the graph on a web page, you can create a new Graphnet visualization object and pass in the graph: `const visualization = new Graphnet.Visualization({ container: '#graph-container' }); visualization.render(graph);` -# Node and Edge Positioning Algorithms +## Node and Edge Positioning Algorithms Graphnet includes built-in modules for various node and edge positioning algorithms. To use one of these algorithms, you can pass it in as an option when creating the visualization object: ` const visualization = new Graphnet.Visualization({ container: '#graph-container', layout: 'force' });` -## Contributing +# Contributing If you'd like to contribute to Graphnet, please fork the repository and create a new pull request with your changes. We welcome all contributions and feedback!