https://github.com/strathausen/dracula

JavaScript layout and representation of connected graphs.
https://github.com/strathausen/dracula

dracula graph graph-dracula hacktoberfest javascript svg

Last synced: about 1 month ago
JSON representation

JavaScript layout and representation of connected graphs.

• Host: GitHub
• URL: https://github.com/strathausen/dracula
• Owner: strathausen
• License: mit
• Created: 2010-12-17T15:44:03.000Z (almost 14 years ago)
• Default Branch: master
• Last Pushed: 2024-03-18T20:10:41.000Z (9 months ago)
• Last Synced: 2024-05-21T19:27:29.028Z (7 months ago)
• Topics: dracula, graph, graph-dracula, hacktoberfest, javascript, svg
• Language: JavaScript
• Homepage: https://www.graphdracula.net
• Size: 1.7 MB
• Stars: 828
• Watchers: 48
• Forks: 137
• Open Issues: 46
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-frontend-graph-library - Dracula
• awesome-starred - strathausen/dracula - JavaScript layout and representation of connected graphs. (javascript)

README

        
# Graph Dracula - a JavaScript Graph Library

[![Build Status](https://travis-ci.org/strathausen/dracula.svg?branch=master)](https://travis-ci.org/strathausen/dracula)

[![Backers on Open Collective](https://opencollective.com/dracula/backers/badge.svg)](#backers)

 [![Sponsors on Open Collective](https://opencollective.com/dracula/sponsors/badge.svg)](#sponsors) 

Graph Dracula is a set of tools to display and layout interactive graphs,

along with various related algorithms.

Based on JavaScript and SVG.

The code is released under the MIT license, so commercial use is not a problem.

Creating a graph is simple! You can also customise anything easily.

1. install the dependencies:

        npm install --save graphdracula raphael

    or

        jspm install npm:graphdracula

2. create an html file with a tag having the ID `paper`.

3. require graphdracula (via browserify or webpack):

```js

var Dracula = require('graphdracula')

var Graph = Dracula.Graph

var Renderer = Dracula.Renderer.Raphael

var Layout = Dracula.Layout.Spring

var graph = new Graph()

graph.addEdge('Banana', 'Apple')

graph.addEdge('Apple', 'Kiwi')

graph.addEdge('Apple', 'Dragonfruit')

graph.addEdge('Dragonfruit', 'Banana')

graph.addEdge('Kiwi', 'Banana')

var layout = new Layout(graph)

var renderer = new Renderer('#paper', graph, 400, 300)

renderer.draw()

```

## How To Develop

```

git clone [email protected]:strathausen/dracula.git

cd dracula

npm install

npm start

```

Point your browser to one of examples in `examples/`.

## Contributors

This project exists thanks to all the people who contribute. 



## Backers

Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/dracula#backer)]



## Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/dracula#sponsor)]