WebCola - Javascript constraint-based graph layout

  •        51

JavaScript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries. Note: While D3 adaptor supports both D3 v3 and D3 v4, WebCoLa's interface is styled like D3 v3. Follow the setup in our homepage for more details.



d3-dispatch : ^1.0.3
d3-drag : ^1.0.4
d3-timer : ^1.0.5



Related Projects

UIView-Autolayout - Category on UIView to simplify the creation of common layout constraints

  •    Objective-C

If you're making a new app targeting iOS9 or higher, I'd recommend using the new layout anchor functionality and stack views to achieve the layout you require. The layout anchor gives you concise creation of constraints in code, and stack views probably give you 90% of the layouts you were making yourself using constraints anyway. Category on UIView to simplify the creation of common layout constraints. The code is described and introduced in this blog post.

FLKAutoLayout - UIView category which makes it easy to create layout constraints in code

  •    Objective-C

FLKAutoLayout is a collection of categories on UIView which makes it easy to setup layout constraints in code. FLKAutoLayout creates simple constraints with a readable syntax and provides many convenience methods to setup more complex constraints between multiple views at once. It automatically adds the constraints to the nearest common superview of the views involved and sets the translatesAutoresizingMaskIntoConstraints property on those views to NO.


  •    Javascript

AutoLayout.js implements Apple's Auto Layout and Visual Format Language in Javascript. Auto layout is a system which lets you perform lay out using mathematical relationships (constraints). It uses the awesome Cassowary.js library to do the actual constraint resolving and implements Apple's constraint system and Visual Format Language (vfl) on top of that. It supports the Extended VFL syntax, including view-stacks and z-indexing. AutoLayout.js is an abstract library for integrating Auto Layout and VFL into other javascript technologies. It provides a simple API and programming model that you can use to build your own auto layout and VFL solution. A simple example of this is, is using position: absolute; to lay out DOM elements. A more elobarate example of this is the Visual Format Editor, which is built using famo.us and famous-flex. AutoLayout.js is written in ES6 and contains transpiled distribution files.

Relayout - Swift microframework for declaring Auto Layout constraints functionally

  •    Swift

Relayout is a Swift microframework to make using Auto Layout easier with static and dynamic layouts. If you want to build a UI using Apple's UI frameworks today, you have three good options. You can use Auto Layout in Interface Builder, you can use Auto Layout in code and maintain references to those constraints, or you can implement a layout function with layoutSubviews. Each of these approaches has pros and cons.

AutoLayoutShorthand - alternative system for creating and adding Cocoa Auto Layout constraints

  •    Objective-C

Auto Layout Shorthand (ALS) is an alternative system for creating and adding Auto Layout constraints. It feels kind of like CSS, though more powerful and without HTML's frustrating default layout model.

MyLinearLayout - MyLayout is a powerful iOS UI framework implemented by Objective-C

  •    Objective-C

Is equivalent to: UIStackView of iOS and LinearLayout of Android. Linear layout is a single line layout view that the subviews are arranged in sequence according to the added order(from top to bottom or from left to right). So the subviews' origin&size constraints are established by the added order. Subviews arranged in top-to-bottom order is called vertical linear layout view, and the subviews arranged in left-to-right order is called horizontal linear layout.

UIView-FDCollapsibleConstraints - Builds to collapse a view and its relevant layout constraints, simulating a "Flow Layout" mode

  •    Objective-C

UIView+FDCollapsibleConstraints builds to collapse a view and its relevant layout constraints, simulating a "Flow Layout" mode. This demo collapses the forkingdog image view and its bottom margin constraint.

springy - A force directed graph layout algorithm in JavaScript

  •    Javascript

A force directed graph layout algorithm in JavaScript. Springy is a force directed graph layout algorithm.


  •    WPF

Graph# is a graph layout framework. It contains some layout algorithms and a GraphLayout control for WPF applications.

