• Stars
    star
    1,002
  • Rank 45,804 (Top 1.0 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 5 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🌌 A React toolkit for graph visualization based on G6.

Graphin

A React toolkit for graph analysis based on G6

Version NPM downloads Latest commit

English | 简体中文

🌾 New Products!

2022.06.06, this day coincides with the 4th anniversary of the open source of G6, which is also the traditional Chinese solar term: "Grain in Ear", G6VP, a new product in the direction of graph analysis. Users can complete the visualization, exploration and analysis tasks of relational data online without code development. You can also export the SDK with one click and integrate it into the business system to help developers improve R&D efficiency.

The SDK exported by G6VP is encapsulated based on Graphin. If you want to understand the capabilities of Graphin, you can take a look at the product G6VP

demo2

✨ Features

🎨 Good-looking elements, standardized style configuration

Graphin standardizes the visual mapping of graph elements. A Graphin's built-in node contains 5 parts: keyshape, label, halo, icon, and badges, each part can be driven by data. The built-in edges include three parts: keyshape, label, and halo. There are also corresponding style configurations for commonly used features, such as label backgrounds, self-loops, polygons, and dashed lines, etc. Try it online

node-style edge-style

📦 Automatic layout, easy to handle complex scenarios

Graphin has 10 built-in network graph layouts and 4 tree graph layouts to meet your needs of layout for different data types and different analysis scenarios. For features in complex business scenarios, such as layout switching, dynamic layouts, sub-graph layouts, etc., can be easily realized through data-driven layout. Try it online

node-expand layout-switch

📝 Thoughtful interactions, easy to customize

Graphin provides 13 interactive components, including canvas zooming, panning, brush selection, lasso select , automatic resize, and also element dragging, selection, hovering, highlighting, expanding and collapsing, etc., to meet your interactive needs for different analysis scenarios Try it online

behaviors

🚀 Rich components, derived from precipitation of business development

Currently Graphin provides 7 analysis components: ContextMenu, Tooltip, MiniMap, Toolbar, FishEye, Hull, and Legend. 17+ analysis components will be provided in the future. Try it online components

⚙️ Comfortable development experience, in line with React users' cognition

typescript

🖥 Browser support

  • Graphin icons use Proxy, the font icon may not be displayed correctly on some browsers that do not support Proxy syntax
  • The Graphin rendering engine of Graphin is G6, which relies on the browser API and does not support SSR
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE11, Edge last 2 versions last 2 versions last 2 versions

📦 Installation

If you are using React, then you can use Graphin as a normal React component.

It uses yarn to install dependencies in this article, while npm is also fine. The following commands install Graphin's core components @antv/graphin and analysis components @antv/graphin-components, and Graphin's official icon library @antv/graphin-icons

yarn add @antv/graphin@latest --save
yarn add @antv/graphin-components@latest --save
yarn add @antv/graphin-icons --save

🔨 Usage

Use Graphin Core Component

import React from 'react';
import Graphin from '@antv/graphin';
// mock data
const data = Utils.mock(10).circle().graphin();
export default () => {
  return <Graphin data={data} />;
};

Use Graphin Analysis Components

import React from 'react';
import Graphin, { Components, Utils } from '@antv/graphin';
const { MiniMap } = Components;
// mock data
const data = Utils.mock(10).circle().graphin();
export default () => {
  return (
    <Graphin data={data}>
      <MiniMap />
    </Graphin>
  );
};

Use Graphin font icon

import React from 'react';
import Graphin from '@antv/graphin';
// Import icon resource files
import iconLoader from '@antv/graphin-icons';
import '@antv/graphin-icons/dist/index.css';
// mock data
const data = Utils.mock(10).circle().graphin();
// Register in Graphin
const { fontFamily, glyphs } = iconLoader();
const icons = Graphin.registerFontFamily(iconLoader);
// Use icons
data.nodes.forEach(node => {
  node.style = {
    icon: {
      type: 'font', // Specify the icon to be Font type
      fontFamily: fontFamily, // Specify FontFamily
      value: icons.home, // Specify the value of the icon
    },
  };
});
export default () => {
  return <Graphin data={data} />;
};

👨‍💻 Upgrade Guide

If you are a user from Graphin1.x, this Upgrade Guide may help you. If you encounter upgrade problems, you can go to github issue section, and feel free to create issues if it's not already there.

⌨️ Development Guide

If you want to run Graphin locally, you may wish to read this Contribution Guide. We hope more contributors can join our team to make Graphin better together.

More Info

More Repositories

1

G2

📊 The concise and progressive visualization grammar.
TypeScript
12,061
star
2

G6

♾ A Graph Visualization Framework in JavaScript.
TypeScript
10,958
star
3

F2

📱📈An elegant, interactive and flexible charting library for mobile.
JavaScript
7,884
star
4

X6

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
TypeScript
5,703
star
5

L7

🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.
TypeScript
3,594
star
6

G2Plot

🍡 An interactive and responsive charting library based on G2.
TypeScript
2,539
star
7

S2

⚡️ A practical visualization library for tabular analysis.
TypeScript
1,470
star
8

AVA

🤖 A framework for automated visual analytics.
TypeScript
1,333
star
9

wx-f2

F2 的微信小程序
JavaScript
1,276
star
10

G

💥 A flexible rendering engine for visualization.
TypeScript
1,046
star
11

G6VP

G6VP is an online visual analysis tool for graphs and a low-code platform for building graph applications.
TypeScript
812
star
12

XFlow

React component for building interactive diagrams.
TypeScript
588
star
13

g6-editor

JavaScript
533
star
14

antvis.github.io

🔜 AntV 新站点!
TypeScript
410
star
15

g2-react

This repo is being deprecated, check Ant Design Charts https://github.com/ant-design/ant-design-charts
JavaScript
363
star
16

gatsby-theme-antv

⚛️ Polished Gatsby theme for documentation site
TypeScript
345
star
17

hierarchy

Layout algorithms for visualizing hierarchical data.
JavaScript
249
star
18

data-set

state driven all in one data process for data visualization.
TypeScript
249
star
19

F2Native

📱📈An elegant, interactive and flexible native charting library for mobile.
C++
213
star
20

layout

Layout algorithms for graphs.
TypeScript
200
star
21

L7VP

L7VP is an geospatial intelligent visual analysis and application development tools.
TypeScript
189
star
22

my-f2

F2 的支付宝小程序版本
JavaScript
145
star
23

g-webgl-compute

A GPGPU implementation based on WebGL.
TypeScript
143
star
24

F6

F6 is a graph visualization engine which provides quick and smooth operations on mobile devices.
JavaScript
133
star
25

f2-canvas

微信小程序 F2 自定义图表组件
JavaScript
118
star
26

algorithm

常用的图算法 JS 实现,提供给 G6 及 Graphin 用于图分析场景使用。
TypeScript
99
star
27

china-geojson

This repo is being deprecated.
96
star
28

SAMJS

TypeScript
94
star
29

L7Plot

🌍 Geospatial Visualization Chart Library
TypeScript
83
star
30

util

utility library for AntV products.
TypeScript
74
star
31

LarkMap

A React toolkit for geospatial visualization based on L7.
TypeScript
71
star
32

mini-program-f2-demos

支付宝小程序小程序端的 F2 图表 demo
JavaScript
69
star
33

component

🍱 AntV UI component based on G render engine.
TypeScript
58
star
34

scale

📦 Toolkit for mapping abstract data into visual representation.
TypeScript
56
star
35

awesome-f2-charts

F2 图表可视化方案精选
HTML
46
star
36

L7Draw

L7 绘制控件
TypeScript
44
star
37

coord

Toolkit for apply point transformations for vector.
TypeScript
41
star
38

GUI

UI components for G. Merge to @antvis/component.
TypeScript
40
star
39

vis-dashboard

🎨 Awesome dashboards, built with G2 and G2Plot.
TypeScript
40
star
40

gatsby-starter-theme-antv

⚛️ Gatsby's starter of 👉
TypeScript
35
star
41

L7Editor

Geographic data editing tool based on L7
TypeScript
35
star
42

theme-set

💄 Customize theme for G2, G2Plot of AntV(孵化中)
TypeScript
35
star
43

FEngine

TypeScript
31
star
44

Dipper

下一代位置可视分析研发框架
TypeScript
28
star
45

smart-color

A JavaScript library for color computation.
TypeScript
27
star
46

g2-brush

Select a one-, two-dimensional or irregular region using the mouse.
JavaScript
24
star
47

L7-react

L7 React 版
TypeScript
23
star
48

f2-context

F2针对多端的context适配
TypeScript
22
star
49

A8

🎼 A library for audio visualization.
TypeScript
22
star
50

g2-plugin-slider

A datazoom slider plugin for G2.
JavaScript
20
star
51

dumi-theme-antv

AntV website theme based on dumi2.
TypeScript
20
star
52

L7-Leaflet

L7 leaflet 插件
19
star
53

event-emitter

Simple event emitter for @antvis
TypeScript
19
star
54

L7-boundary

行政区划围栏可视化方案
TypeScript
16
star
55

DipperMap

A tool supporting geo data visualization
TypeScript
16
star
56

vis-predict-engine

可视化预测引擎,目前只用于预测图可视化布局.布局预测的模型由本引擎内置,支持force/radial/concentric/circular的四布局分类
TypeScript
14
star
57

graphlib

A lib containing multible usages for graph structure, graph algorithm, and other graph ops.
TypeScript
13
star
58

attr

Attribute mapping module for @antvis.
TypeScript
12
star
59

antv-spec

A declarative grammar that supports various technology stacks of AntV.
TypeScript
12
star
60

geo-coord

地理坐标系
TypeScript
11
star
61

g-device-api

A Device API references WebGPU implementations
TypeScript
9
star
62

my-f2-pc

淘宝PC小程序
JavaScript
8
star
63

L7Gallery

L7 demo 案例集锦
8
star
64

stat

常用统计函数的实现
TypeScript
8
star
65

interaction

interaction bindings for G2 and F2
TypeScript
7
star
66

infinite-canvas-tutorial

An infinite canvas tutorial
TypeScript
7
star
67

g2-extensions

The one-stop shop for official @antv/g2 extensions.
TypeScript
6
star
68

adjust

Adjust module for @antvis.
TypeScript
5
star
69

graphin-studio-site

Github Page Repo for Graphin Studio
HTML
5
star
70

L7-CustomLayer-Template

TypeScript
5
star
71

g2plot-schema

Schemas of configs(options) of G2Plot chart types.
TypeScript
4
star
72

template

📃 Template repository for @antvis.
JavaScript
4
star
73

old-site

AntV 旧版本站点
HTML
4
star
74

vis-steg

Visualization Steganography: conceal information within visualization images.
TypeScript
4
star
75

AVAPy

Python Library for Automatic Visual Analytics
Python
4
star
76

g-gesture

WIP: Gesture module for @antv/g.
TypeScript
4
star
77

insight-component

Components for GI&LI
TypeScript
3
star
78

antvis-sites-data

🔢 Headless CMS data for https://antv.vision
3
star
79

g2-next-site

JavaScript
3
star
80

chart-node-g6

the Toolkit for G6 chart type nodes
TypeScript
3
star
81

color-schema

A JSON schema used to regulate semantic color assets or palettes.
TypeScript
3
star
82

autochart-config-panel

GUI config panel for the autoChart feature of AntV/AVA.
TypeScript
3
star
83

data-samples

Open data set collection for AntV products
TypeScript
3
star
84

l7-extensions

🧩 A collection of extensions for L7.
TypeScript
3
star
85

F7

L7小程序版本,支持支付宝、微信等多端小程序。
TypeScript
2
star
86

async-hook

the control flow for l7
TypeScript
2
star
87

create-antv-demo

A simple CV-dashboard framework for practicing how to use AntV.
JavaScript
2
star
88

g2-3.x-site

The site of G2 3.x version
HTML
2
star
89

thumbnails

Thumbnail images for different chart types from Chart Knowledge Base.
TypeScript
2
star
90

g6-3.2.x-site

The site for G6 3.2.x
HTML
2
star
91

gi-export

TypeScript
2
star
92

g2plot-1.x-site

The site of G2Plot 1.x version.
HTML
1
star
93

storytelling

Telling story by data visualization.
TypeScript
1
star
94

translator

A translator based on Google Translate.
JavaScript
1
star