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

ayasdi-grapher

v1.4.0

Published

WebGL/Canvas Network Graphs

Downloads

3

Readme

Grapher Build Status

Draw network graphs using WebGL and Canvas backup.

Download

Installing

npm install --save ayasdi-grapher

Additional Modules

Need a specific feature? Create your own modules for Grapher! Here are some modules we've made:

  • center: Helpful functions for centering the graph.
  • palette: Set up custom palettes and set colors by palette indices.
  • target: Target a node or link, or find the nearest nodes and links.
  • zoom: Zoom adjusts Grapher's scale by ratio. Optionally target a point as the zoom center.

Examples

Here are a few examples:

  1. Simple
  2. Transforms
  3. Colors
  4. Drag
  5. Pan
  6. Force (using d3's force layout)

These examples can be also found in the examples folder.

Developing

Installing

Grapher uses Node.js. Install Node.js then run the following command:

npm install

This will install the development dependencies that Grapher uses to run its various tasks.

Building

To build Grapher, run the build script:

npm run build

This will bundle modules/grapher.js with its dependencies and outputs the result to grapher.js and grapher-min.js in the build folder. The build script also gets run during tests and in preversion.

Testing

Unit tests are run using Jasmine with this command:

npm test

This will also make grapher.js. Test specs can be found in the spec folder.

Documentation

Documentation is generated using groc, and is also done during version upgrades.

groc

If you need to generate docs into the gh-pages branch, you can use:

make gh-pages

This will create a new branch off gh-pages named gh-pages-$(commit) which will contain the build and docs generated from the current HEAD. Please make sure to commit or stash any changes before running this command.

License

Grapher.js may be freely distributed under the Apache 2.0 license.