plebeiangraphlibrary 1.0.6 → 2.0.0

package/CODE_OF_CONDUCT.md

@@ -1,40 +1,40 @@
-# Code of Conduct for Plebeian Graph Library (PGL)
-
-## My Pledge
-In the interest of fostering an open and welcoming environment, I, as the maintainer and primary contributor of the Plebeian Graph Library (PGL), pledge to make participation in this project a harassment-free experience for everyone, regardless of individual differences.
-
-## Standards
-
-Behavior that contributes to a positive environment includes:
-
-- Using welcoming and inclusive language
-- Showing respect for differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Demonstrating empathy towards other community members
-
-Unacceptable behavior includes:
-
-- Use of sexualized language or imagery, unwelcome sexual attention or advances
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information without explicit permission
-- Other conduct deemed inappropriate in a professional setting
-
-## Responsibilities
-
-As the project maintainer, I am responsible for clarifying the standards of acceptable behavior and will take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-I have the right to remove, edit, or reject comments, commits, code, and other contributions that do not align with this Code of Conduct.
-
-## Scope
-
-This Code of Conduct applies within all project spaces, as well as in public spaces when an individual is representing the project or its community. Representation of the project may include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at online or offline events.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting me [at](indrajeet.haldar08@gmail.com). All complaints will be reviewed and investigated and will result in a response that is necessary and appropriate to the circumstances. Confidentiality will be maintained for the reporter of an incident.
-
-## Attribution
-
+# Code of Conduct for Plebeian Graph Library (PGL)
+
+## My Pledge
+In the interest of fostering an open and welcoming environment, I, as the maintainer and primary contributor of the Plebeian Graph Library (PGL), pledge to make participation in this project a harassment-free experience for everyone, regardless of individual differences.
+
+## Standards
+
+Behavior that contributes to a positive environment includes:
+
+- Using welcoming and inclusive language
+- Showing respect for differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Demonstrating empathy towards other community members
+
+Unacceptable behavior includes:
+
+- Use of sexualized language or imagery, unwelcome sexual attention or advances
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information without explicit permission
+- Other conduct deemed inappropriate in a professional setting
+
+## Responsibilities
+
+As the project maintainer, I am responsible for clarifying the standards of acceptable behavior and will take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+I have the right to remove, edit, or reject comments, commits, code, and other contributions that do not align with this Code of Conduct.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, as well as in public spaces when an individual is representing the project or its community. Representation of the project may include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at online or offline events.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting me [at](indrajeet.haldar08@gmail.com). All complaints will be reviewed and investigated and will result in a response that is necessary and appropriate to the circumstances. Confidentiality will be maintained for the reporter of an incident.
+
+## Attribution
+
 This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html

package/CONTRIBUTING.md

