dagre-d3 - A D3-based renderer for Dagre

  •        8

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts as a front-end to dagre, providing actual rendering using D3. For more details, including examples and configuration options, please see our wiki.

https://github.com/dagrejs/dagre-d3

Dependencies:

d3 : ^4.12.2
dagre : ^0.8.2
graphlib : ^2.1.5
lodash : ^4.17.10

Tags
Implementation
License
Platform

   




Related Projects

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.

dagre - Directed graph renderer for javascript

  •    Javascript

Directed graph renderer for javascript

dagre - Directed graph layout for JavaScript

  •    Javascript

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. For more details, including examples and configuration options, please see our wiki.

graphlib - A directed multi-graph library for JavaScript

  •    Javascript

Graphlib is a JavaScript library that provides data structures for undirected and directed multi-graphs along with algorithms that can be used with them. To learn more see our Wiki.

WebCola - Javascript constraint-based graph layout

  •    TypeScript

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.


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.

neo4jd3 - Neo4j graph visualization using D3.js

  •    Javascript

Neo4j graph visualization using D3.js. First of all, make sure you have ruby and sass gem installed. Then, clone the repository, install all dependencies, build and serve the project.

d3-flame-graph - A D3.js plugin that produces flame graphs from hierarchical data.

  •    Javascript

A D3.js plugin that produces flame graphs from hierarchical data. If you don't know what flame graphs are, check Brendan Gregg's post.

graph-scroll - scrollers > steppers

  •    HTML

graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart's state. To support headers and intro images/text, we use a container element containing the explanatory text and graph.

react-d3-components - D3 Components for React

  •    Javascript

Let React have complete control over the DOM even when using D3. This way we can benefit from Reacts Virtual DOM. to start a webserver, and navigate to http://localhost:8000/example in order to visualize the new example page. Note that the example page directly points to the dist folder.

cytoscape

  •    Javascript

Cytoscape.js is a fully featured graph theory library. Do you need to model and/or visualise relational data, like biological data or social networks? If so, Cytoscape.js is just what you need. Cytoscape.js contains a graph theory model and an optional renderer to display interactive graphs. This library was designed to make it as easy as possible for programmers and scientists to use graph theory in their apps, whether it's for server-side analysis in a Node.js app or for a rich user interface.

Britecharts - Client-side reusable Charting Library based on D3

  •    Javascript

Britecharts is a client-side reusable Charting Library based on D3.js v4 that offers easy and intuitive use of charts and components that can be composed together to create amazing visualizations.Britecharts components have been written in ES2016 with a Test Driven methodology, so they are fully tested, and we are committed to keeping them that way.

d3-process-map - Web application to illustrate the relationships between objects in a process using d3

  •    PHP

This is a PHP web application that displays a directed acyclic graph in a modern web browser using d3.js. It is designed for illustrating the relationships between objects in a process. The application can display one or more datasets located in the data/ folder. Each dataset gets its own folder. There are two datasets bundled with the application (one for each of the examples above). Switch between datasets by appending ?dataset=folder-name to the URL. If no dataset name is given, the dataset in the default folder will be displayed.

vx - 🐯react + d3 = vx | visualization components

  •    Javascript

vx is a collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM. Let's make a simple bar graph.

specificity-graph - Generate interactive Specificity Graphs for your CSS

  •    Javascript

Generate an interactive line graph showing the specificity in your stylesheet. Uses d3, css-parser, and specificity. Just require('specificity-graph').

rubrowser - a ruby code dependency graph interactive visualizer

  •    Javascript

a visualizer for ruby code (rails or otherwise), it analyze your code and extract the modules definitions and used classes/modules and render all these information as a directed force graph using D3. the idea is that the project opens every .rb file and parse it with parser gem then list all modules and classes definitions, and all constants that are listed inside this module/class and link them together.

Tomato Renderer

  •    

Tomato renderer is an XNA-based rendering engine. - Light pre-pass (a.k.a. deferred lighting) rendering. - Filmic tone-mapping. - Scene-graph based object system.