Light

mauriciopoppe / greuler Goto Github PK

View Code? Open in Web Editor NEW

639.0 21.0 30.0 5.81 MB

Graph theory visualizations

Home Page: http://mauriciopoppe.github.io/greuler/

License: MIT License

JavaScript 87.15% HTML 1.27% Pug 8.02% SCSS 3.56%

greuler's Introduction

greuler is graph theory visualization tool powered by d3 and on top of WebCola which allows the creation and manipulation of graphs with a simple API.

Installation

npm install greuler

<script src="https://unpkg.com/greuler"></script>

Usage

import greuler from 'greuler'
greuler({
  nodes: [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 }
  ],
  edges: [
    { source: 0, target: 1 },
    { source: 0, target: 2, directed: true },
    { source: 0, target: 3 },
    { source: 1, target: 2, directed: true },
    { source: 4, target: 0 },
    { source: 5, target: 0, directed: true },
    { source: 4, target: 5 }
  ]
}).update()

API and Examples

Check out the examples and API at the homepage

License

2023 MIT © Mauricio Poppe

greuler's People

Contributors

Stargazers

Watchers

greuler's Issues

Thanks!

Just wanted to say thanks for writing greuler. I just used it to write a blog post about networks with an interactive visualization. greuler was great.

Improve the algorithm of the paths that represent loop edges

Multiple loop edges are just moving away from the node

install instructions

So I ran

bower install greuler

but there is nothing in the bower_components/greuler/dist/ dir.
Is that the expected behaviour? (I'm new to bower).

Node & Edge IDs persisting when whole graph erased & rebuild

Hey,
first of all: thank you very much for this great viz tool!
I encountered some imo unexpected behaviour, when erasing the whole graph and subsequently adding the whole graph again (with the old IDs, but with minor changes to label or something else). I, however, are not quite sure if it’s a bug or a feature ;-)
What is happening: All old nodes and edges are successfully erased and the new nodes and edges are build, however, the changes of the labels to lower case and the radius adjustment to the new id: '001' node are not applied. When I erase all nodes and populate anew with newly generated IDs for every node, everything works out fine; the reusage of the old IDs seems to be the problem. As stated above, I am not sure, if that’s problematic behaviour at all, or rather a feature, thus, please feel free to discard this issue, if it’s of no use.
My goal is to be able to just reset the whole graph to a specific initial state, after applying additions of nodes and edges (I use it in an impress.js). I would be grateful if you could point me to a possible solution.

Below is my code in the script tag:

let gr_01 = greuler({
                  target: '#greuler_001',
                  data: {
                     linkDistance: 200,
                     avoidOverlaps: true,
                     nodes: [
                        { 
                            id: '001',
                            label: 'S',
                            topRightLabel: 'rdf:',
                            r: '35',
                            x: 50,
                            y: 50,
                            fill: '#cc2900',
                        },
                        { 
                            id: '002',
                            label: 'P',
                            topRightLabel: 'rdf:',
                            r: '35',
                            x: 100,
                            y: 50
                        },
                        { 
                            id: '003',
                            label: 'O',
                            topRightLabel: 'rdf:',
                            r: '35',
                            x: 150,
                            y: 50,
                            fill: '#00b300'
                        }
                     ],
                     links: [
                        {
                            source: '001',
                            target: '002',
                            directed: true
                        },
                        {
                            source: '002',
                            target: '003',
                            directed: true
                        }
                     ]
                   }
                }).update();
                

                $("#01_001").click(()=>{
                 // Erase old Nodes
                  if(gr_01.graph.nodes.length != 0) {
                  gr_01.graph.removeNodesByFn(function (n) {
                    return n.id;
                  });
                  
                  gr_01.update();
                  }
                  
                  // Erase old Edges 
                  if(gr_01.graph.edges.length != 0) {
                  gr_01.graph.removeEdgesByFn(function (e) {
                    return e.id;
                  });
                  
                  gr_01.update();
                  }
                  gr_01.update();
                  
                  // New Nodes
                  [
                        { 
                            id: '001',
                            label: 's',
                            topRightLabel: 'rdf:',
                            r: '50',
                            x: 50,
                            y: 50,
                            fill: '#cc2900',
                        },
                        { 
                            id: '002',
                            label: 'p',
                            topRightLabel: 'rdf:',
                            r: '35',
                            x: 100,
                            y: 50
                        },
                        { 
                            id: '003',
                            label: 'o',
                            topRightLabel: 'rdf:',
                            r: '35',
                            x: 150,
                            y: 50,
                            fill: '#00b300'
                        }
                     ].forEach((n) => {
                        gr_01.graph.addNode(n);
                        gr_01.update();
                     });
                  
                  // New Edges
                  [
                        {
                            source: '001',
                            target: '002',
                            directed: true
                        },
                        {
                            source: '002',
                            target: '003',
                            directed: true
                        }
                     ].forEach((e) => { 
                        gr_01.graph.addEdge(e); 
                        gr_01.update();
                        });
                });

The viz applies itself to:

<div id="greuler_001"></div>
<!-- button as anchor -->
<p><a href="#/step-6/#01_001" id="01_001" class="button">01</a></p>

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.