npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

graphology-layout

v0.6.1

Published

Collection of basic layout algorithms for graphology.

Downloads

187,169

Readme

Graphology Layout

Collection of basic layout algorithms to be used with graphology.

Installation

npm install graphology-layout

Usage

Basic

Advanced

Utilities

circular

Arranges the node in a circle (or an sphere/hypersphere in higher dimensions).

Example

import {circular} from 'graphology-layout';
// Alternatively, to load only the relevant code:
import circular from 'graphology-layout/circular';

const positions = circular(graph);

// With options:
const positions = circular(graph, {scale: 100});

// To directly assign the positions to the nodes:
circular.assign(graph);

// To pass custom dimensions
const positions = random(graph, {dimensions: ['x1', 'x2']});

Arguments

  • graph Graph: target graph.
  • options ?object: options:
    • dimensions ?array [['x', 'y']]: dimensions of the layout. Cannot work with dimensions != 2.
    • center ?number [0.5]: center of the layout.
    • scale ?number [1]: scale of the layout.

random

Random layout positioning every node by choosing each coordinates uniformly at random on the interval [0, 1).

Example

import {random} from 'graphology-layout';
// Alternatively, to load only the relevant code:
import random from 'graphology-layout/random';

const positions = random(graph);

// With options:
const positions = random(graph, {rng: customRngFunction});

// To directly assign the positions to the nodes:
random.assign(graph);

// To pass custom dimensions
const positions = random(graph, {dimensions: ['x', 'y', 'z']});

Arguments

  • graph Graph: target graph.
  • options ?object: options:
    • dimensions ?array [['x', 'y']]: dimensions of the layout.
    • center ?number [0.5]: center of the layout.
    • rng ?function [Math.random]: custom RNG function to use.
    • scale ?number [1]: scale of the layout.

circlePack

Arranges the nodes as a bubble chart, according to specified attributes.

Example

import {circlepack} from 'graphology-layout';
// Alternatively, to load only the relevant code:
import circlepack from 'graphology-layout/circlepack';

const positions = circlepack(graph);

// With options
const positions = circlepack(graph, {
  hierarchyAttributes: ['degree', 'community'],
  rng: customRngFunction
});

// To directly assign the positions to the nodes:
circlepack.assign(graph);

Arguments

  • graph Graph: target graph.
  • options ?object: options:
    • attributes ?object: attributes to map:
      • x ?string [x]: name of the x position.
      • y ?string [y]: name of the y position.
    • center ?number [0]: center of the layout.
    • hierarchyAttributes ?list [[]]: attributes used to group nodes.
    • rng ?function [Math.random]: custom RNG function to use.
    • scale ?number [1]: scale of the layout.

rotation

Rotates the node coordinates of the given graph by the given angle in radians (or in degrees using an option).

Note that this function rotates your graph based on its center. If you want to use zero as the center for your rotation, use the centeredOnZero option. This option can also be used as an optimization strategy if you know your graph is already centered on zero to avoid needing to compute the graph's extent.

Example

import {rotation} from 'graphology-layout';
// Alternatively, to load only the relevant code:
import rotation from 'graphology-layout/rotation';

const positions = rotation(graph, Math.PI / 2);

// With options:
const positions = rotation(graph, Math.PI / 2, {centeredOnZero: true});

// To directly assign the positions to the nodes:
rotation.assign(graph, Math.PI / 2);

Arguments

  • graph Graph: target graph.
  • angle number: rotation angle in radians (or degrees using an option below).
  • options ?object: options:
    • dimensions ?array [['x', 'y']]: dimensions to use for the rotation. Cannot work with dimensions != 2.
    • degrees ?boolean [false]: whether the given angle is in degrees.
    • centeredOnZero ?boolean [false]: whether to rotate the graph around 0, rather than the graph's center.

collectLayout

Function returning the given graph's layout as {node: {x, y}}.

Example

import {collectLayout} from 'graphology-layout/utils';

collectLayout(graph);

// Custom dimensions
collectLayout(graph, {dimensions: ['x', 'y', 'z']});

// Non exhaustive (i.e. node having missing dimensions will be returned also)
collectLayout(graph, {exhaustive: false});

Arguments

  • graph Graph: target graph.
  • options ?object: options:
    • dimensions ?array [['x', 'y']]: array of attribute names for the dimensions.
    • exhaustive ?boolean [true]: whether to collect positions of nodes having all the dimensions set.

collectLayoutAsFlatArray

Function returning the given graph's layout as a flat array of length order * dimensions.

Example

import {collectLayoutAsFlatArray} from 'graphology-layout/utils';

collectLayoutAsFlatArray(graph);

// Custom dimensions
collectLayoutAsFlatArray(graph, {dimensions: ['x', 'y', 'z']});

// Custom type
collectLayoutAsFlatArray(graph, {type: Float32Array});

Arguments

  • graph Graph: target graph.
  • options ?object: options:
    • dimensions ?array [['x', 'y']]: array of attribute names for the dimensions.
    • type ?constructor [Float64Array]: array class to use.

assignLayout

Function assigning a {node: {x, y}} layout to the given graph.

Example

import {assignLayout} from 'graphology-layout/utils';

assignLayout(graph, layout);

// Custom dimensions
assignLayout(graph, layout, {dimensions: ['x', 'y', 'z']});

Arguments

  • graph Graph: target graph.
  • layout object: layout mapping.
  • options ?object: options:
    • dimensions ?array [['x', 'y']]: array of attribute names for the dimensions.

assignLayoutAsFlatArray

Function assigning a flat array layout to the given graph.

Example

import {assignLayoutAsFlatArray} from 'graphology-layout/utils';

assignLayoutAsFlatArray(graph, layout);

// Custom dimensions
assignLayoutAsFlatArray(graph, layout, {dimensions: ['x', 'y', 'z']});

Arguments

  • graph Graph: target graph.
  • layout array: layout flat array.
  • options ?object: options:
    • dimensions ?array [['x', 'y']]: array of attribute names for the dimensions.