https://github.com/benmaier/curved-edges
playing around with curved edges and arrows in force-directed graph visualizations
Science Score: 13.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
○.zenodo.json file
-
○DOI references
-
○Academic publication links
-
○Committers with academic emails
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (6.2%) to scientific vocabulary
Repository
playing around with curved edges and arrows in force-directed graph visualizations
Basic Info
- Host: GitHub
- Owner: benmaier
- Language: JavaScript
- Default Branch: master
- Size: 632 KB
Statistics
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
- Releases: 0
Metadata Files
README.md
Curved Edges with Arrow Heads
A force-directed graph layout with curved edges and arrow heads. See http://benmaier.org/curved-edges .
Usage
Make sure you've loaded both arrowed-links.js and bezier.js.
Then two node objects source and target need to have the properties x, y, and radius. The default behavior is that links are only drawn curved if another link exists which points back from target to source. Hence, if you want to enforce that the arrowed link is drawn curved, make sure to initialize with link_back_exists=true.
Initialize the ArrowedLink object as
```js let source = { x: 100, y: 100, radius: 10 }; let target = { x: 150, y: 100, radius: 20 };
let linkbackexists = true; // make sure it draws the arrow curved let link = new ArrowedLink(source, target, linkbackexists); ```
Then style and draw the arrowed link
```js link.nodeStrokeWidth(2) // Nodes will have stroke width of 2px (=> node radius will be incremented by 1px) .linkWidth(3) // links will have a width of 3px .arrowHeadLengthScalar(4) // arrow heads will have a length of 4 times the link width .arrowHeadWidthScalar(1) // arrow heads will have a width of this_scalar2headLength/sqrt(3) .curvatureScalar(0.5) // the curvature control point will lie at half distance of the uncurved link in normal direction to the uncurved link .linkStyle("rgba(0,0,0,0.5)"); // how canvas should draw the arrow (black but half transparent)
link.draw(context); // context is the context on which to draw
```
Afterwards, you can retrieve computed properties to save them for reproduction
```js
link.isCurved; // gives true if the link was drawn curved
link.arrowHeadPoints; // an Array containing three points, defining the arrow head polygon (each an object with x and y property
link.linkPoints; // an Array of two points, defining the beginning of the link and the beginning of the arrow head
link.curveControlPoint; // if link.isCurved, contains the control point of the curved arrow tail, otherwise null
```
Example
This is what the arrows look like:
Owner
- Name: Benjamin F. Maier
- Login: benmaier
- Kind: user
- Location: Copenhagen
- Company: Technical University of Denmark
- Website: benmaier.org
- Twitter: benfmaier
- Repositories: 101
- Profile: https://github.com/benmaier
Postdoc @suneman 's, generative art, electronic music. DTU Compute & SODAS.
GitHub Events
Total
Last Year
Committers
Last synced: over 1 year ago
Top Committers
| Name | Commits | |
|---|---|---|
| Benjamin Maier | b****r@g****m | 15 |
Issues and Pull Requests
Last synced: about 1 year ago
All Time
- Total issues: 0
- Total pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Total issue authors: 0
- Total pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0