Javascript Tree Graph

  •        416

Simple javascript control that draws a complete HTML4 tree graph. Allows Vertical or Horizontal layout. It doesn't has any dependency to libraries or images. Allows add or remove nodes, and expand or collapse them.



Related Projects

GoJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages

  •    Javascript

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

posthtml - PostHTML is a tool to transform HTML/XML with JS plugins

  •    Javascript

PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier. All HTML transformations are made by plugins. And these plugins are just small plain JS functions, which receive a HTML node tree, transform it, and return a modified tree.

ngx-graph - Graph visualization library for angular

  •    TypeScript

This library is focused on handling graph data (anything with nodes and edges) rather than chart data. Currently the only visualization uses the Dagre layout, which is specialized for directed graphs. The plan is to implement multiple visualisations for graph data within this same library. Eventually, ngx-charts-force-directed-graph may be imported into this library as another option to visualize your graph data. ngx-graph is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

g6 - A Graph Visualization Framework in JavaScript

  •    Javascript

G6 is a graph visualization framework. It provides a set of base mechanisms, help developers to build your own graph visualization analysis application or graph visualization edit application.

rhizome - simple graph and tree visualization

  •    Clojure

Rhizome is a library for visualizing graph and tree structures. There are two namespaces, and rhizome.viz. The former will take a graph and return a string representation of a Graphviz dot file, the latter takes graphs and renders or displays them. In practice, you should only need to use rhizome.viz.

panther - Discover artists through an infinite node graph

  •    Javascript

Panther is a full-stack React/Redux/Node web app that uses the Spotify API to make suggestions based on an initial user-specified artist. It uses a graph consisting of vertices and edges to represent the data. At the center, the user's currently-selected artist, along with the artist's avatar and some audio samples of the artist's top tracks. To the left is a vertex representing the previous artist, and to the right are 3 suggestions. By clicking on the vertices, users can move forwards and backwards through their suggestion tree, (hopefully) discovering a bunch of awesome new music.

SwiftGraph - A Graph Data Structure in Pure Swift

  •    Swift

SwiftGraph is a pure Swift (no Cocoa) implementation of a graph data structure, appropriate for use on all platforms Swift supports (iOS, macOS, Linux, etc.). It includes support for weighted, unweighted, directed, and undirected graphs. It uses generics to abstract away both the type of the vertices, and the type of the weights. It includes copious in-source documentation, unit tests, as well as search functions for doing things like breadth-first search, depth-first search, and Dijkstra's algorithm. Further, it includes utility functions for topological sort, Jarnik's algorithm to find a minimum-spanning tree, detecting a DAG (directed-acyclic-graph), and enumerating all cycles.

K-Mindmap idea collecting tool

  •    C++

K-Mindmap lets you create tree graphs; where each branch contains space for text. The structure of the tree graph is intended to reflect contextual relations between the text fields. A physical simulation moves the graph to keep it looking nice.

madge - Create graphs from your CommonJS, AMD or ES6 module dependencies

  •    Javascript

Madge is a developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and give you other useful info. Joel Kemp's awesome dependency-tree is used for extracting the dependency tree. Read the changelog for latest changes.

Ruby-Prof - fast code profiler for Ruby

  •    Ruby

ruby-prof is a fast code profiler for Ruby.

GraphView - Android GraphView is used to display data in graph structures.

  •    Java

Android GraphView is used to display data in graph structures. The library is designed to support different algorithms. Currently, only the algorithms from Walker (with the runtime improvements from Buchheim) and Fruchterman&Reingold (for small graphs) have been implemented.

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

  •    Javascript

This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.innerHTML = newHTML). While replacing an existing DOM tree with an entirely new DOM tree will actually be very fast, it comes with a cost. The cost is that all of the internal state associated with the existing DOM nodes (scroll positions, input caret positions, CSS transition states, etc.) will be lost. Instead of replacing the existing DOM tree with a new DOM tree we want to transform the existing DOM tree to match the new DOM tree while minimizing the number of changes to the existing DOM tree. This is exactly what the morphdom module does! Give it an existing DOM node tree and a target DOM node tree and it will efficiently transform the existing DOM node tree to exactly match the target DOM node tree with the minimum amount of changes. morphdom does not rely on any virtual DOM abstractions. Because morphdom is using the real DOM, the DOM that the web browser is maintaining will always be the source of truth. Even if you have code that manually manipulates the DOM things will still work as expected. In addition, morphdom can be used with any templating language that produces an HTML string.


  •    Perl

Perl subclass of HTML::Tree and HTML::Parser for HTML templating via tree rewriting

pipdeptree - A command line utility to display dependency tree of the installed Python packages

  •    Python

pipdeptree is a command line utility for displaying the installed python packages in form of a dependency tree. It works for packages installed globally on a machine as well as in a virtualenv. Since pip freeze shows all dependencies as a flat list, finding out which are the top level packages and which packages do they depend on requires some effort. It can also be tedious to resolve conflicting dependencies because pip doesn't yet have true dependency resolution (more on this later). This utility tries to solve this problem. To some extent, this tool is inspired by lein deps :tree command of Leiningen.

zTree_v3 - jQuery Tree Plugin

  •    HTML

zTree is a multi-functional 'tree plug-ins.' based on jQuery. The main advantages of zTree includes excellent performance, flexible configuration, and the combination of multiple functions.

OpenGraph-Net - .Net Open Graph Parser written in CShap

  •    CSharp

A simple .net assembly to use to parse Open Graph information from either a URL or an HTML snippet. You can read more about the Open Graph protocol.

dependo - Visualize your CommonJS or AMD module dependencies in a force directed graph report.

  •    HTML

Visualize your CommonJS, AMD, or ES6 module dependencies in a force directed graph report - powered by D3.js. Let me introduce dependo - A small visualization tool that draws an force directed graph of JavaScript dependencies pulled from a codebase of CommonJS, AMD, or ES6. Behind the scene I’m using a wonderful library named node-madge, to extract the dependencies and combined with the power of D3.js I draw a beautiful zoomable directed graph.

Beautiful Soup - Python HTML/XML parser

  •    Python

Beautiful Soup is a Python HTML/XML parser designed for quick turnaround projects like screen-scraping. Beautiful Soup parses anything you give it, and does the tree traversal stuff for you. You can tell it "Find all the links", or "Find all the links of class externalLink", or "Find all the links whose urls match "", or "Find the table heading that's got bold text, then give me that text."

Tree View (with HTML-Kit Support)

  •    Delphi

A Win32 application (can be run as an HTML-Kit plugin) which can display HTML and XML documents in a tree layout.