G6 README

The project's README from github.com/antvis/G6. As one markdown file: README.md.

English | 简体中文

G6: A Graph Visualization Framework in TypeScript

Introduction • Examples • Quick Start • API

G6 is a graph visualization engine. It provides basic capabilities for graph visualization and analysis such as drawing, layout, analysis, interaction, animation, themes, and plugins. With G6, users can quickly build their own graph visualization and analysis applications, making relational data simple, transparent, and meaningful.

✨ Features

G6, as a professional graph visualization engine, boasts the following features:

Rich Elements: It comes with a variety of built-in node, edge, and Combo UI elements with extensive style configurations, supports data callbacks, and has a flexible mechanism for extending custom elements.
Controllable Interactions: It includes more than 10 built-in interaction behaviors and offers a rich array of events, facilitating the expansion of custom interactive behaviors.
High-Performance Layout: The engine features more than 10 common graph layouts, some of which leverage GPU and Rust parallel computing for enhanced performance, and it supports custom layout development.
Convenient Plugins: Optimized built-in plugin functionality and performance, with flexible extensibility, making it easier to implement customized business capabilities.
Multiple Theme and Palettes: Provides two sets of built-in themes, light and dark, that integrate over 20 popular community color palettes based on the AntV new color scheme.
Multi-Environment Rendering: Harnessing the power of G, it supports rendering in Canvas, SVG, and WebGL, as well as server-side rendering with Node.js; it also offers plugin packages that provide powerful 3D rendering and spatial interactions based on WebGL.
React Ecosystem: By utilizing the React front-end ecosystem, it supports React nodes, significantly enriching the presentational styles of G6 nodes.

🔨 Getting Started

G6 is usually installed via a package manager such as npm or Yarn.

$ npm install @antv/g6

The Graph object then can be imported from G6.

<div id="container"></div>

import { Graph } from '@antv/g6';

// Get the Data.
const data = {
  nodes: [
    /* your nodes data */
  ],
  edges: [
    /* your edges data */
  ],
};

// Create the Graph instance.
const graph = new Graph({
  container: 'container',
  data,
  node: {
    palette: {
      type: 'group',
      field: 'cluster',
    },
  },
  layout: {
    type: 'force',
  },
  behaviors: ['drag-canvas', 'drag-node'],
});

// Render the Graph.
graph.render();

All goes well, you can get the following lovely graph!

🌍 Ecosystem

Ant Design Charts: A React chart library based on G2, G6, X6, L7.
Graphin: A simple React wrapper based on G6, as well as an SDK for developing graph visualization applications.

For more ecosystem open-source projects, contributions are welcome. Please feel free to submit a PR for inclusion.

📮 Contributing

This project exists thanks to all the people who contribute.

And thank you to all our backers! 🙏

Contribution Leaderboard

Issue Reporting: If you encounter any issues with G6 during use, please feel free to submit an issue, along with the minimal sample code that can reproduce the problem.
Contribution Guide: Information on how to get involved in the development and contribution to G6.
Ideas Discussion: Discuss your ideas on GitHub Discussions or in the DingTalk group.

📄 License

Searching Database…

12.3K ·GitHub

What is this?

G6 is a graph visualization framework for the web: an engine for drawing, laying out, analyzing and interacting with relational data like networks, with animation, themes and plugins.

Is this a library I add to my own app, or a finished tool?

It's a framework you install into your own JavaScript or TypeScript project and build graph apps on top of — not a standalone application.

How do I add it to a project?

Install it with npm or Yarn, then import the Graph object from G6 and feed it your data to get a graph on screen.

Is G6 free, and can I use it in commercial projects?

Yes. It's MIT-licensed open source, so it's free to use, modify and ship in commercial products.

What is Graphin?

A simple React wrapper based on G6 and an SDK for developing graph visualization applications. It's part of the G6 ecosystem, alongside Ant Design Charts.

What is a Combo in G6?

Combos are built-in UI elements alongside nodes and edges, used to group related nodes so clusters can be styled and manipulated together.

What are similar projects?

G2, sigma.js, cytoscape.js, pixijs, Chart.js, graph, nivo, rete

Which topics is it in?

tree, graph-visualization, network, graph, canvas, webgl, svg, visualization, data-visualization, animation, hacktoberfest, rust

Creator: antvis
Size: 81.5 MB
Stars: 12.3K
Updated: CommitOct 16 Release5.1.1Apr 17
Age: 9y
Commits · 90 Days