基于D3.js的可视化库

visx

https://github.com/airbnb/visx/tree/master

airbnb 开源的数据可视化库

TS+React

比如关系图的节点：
visx/packages/visx-network/src/DefaultNode.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';

export type NodeProps = {
  cx?: number;
  cy?: number;
};

export default function DefaultNode({
  r = 15,
  fill = '#21D4FD',
  ...rest
}: NodeProps & Omit<React.SVGProps<SVGCircleElement>, keyof NodeProps>) {
  return <circle r={r} fill={fill} {...rest} />;
}

nivo

https://github.com/plouc/nivo

TS+React

recharts

https://github.com/recharts/recharts

Redefined chart library built with React and D3

TS+React

plot

https://github.com/observablehq/plot

About
A concise API for exploratory data visualization implementing a layered grammar of graphics

org-chart

组织结构图，看起来很赞。我们画关系图，完全可以参考这个程序，比如我的financial-chart的重构。

2000 行的单 JS 文件，碉堡了……

https://github.com/bumbeishvili/org-chart