g2o - g2o: A General Framework for Graph Optimization

  •    C++

g2o is an open-source C++ framework for optimizing graph-based nonlinear error functions. g2o has been designed to be easily extensible to a wide range of problems and a new problem typically can be specified in a few lines of code. The current implementation provides solutions to several variants of SLAM and BA. A wide range of problems in robotics as well as in computer-vision involve the minimization of a non-linear error function that can be represented as a graph. Typical instances are simultaneous localization and mapping (SLAM) or bundle adjustment (BA). The overall goal in these problems is to find the configuration of parameters or state variables that maximally explain a set of measurements affected by Gaussian noise. g2o is an open-source C++ framework for such nonlinear least squares problems. g2o has been designed to be easily extensible to a wide range of problems and a new problem typically can be specified in a few lines of code. The current implementation provides solutions to several variants of SLAM and BA. g2o offers a performance comparable to implementations of state-of-the-art approaches for the specific problems (02/2011).

FLKAutoLayout - UIView category which makes it easy to create layout constraints in code

  •    Objective-C

UIView category which makes it easy to create layout constraints in code

cassowary.js - Cassowary/JS, better, faster, future-ready

  •    Javascript

Cassowary is an algorithm that computes flexible, responsive layouts quickly without resorting to piles of imperative code. Just describe the preferred relationships between values, noting which constraints are more important than others, and Cassowary figures out an optimal solution based on the current inputs. When the inputs or constraints change, Cassowary is particularly efficient at computing a new answer quickly based on the last-known solution. These properties together make it ideal for use in layout systems -- indeed, it's the algorithm at the center of Apple's new Auto Layout system for iOS & OS X. This repo hosts an improved version of Greg Badros's port of the Cassowary hierarchial constraint toolkit to JavaScript.

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.

automatic-graph-layout - A set of tools for graph layout and viewing

  •    Javascript

MSAGL is a .NET library and tool for graph layout and viewing.MSAGL was developed in Microsoft by Lev Nachmanson, Sergey Pupyrev, Tim Dwyer, Ted Hart, and Roman Prutkin.

agensgraph - AgensGraph, a transactional graph database based on PostgreSQL

  •    C

AgensGraph is a new generation multi-model graph database for the modern complex data environment. AgensGraph is a multi-model database, which supports the relational and graph data model at the same time that enables developers to integrate the legacy relational data model and the flexible graph data model in one database. AgensGraph supports ANSI-SQL and openCypher (http://www.opencypher.org). SQL queries and Cypher queries can be integrated into a single query in AgensGraph. AgensGraph is based on the powerful PostgreSQL RDBMS, and is very robust, fully-featured and ready for enterprise use. AgensGraph is optimized for handling complex connected graph data and provides plenty of powerful database features essential to the enterprise database environment including ACID transactions, multi-version concurrency control, stored procedure, triggers, constraints, sophisticated monitoring and a flexible data model (JSON). Moreover, AgensGraph leverages the rich eco-systems of PostgreSQL and can be extended with many outstanding external modules, like PostGIS.

VivaGraphJS - Graph drawing library for JavaScript

  •    Javascript

VivaGraphJS is designed to be extensible and to support different rendering engines and layout algorithms. Underlying algorithms have been broken out into ngraph. The larger family of modules can be found by querying npm for "ngraph".

Auckland Layout Model

  •    Java

The Auckland Layout Model is a platform-independent 2D layout technology for arranging the controls in a GUI. The model supports the specification of constraints based on linear algebra, and an optimal layout is calculated using linear programming.

EasyPeasy - Auto Layout made easy

  •    Swift

In this quick tour through EasyPeasy we assume that you already know the advantages and disadvantages of the different Auto Layout APIs and therefore you won't see here a comparison of the code side by side, just read and decide whether EasyPeasy is for you or not. The example below is quite simple but shows how effortless its implementation result using EasyPeasy.