@@ -1,52 +1,52 @@
-# Contributing to Plebeian Graph Library (PGL)
-
-First off, thank you for considering contributing to PGL! It's people like you that make the open source community such a great place. Here are some guidelines to help you get started.
-
-## How to Contribute
-### Reporting Issues
-
-If you find a bug or have a suggestion for a new feature or enhancement, I would love to hear about it! Before you submit an issue, please check to make sure it hasn't already been reported. Here's how you can report an issue:
-
-- Go to the Issues section of our GitHub repository.
-- Click on 'New Issue'.
-- Write a clear title and a detailed description. For bugs, it's helpful to include:
-    * Steps to reproduce
-    * Expected and actual behavior
-    * Screenshots or error messages
-    * Your environment (browser, OS, etc.)
-
-### Submitting Changes
-
-Changes are accepted via Pull Requests (PRs) on GitHub. Here’s how you make a PR:
-
-1. Fork the PGL repository.
-1. Clone your fork to your local machine.
-1. Create a new branch.
-1. Make your changes. Please keep your code as clean and well-organized as possible.
-1. Test your changes.
-1. Commit your changes. Write a clear, descriptive commit message.
-1. Push your changes to your fork on GitHub.
-1. From your fork, make a Pull Request to the PGL main branch.
-1. In your pull request, describe what your changes do and mention any relevant issue numbers.
-
-Please adhere to the coding conventions used throughout the project (indentation, accurate comments, etc.).
-
-### Seeking Support
-
-If you need help or have any questions about contributing, please open an issue in the GitHub Issues. I'd be happy to help!
-
-### Improving Documentation
-
-Good documentation is as important as the code itself. If you find errors, typos, or areas that need enhancement, feel free to create a pull request.
-
-## Code of Conduct
-
-Please follow Code of Conduct in all your interactions with the project.
-
-## Pull Request Process
-
-1. Ensure any install or build dependencies are removed before the end of the layer when doing a build.
-1. Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations, and container parameters.
-1. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme used is SemVer.
-1. The Pull Request will be merged once it is approved and passes CI checks. 
-
+# Contributing to Plebeian Graph Library (PGL)
+
+First off, thank you for considering contributing to PGL! It's people like you that make the open source community such a great place. Here are some guidelines to help you get started.
+
+## How to Contribute
+### Reporting Issues
+
+If you find a bug or have a suggestion for a new feature or enhancement, I would love to hear about it! Before you submit an issue, please check to make sure it hasn't already been reported. Here's how you can report an issue:
+
+- Go to the Issues section of our GitHub repository.
+- Click on 'New Issue'.
+- Write a clear title and a detailed description. For bugs, it's helpful to include:
+    * Steps to reproduce
+    * Expected and actual behavior
+    * Screenshots or error messages
+    * Your environment (browser, OS, etc.)
+
+### Submitting Changes
+
+Changes are accepted via Pull Requests (PRs) on GitHub. Here’s how you make a PR:
+
+1. Fork the PGL repository.
+1. Clone your fork to your local machine.
+1. Create a new branch.
+1. Make your changes. Please keep your code as clean and well-organized as possible.
+1. Test your changes.
+1. Commit your changes. Write a clear, descriptive commit message.
+1. Push your changes to your fork on GitHub.
+1. From your fork, make a Pull Request to the PGL main branch.
+1. In your pull request, describe what your changes do and mention any relevant issue numbers.
+
+Please adhere to the coding conventions used throughout the project (indentation, accurate comments, etc.).
+
+### Seeking Support
+
+If you need help or have any questions about contributing, please open an issue in the GitHub Issues. I'd be happy to help!
+
+### Improving Documentation
+
+Good documentation is as important as the code itself. If you find errors, typos, or areas that need enhancement, feel free to create a pull request.
+
+## Code of Conduct
+
+Please follow Code of Conduct in all your interactions with the project.
+
+## Pull Request Process
+
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a build.
+1. Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations, and container parameters.
+1. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme used is SemVer.
+1. The Pull Request will be merged once it is approved and passes CI checks. 
+

package/Examples/1_ZKC_simple.html

