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

treeviz

v3.0.1

Published

Library which aims to represent trees for data visualization

Downloads

914

Readme

Treeviz

Known Vulnerabilities license

This javascript module aims at providing an easy interface in order to represent tree diagrams on screen with the ability to handle dynamic data flows. The data format must be JSON.

Installation

With npm :

npm install treeviz

and then you can use it with :

import {Treeviz} from 'treeviz';

Or download this zip repository in the Github Release section and link the dist/treeviz.js file in your page directly : <script src="./dist/index.js><script>

Usage

Vanilla JavaScript

// Define a tree element where dimensions are mandatory
<div id="tree" style="height:700px; width:900px"></div>

<script>
// Define a dataset
var data = [
  { id: 1, text_1: "Father", father: null },
  { id: 2, text_1: "Child A", father: 1 },
  { id: 3, text_1: "Child B", father: 1 },
  { id: 4, text_1: "Subchild C", father: 2 }
];

// Define and configure a tree object
var myTree = Treeviz.create({
  htmlId: "tree",
  idKey: "id",
  hasFlatData: true,
  nodeColor: (nodeData) => "grey",
  relationnalField: "father",
});

// Display the tree based on the data
myTree.refresh(data);
</script>

To update the tree visually you will just have to pass new data to the refresh method like this :

myTree.refresh(data);
myTree.refresh(data_update1);
myTree.refresh(data_update2);

The tree will be clever enough to updates only the part of the trees that have been added or removed in the dataset, and so it won't redraw the entire tree.

Treeviz Example

Hierarchical data case :

var hierarchical_data_example = {
  name: "Mom",
  qty: 10,
  children: [
    { name: "Son A", qty: 3 },
    { name: "Son B", qty: 7 },
  ],
};

var myTree = Treeviz.create({
  htmlId: "tree",
  idKey: "name",
  hasFlatData: false,
  relationnalField: "children",
});

myTree.refresh(hierarchical_data_example);

API

The big part of the API is configuring the tree before passing data to it :

Treeviz.create(config);

The table below lists all the avalaible key that the config object can have

| Key | Type | Default | Definition | | -------------------------- | --------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | htmlId | string (Required) | | The HTML id tag on the page where the tree should be drawn. It must have a width and an height specified | | idKey | string | "id" | The key in a data item representing the unique identifier of a node | | relationnalField | string | "father" | In case of flat dataset, usually the relationnal field between each node is the field representing the father of the node, linking it to the id of the field. (See example below). | | hasFlatData | boolean | true | Specify whether the data passed to the tree is flat or already hierarchical | | hasPan | boolean | false | Toggle the ability to pan the tree | | hasZoom | boolean | false | Toggle the ability to zoom the tree | | nodeWidth | number | 160 | Width of a node in px | | nodeHeight | number | 100 | Height of a node in px | | linkColor | function | (node: NodeData) => "#ffcc80" | Color of the link | | linkWidth | function | (node: NodeData) => 10 | Width of the link | | linkShape | "quadraticBeziers" | "orthogonal" | "curve" | "quadraticBeziers" | Shape of the link | | renderNode | function | (node: NodeData) => null | HTML template for every node | | isHorizontal | boolean | true | Direction of the tree. If true, the tree expands from left to right. If false, it goes from top to bottom | | onNodeClick | function | (node: NodeData) => null | Function handling the event when someone click on it | | onNodeMouseEnter | function | (node: NodeData) => null | Function handling the event when someone hover a node | | onNodeMouseLeave | function | (node: NodeData) => null | Function handling the event when the mouse pointer leaves a node | | mainAxisNodeSpacing | number or "auto" | 300 | Set the distance in pixels between two depths in the tree. If the value is auto it will automatically display the tree to fit the size of the container. | | secondaryAxisNodeSpacing | number | 1.25 | Set the distance between nodes in the same level as a coefficient of node dimensions. Recommended to have the value superior to 1 | | marginTop | number | 1.25 | Set the margin between the SVG element and the tree | | marginBottom | number | 1.25 | Set the margin between the SVG element and the tree | | marginLeft | number | 1.25 | Set the margin between the SVG element and the tree | | marginRight | number | 1.25 | Set the margin between the SVG element and the tree | | duration | number | 600 | The duration of the animation transition between layouts | | data | any | | Needed for Typescript projects only to type the NodeData argument |

And then, we have the NodeData type that is passed as callback of some functions: type NodeData { data: // the data of each item settings: // the settings object }

Contributing

  • Clone the repo.
  • Run npm install.
  • Run npm run dev, then you can edit the files in the ./src folder and the ./example/index.html file.
  • To publish (admin rights), run npm run build && npm publish.

Credits

This module is based on d3 library, credit to all the contributors of this project.

License

MIT