@@ -1,76 +1,82 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="MasterStyle.css">
-  <title>ZKC3d - Example</title>
-</head>
-
-<body>
-  <h4>A simple plot of the ZKC Dataset <a href="https://github.com/range-et/PGL/blob/main/public/1_ZKC_simple.html">Code</a></h4>
-  <canvas id="displayCanvas" class="displayCanvas"></canvas>
-  <script type="module">
-    // import the library
-    import * as PGL from "../Build/pgl_module.js";
-
-    // construct a simple ZKC graph
-    // this graph is pre initialized (Since it is simulated in this case)
-    const zkcSimulated = await PGL.SampleData.LoadZKCSimulated();
-    // console log this to see how this data is stored 
-    console.log(zkcSimulated);
-    // also as a reference just see how this data is stored 
-    zkcSimulated.printData();
-
-    // set the width and height 
-    const width = 800;
-    const heigth = 700;
-
-    // pass in the graph and the canvas into the drawing object to draw it
-    // first get the canvas element
-    const canvas = document.getElementById("displayCanvas");
-    // then create a graph drawer object
-    // to do that first make a options object
-    const graphDrawerOptions = {
-      graph: zkcSimulated,
-      width: width,
-      height: heigth,
-      canvas: canvas
-    };
-    // then create the visualization window
-    // with those settings
-    const graph3d = new PGL.GraphDrawer.GraphDrawer3d(graphDrawerOptions);
-    // initialize this object before adding things to it 
-    await graph3d.init();
-
-    // Create the 3d elements for the graph
-    // first describe a global scaling factor
-    const bounds = 1
-    // first create all the node elements
-    const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(zkcSimulated, bounds, 0xffffff, 5);
-    // add the node elements to the scene
-    graph3d.addVisElement(nodeVisualElements);
-    // then create the edge elements 
-    const edgeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphEdgesThick(zkcSimulated, bounds, 0xffafcc, 0.02);
-    graph3d.addVisElement(edgeVisualElements);
-
-    // then there are two last steps for a 3d graph
-    // this is done so that other 3d objects can be added in later
-    // since the base library is three.js all standard three js things are possible
-    // now moving on to the two steps :
-    // make an animation function
-    function animate() {
-      requestAnimationFrame(animate);
-      graph3d.rendercall();
-    }
-
-    // append the graph renderer to the container
-    // and then drawing render calls
-    animate();
-
-  </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="MasterStyle.css">
+  <title>Example 1 – Simple ZKC</title>
+</head>
+
+<body class="example-page">
+  <header class="example-header">
+    <a href="index.html" class="back-link">← All examples</a>
+    <h1>Example 1 – Simple ZKC</h1>
+    <p class="example-desc">Basic 3D graph: ZKC dataset with box nodes and thick edges.</p>
+    <a href="https://github.com/range-et/PGL/blob/main/Examples/1_ZKC_simple.html" class="code-link" target="_blank" rel="noopener">View code</a>
+  </header>
+  <div class="canvas-wrap">
+  <canvas id="displayCanvas" class="displayCanvas"></canvas>
+  <script type="module">
+    // import the library
+    import * as PGL from "../Build/pgl_module.js";
+
+    // construct a simple ZKC graph
+    // this graph is pre initialized (Since it is simulated in this case)
+    const zkcSimulated = await PGL.SampleData.LoadZKCSimulated();
+    // console log this to see how this data is stored 
+    console.log(zkcSimulated);
+    // also as a reference just see how this data is stored 
+    zkcSimulated.printData();
+
+    // set the width and height 
+    const width = 800;
+    const heigth = 700;
+
+    // pass in the graph and the canvas into the drawing object to draw it
+    // first get the canvas element
+    const canvas = document.getElementById("displayCanvas");
+    // then create a graph drawer object
+    // to do that first make a options object
+    const graphDrawerOptions = {
+      graph: zkcSimulated,
+      width: width,
+      height: heigth,
+      canvas: canvas
+    };
+    // then create the visualization window
+    // with those settings
+    const graph3d = new PGL.GraphDrawer.GraphDrawer3d(graphDrawerOptions);
+    // initialize this object before adding things to it 
+    await graph3d.init();
+
+    // Create the 3d elements for the graph
+    // first describe a global scaling factor
+    const bounds = 1
+    // first create all the node elements
+    const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(zkcSimulated, bounds, 0xffffff, 5);
+    // add the node elements to the scene
+    graph3d.addVisElement(nodeVisualElements);
+    // then create the edge elements 
+    const edgeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphEdgesThick(zkcSimulated, bounds, 0xffafcc, 10);
+    graph3d.addVisElement(edgeVisualElements);
+
+    // then there are two last steps for a 3d graph
+    // this is done so that other 3d objects can be added in later
+    // since the base library is three.js all standard three js things are possible
+    // now moving on to the two steps :
+    // make an animation function
+    function animate() {
+      requestAnimationFrame(animate);
+      graph3d.rendercall();
+    }
+
+    // append the graph renderer to the container
+    // and then drawing render calls
+    animate();
+  </script>
+  </div>
+</body>
+
 </html>

package/Examples/2_ZKC_edge_bundling.html

@@ -1,82 +1,88 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="MasterStyle.css">
-    <title>ZKC3d - Example</title>
-</head>
-
-<body>
-    <h4>A simple plot of the ZKC Dataset <a href="https://github.com/range-et/PGL/blob/main/public/2_ZKC_edge_bundling.html">Code</a></h4>
-    <canvas id="displayCanvas" class="displayCanvas"></canvas>
-    <script type="module">
-        // import the library
-        import * as PGL from "../Build/pgl_module.js";
-
-        // construct a simple ZKC graph
-        // this graph is pre initialized (Since it is simulated in this case)
-        const zkcSimulated = await PGL.SampleData.LoadZKCSimulated();
-        // console log this to see how this data is stored 
-        zkcSimulated.printData();
-
-        // set the width and height 
-        const width = 800;
-        const heigth = 700;
-
-        // pass in the graph and the canvas into the drawing object to draw it
-        // first get the canvas element
-        const canvas = document.getElementById("displayCanvas");
-        // then create a graph drawer object
-        // to do that first make a options object
-        const graphDrawerOptions = {
-            graph: zkcSimulated,
-            width: width,
-            height: heigth,
-            canvas: canvas
-        };
-        // then create the visualization window
-        // with those settings
-        const graph3d = new PGL.GraphDrawer.GraphDrawer3d(graphDrawerOptions);
-        // initialize this object before adding things to it 
-        await graph3d.init();
-
-        // Create the 3d elements for the graph
-        // first describe a global scaling factor
-        const bounds = 1
-        // first create all the node elements
-        const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(zkcSimulated, bounds, 0xffffff, 3);
-        // add the node elements to the scene
-        graph3d.addVisElement(nodeVisualElements);
-
-        const EdgeMap = zkcSimulated.get_edge_map();
-        const EdgeMap_copy = PGL.Drawing.DisplaceEdgeInY(EdgeMap, 20);
-        const newEdgeMap = await PGL.Drawing.DrawEdgeBundling(EdgeMap_copy, 50, 10);
-        // then create the edge elements 
-        // these are the reuglar edges 
-        const edgeVisualElements = PGL.ThreeWrapper.DrawThinEdgesFromEdgeMap(EdgeMap, bounds, 0x62b6cb, 0.01);
-        graph3d.addVisElement(edgeVisualElements);
-        // these are the bundled edges 
-        const edgeVisualElements_Bundled = PGL.ThreeWrapper.DrawThickEdgesFromEdgeMap(newEdgeMap, bounds, 0x5fa8d3, 0.01);
-        graph3d.addVisElement(edgeVisualElements_Bundled);
-
-        // then there are two last steps for a 3d graph
-        // this is done so that other 3d objects can be added in later
-        // since the base library is three.js all standard three js things are possible
-        // now moving on to the two steps :
-        // make an animation function
-        function animate() {
-            requestAnimationFrame(animate);
-            graph3d.rendercall();
-        }
-
-        // append the graph renderer to the container
-        // and then drawing render calls
-        animate();
-
-    </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="MasterStyle.css">
+  <title>Example 2 – Edge bundling</title>
+</head>
+
+<body class="example-page">
+  <header class="example-header">
+    <a href="index.html" class="back-link">← All examples</a>
+    <h1>Example 2 – Edge bundling</h1>
+    <p class="example-desc">ZKC with curved, bundled edges and vertical displacement (arc-style).</p>
+    <a href="https://github.com/range-et/PGL/blob/main/Examples/2_ZKC_edge_bundling.html" class="code-link" target="_blank" rel="noopener">View code</a>
+  </header>
+  <div class="canvas-wrap">
+  <canvas id="displayCanvas" class="displayCanvas"></canvas>
+    <script type="module">
+        // import the library
+        import * as PGL from "../Build/pgl_module.js";
+
+        // construct a simple ZKC graph
+        // this graph is pre initialized (Since it is simulated in this case)
+        const zkcSimulated = await PGL.SampleData.LoadZKCSimulated();
+        // console log this to see how this data is stored 
+        zkcSimulated.printData();
+
+        // set the width and height 
+        const width = 800;
+        const heigth = 700;
+
+        // pass in the graph and the canvas into the drawing object to draw it
+        // first get the canvas element
+        const canvas = document.getElementById("displayCanvas");
+        // then create a graph drawer object
+        // to do that first make a options object
+        const graphDrawerOptions = {
+            graph: zkcSimulated,
+            width: width,
+            height: heigth,
+            canvas: canvas
+        };
+        // then create the visualization window
+        // with those settings
+        const graph3d = new PGL.GraphDrawer.GraphDrawer3d(graphDrawerOptions);
+        // initialize this object before adding things to it 
+        await graph3d.init();
+
+        // Create the 3d elements for the graph
+        // first describe a global scaling factor
+        const bounds = 1
+        // first create all the node elements
+        const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(zkcSimulated, bounds, 0xffffff, 3);
+        // add the node elements to the scene
+        graph3d.addVisElement(nodeVisualElements);
+
+        const EdgeMap = zkcSimulated.get_edge_map();
+        const EdgeMap_copy = PGL.Drawing.DisplaceEdgeInY(EdgeMap, 20);
+        const newEdgeMap = await PGL.Drawing.DrawEdgeBundling(EdgeMap_copy, 50, 10);
+        // then create the edge elements 
+        // these are the reuglar edges 
+        const edgeVisualElements = PGL.ThreeWrapper.DrawThinEdgesFromEdgeMap(EdgeMap, bounds, 0x62b6cb, 0.1);
+        graph3d.addVisElement(edgeVisualElements);
+        // these are the bundled edges 
+        const edgeVisualElements_Bundled = PGL.ThreeWrapper.DrawThickEdgesFromEdgeMap(newEdgeMap, bounds, 0x5fa8d3, 5);
+        graph3d.addVisElement(edgeVisualElements_Bundled);
+
+        // then there are two last steps for a 3d graph
+        // this is done so that other 3d objects can be added in later
+        // since the base library is three.js all standard three js things are possible
+        // now moving on to the two steps :
+        // make an animation function
+        function animate() {
+            requestAnimationFrame(animate);
+            graph3d.rendercall();
+        }
+
+        // append the graph renderer to the container
+        // and then drawing render calls
+        animate();
+    </script>
+  </div>
+</body>
+
 </html>