Powerful data visualization library based on G2 and React.

Overview

BizCharts

NPM Package NPM Downloads

New charting and visualization library has been released: http://bizcharts.net/products/bizCharts.

More details about BizCharts

Features

  • React ES6 grammar
  • Easy to use
  • Strong expansion capability
  • Support most data visualization charts

See more demos.

Releases

Upgrade document: https://bizcharts.net/product/BizCharts4/category/61/page/104

Installation

npm

$ npm install bizcharts

umd

 <script src="https://unpkg.com/[email protected]${version}/umd/BizCharts.min.js"></script>

Dev build

$ git clone https://github.com/alibaba/BizCharts.git
$ cd BizCharts
$ npm install
$ npm start
$ npm run build

Test snapshot

Does not support external network testing right now.

tnpm run uitest

Usage

Try it out

import {Chart, Axis, Tooltip, Line, Point} from "bizcharts";

const data = [...];

<Chart height={400} data={data} forceFit>
  <Axis name="temperature" label={{formatter: val => `${val}°C`}} />
  <Line position="month*temperature" size={2} color={'city'} />
  <Point position="month*temperature" size={4} color={'city'} />
</Chart>

FAQ

How to Contribute

We welcome all contributions. You could submit any ideas as pull requests. Thank you for your interest and have a good time. Please let us know how can we help. Do check out issues for bug reports or suggestions first.

Update

G2 decided to terminate the "Experience Improvement Program". In verson @antv/[email protected](released at 2018.12.26) and above, all tracking code is removed, no unexpected remote request will be sent while you are using G2. And Bizcharts Upgrade the dependent version the first time at 2018.12.26 24:00.

License

BizCharts is available under the License MIT.

Comments
  • BizCharts同步@Antv/g2 新版本 3.5.19

    BizCharts同步@Antv/g2 新版本 3.5.19

    BizCharts Version: 3.x Platform: safari 15 Mini Showcase(like screenshots): 请查看 https://github.com/antvis/G2/pull/3640

    目前 BizCharts的3.x 版本最新为 3.5.9, 依赖的@Antv/g2版本为3.5.15,在safari 15下无法显示, 请发个最新的包解决,谢谢!

    opened by BraveHead 28
  • 在React16下使用报错

    在React16下使用报错

    _121 image

    return ( <ContainerQuery query={RESPONSIVE_QUERY}> { (params) => ( <div className={classnames(['iqc-flow-stats-wrapper', params])}> <Header title="流量统计" filters={this.filters} /> <Card> <div className="flow-content"> <Chart width={600} height={400} data={data} scale={cols}> <Axis name="genre" /> <Axis name="sold" /> <Legend position="top" dy={-20} /> <Tooltip /> <Geom type="interval" position="genre*sold" color="genre" /> </Chart> </div> <div className="statistic-text"> <p>会话总数:<span>7534</span></p> <p>累计中心:<span>13</span></p> <p>累计人数:<span>1321</span></p> </div> </Card> </div> ) } </ContainerQuery> );

    opened by YanYuanFE 19
  • DataSet状态变化Guide系列组件不会重新渲染

    DataSet状态变化Guide系列组件不会重新渲染

    在进行DataSet状态变更和DataView过滤的情况下,Geom会随之变化,但是状态变化前的Guide系列组件会消失,不会重新渲染。

      <Line
          top={true}
          start= {[ds.state.first, mean]}
          end= {[ds.state.last, mean]}
       />
    

    请问是什么原因呢? @weepy3641

    bug 
    opened by joriewong 17
  • 使用层叠图标 只显示最后一条数据

    使用层叠图标 只显示最后一条数据

    • bizcharts Version:3.17
    • Platform or react version:16.2.0
    • Mini Showcase(like screenshots):
    • CodePen Link:
    • you can fork CodePen template form this: https://codepen.io/leslie2014/pen/xjJGER
    Needs More Info 
    opened by nanfs 15
  • 数据更新时,Geom中animate属性不生效

    数据更新时,Geom中animate属性不生效

    • bizcharts Version: 16.0.0
    • Platform or react version: 3.1.5
    • Mini Showcase(like screenshots):
    • CodePen Link: https://codepen.io/hcxw11/pen/wXLyWa

    问题描述:

    数据更新时,图表中的数据直接变成了新的值,参考animate教程没有效果,配置如下:

    // 在Chart标签中设置animate={true}
    <Geom
      type="interval"
      position="x*y"
      color={color}
      tooltip={tooltip}
      animate={{
        update: {
          animation: 'fadeIn', // 动画名称
          easing: 'easeInQuart', // 动画缓动效果
          delay: 100, // 动画延迟执行时间
          duration: 600, // 动画执行时间
        },
      }}
    />
    

    后面看了g2的教程,使用chart.changeData(nextProps.data)chart.source(data); chart.repaint(); 图表也没有进行渲染。

    不知道是哪里出了问题,可以说是非常绝望了。。

    手动召唤大佬 @weepy3641

    期望:

    当数据发生变化时,图表能有一个动效,比如折线图从左向右绘制这样。

    plan g2 bug 4.x bug 
    opened by hcxw11 14
  • BizCharts Slider 插件是否支持分组条形图

    BizCharts Slider 插件是否支持分组条形图

    RT,传入组件的数据格式(props)为

    {
    	data: [
    		{time: '2018-12-10 12:12:12', uv: 43, pv: 45},
    		...
    	]
    }
    

    单维度条形图上无展示问题,多组条形图上传入数据后报错:

    我看 slider 插件引用的是 @antv/g2-plugin-slider,但翻遍 bizCharts 以及 G2-plugin-slider 也没看到关于复杂数据类型的配置说明,所以只能按照示例中给的格式如下书写,报错信息为:

    Uncaught (in promise) TypeError: Cannot read property 'Group' of undefined
    	at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
        at e (bizcharts-plugin-slider.min.js:1)
        at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
        at e (bizcharts-plugin-slider.min.js:1)
        at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
        at e (bizcharts-plugin-slider.min.js:1)
        at bizcharts-plugin-slider.min.js:1
        at bizcharts-plugin-slider.min.js:1
        at bizcharts-plugin-slider.min.js:1
        at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
        at e (bizcharts-plugin-slider.min.js:1)
        at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
        at e (bizcharts-plugin-slider.min.js:1)
        at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
        at e (bizcharts-plugin-slider.min.js:1)
        at bizcharts-plugin-slider.min.js:1
        at bizcharts-plugin-slider.min.js:1
        at bizcharts-plugin-slider.min.js:1
        at Object.<anonymous> (bizcharts-plugin-slider.min.js:1)
        at __webpack_require__ (bootstrap c65ba54f9f0ad8d75c02:707)
        at fn (bootstrap c65ba54f9f0ad8d75c02:112)
        at Object.<anonymous> (BarChartWithBrush.js:18)
        at __webpack_require__ (bootstrap c65ba54f9f0ad8d75c02:707)
        at fn (bootstrap c65ba54f9f0ad8d75c02:112)
        at Object.<anonymous> (index.js:2)
        at __webpack_require__ (bootstrap c65ba54f9f0ad8d75c02:707)
        at fn (bootstrap c65ba54f9f0ad8d75c02:112)
        at Object.<anonymous> (Index.js:8)
        at __webpack_require__ (bootstrap c65ba54f9f0ad8d75c02:707)
        at fn (bootstrap c65ba54f9f0ad8d75c02:112)
    

    除此外,运行官方示例 https://bizcharts.alibaba-inc.com/products/bizCharts/demo/detail?id=g2-area-large&selectedKey=%E6%A6%82%E8%A7%88 会出现如下问题:slider 在首次改变值域范围后,后续无法再继续变更值域(即左右两边无法点按),只能拖住滑动。

    代码如下,谢谢。

    import React, {useState} from 'react';
    import {
      Chart,
      Geom,
      Axis,
      Tooltip,
      Legend,
    } from "bizcharts";
    import DataSet from "@antv/data-set";
    import Slider from "bizcharts-plugin-slider";
    import * as d3 from "d3-array";
    import moment from 'moment';
    
    const SimpleBarChart = (props) => {
      const {data, settings} = props;
      const keysArray = settings.map(e => e.keyName);
    
      const timeRange = d3.extent(data, ({time}) => {
        return new Date(time).getTime();
      });
      timeRange.forEach(element => { // eslint-disable-line
        element = moment(element).format('YYYY-MM-DD HH:mm:ss'); // eslint-disable-line
      });
      const [start, setStart] = useState(timeRange[0]);
      const [end, setEnd] = useState(timeRange[1])
    
      const ds = new DataSet();
      const dv = ds.createView().source(data);
    
      dv.transform({
        type: "fold",
        fields: keysArray,
        // 展开字段集
        key: "x",
        // key字段
        value: "y", // value字段
        callback: (obj) => {
          const time = new Date(obj.time).getTime();
          return time >= new Date(start).getTime() && time <= new Date(end).getTime();
        },
      });
    
      return (
        <React.Fragment>
          <Chart
            height={300}
            data={dv}
            scale={{
              time: {
                type:'timeCat',
                formatter: text => {
                  return moment(text).format('MM-DD HH:mm')
                },
              },
            }}
            forceFit
          >
            <Axis
              name="x"
              dataKey="x"
            />
            <Axis name="y" datakey="y" />
            <Legend />
            <Tooltip />
            <Geom
              type="interval"
              position="time*y"
              color="x"
              adjust={[
              {
                type: "dodge",
                marginRatio: 1 / 64,
              },
            ]}
            />
          </Chart>
          <Slider
            width="auto"
            height={26}
            xAxis="x"
            yAxis="y"
            start={start}
            end={end}
            data={dv}
            scales={{
              time: {
                type: 'timeCat',
              },
            }}
            onChange={(obj) => {
              const { startValue, endValue } = obj;
              setStart(startValue);
              setEnd(endValue);
            }}
          />
        </React.Fragment>
      );
    }
    
    export default SimpleBarChart;
    

    参考过的资料有

    • https://github.com/antvis/g2-plugin-slider#api-reference
    • https://bizcharts.alibaba-inc.com/products/bizCharts/demo/detail?id=g2-area-large&selectedKey=%E6%A6%82%E8%A7%88
    • https://bizcharts.alibaba-inc.com/products/bizCharts/api/sliderPlugin
    • https://github.com/alibaba/BizCharts/blob/master/plugin/slider/src/index.jsx
    opened by hijiangtao 12
  • [BUG] ios 15 任何浏览器, 使用 Geom 导致页面奔溃,无响应

    [BUG] ios 15 任何浏览器, 使用 Geom 导致页面奔溃,无响应

    BizCharts Version: 3.5.5 Platform: IOS15 Mini Showcase(like screenshots): forck and create a demo: https://bizcharts.net/product/BizCharts4/demo/306

    在IOS15上,不管用Safari、还是Chrome,打开有Geom的页面都会奔溃

    opened by 2673542667 11
  • 坐标轴刻度个数设置

    坐标轴刻度个数设置

    • bizcharts Version: 3.5.2
    • Platform or react version: react 16.8.6
    • Mini Showcase(like screenshots):
    • CodePen Link:
    • you can fork CodePen template from this: https://codepen.io/leslie2014/pen/xjJGER 现有数据90条,横轴刻度显示如20191016,纵轴是数值,横轴设置刻度个数为10 tickCount: 10, 未生效,图例上刻度个数为9 image
    By Design 
    opened by yue001001 10
  • Cannot retrieve G2 API `interact` through onGetG2Instance

    Cannot retrieve G2 API `interact` through onGetG2Instance

    • BizCharts Version: 3.5.2

    • Platform or react version: React v15.0.2

    • Case of issue: I would like to bind some G2 events on BizCharts, so I try to use BizCharts API onGetG2Instance to get the chart instance, but function interact cannot be found.

    • Detail use case as below:

    <Chart onGetG2Instance={chart => {
      chart.interact('drag', {
         type: 'XY'
      }).interact('zoom', {
         type: 'XY'
      });
    }}>
    
    
    opened by licaomeng 10
  •  Cannot read property 'getStackAddendumByID' of undefined

    Cannot read property 'getStackAddendumByID' of undefined

    BizCharts ^3.1.0-beta.1 react ^16.2.0

    BizCharts.js:58909 Uncaught TypeError: Cannot read property 'getStackAddendumByID' of undefined at BizCharts.js:58909 at Object.<anonymous> (BizCharts.js:71174) at t (BizCharts.js:30) at Object.<anonymous> (BizCharts.js:71221) at t (BizCharts.js:30) at Object.<anonymous> (BizCharts.js:51366) at t (BizCharts.js:30) at Object.<anonymous> (BizCharts.js:51884) at t (BizCharts.js:30) at Object.<anonymous> (BizCharts.js:418)

    opened by tdida 10
  • BizCharts is not defined

    BizCharts is not defined

    BizCharts Version:4.1.5 Platform:windows Mini Showcase(like screenshots): 基于antd pro v5 开发

    我的问题如标题所示,我也反复看了 官方文档,按照文档配置如下: image 在开发环境下,运行完全OK,build后,就出问题了,在BizCharts is not defined之前是这个错误: image 如上图所示,react等3个js加载都正常,因为regeneratorRuntime is not defined 这个错误导致 BizCharts not defined. 我也查了这个错误的处理方法,都无效果,实在无奈,在此求助!!!

    官方文档只是说出现not defined是因为没有加载成功,可是我的好像都加载OK 啊。

    opened by my9988 9
  • is bizcharts compatible with react version 18?

    is bizcharts compatible with react version 18?

    BizCharts Version: 4.1.22 Platform: windows when i use bizcharts in react version 18, on charts render my app crashes and increase cpu usage, but its ok with react version 17. is there a way to use bizcharts in react 18?

    opened by rezasohrabi 1
  • view 组件的 data 在 state 更新后没有重新绘制图表

    view 组件的 data 在 state 更新后没有重新绘制图表

    BizCharts Version: Platform: Mini Showcase(like screenshots): forck and create a demo: https://bizcharts.net/product/BizCharts4/demo/306 尝试赋值新的变量进去也不能重绘,最后只能重新生成图表实例

    opened by HONGYU0802 0
  • package.json field `browser` problem

    package.json field `browser` problem

    BizCharts Version: latest Platform: mac

    这个问题之前也有人提过 https://github.com/alibaba/BizCharts/issues/642, 应该是在 https://github.com/alibaba/BizCharts/issues/327 这个 issue 被引入的

    webpack 等构建工具在打包时候会优先使用 browser 字段 (参考 https://github.com/SunshowerC/blog/issues/8#browser-vs-module-vs-main)

    导致最后产物产生了一个巨大的 umd 依赖 image

    https://github.com/alibaba/BizCharts/issues/642 中应该是同时用到了 import 和 dynamic import, 以为这个 vendor 没有被使用到, 其实还是用到了的, 这里需要修改, browser 指定 es 产物我理解应该是没有问题的, 最早引入因为 uglify 失效, 原因是

    由于依赖的gl-matrix包同样没有browser入口文件,所以bizcharts的module入口的文件实际是es6的,最中在业务代码打包的时候uglify会报错

    这个问题应该由 babel 做一层转化, 或者替换 uglify 用支持 es6 的压缩方案吧, 直接把 browser 指定 umd 会导致产物全量被打包

    opened by songhn233 0
  • onIntervalClick() does not exist in Chart props and types

    onIntervalClick() does not exist in Chart props and types

    BizCharts Version: 4.0.15 Platform: Windows 10 Mini Showcase(like screenshots): image

    In the documentation, it says there is an event called onIntervalClick(), but it does not exist. https://bizcharts.taobao.com/product/bizcharts/category/7/page/66#:~:text=%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6-,onIntervalClick,-%3D%7Bev%20%3D%3E

    Changelogs does not inform anything about it. How can I use this event?

    opened by veuler 0
  • onplotclick electron 中被执行两次

    onplotclick electron 中被执行两次

    BizCharts Version: 4.1.20 Platform: electron Mini Showcase(like screenshots): forck and create a demo: https://bizcharts.net/product/BizCharts4/demo/306 onplotclick 等点击事件在electron 中会执行两次

    opened by longqionggaccount 0
Releases(v4.1.15)
  • v4.1.15(Dec 7, 2021)

  • v3.5.10(Oct 19, 2021)

  • v4.1.14(Oct 8, 2021)

  • v4.1.13(Oct 8, 2021)

    删除bizcharts修改的字体,改用g2默认字体. 同时解决ios5奔溃问题,该bug主要由于ios字体引起,g2已修改字体修复bug。#1447

    Source code(tar.gz)
    Source code(zip)
  • v4.1.12(Sep 30, 2021)

  • 4.1.11(Jul 6, 2021)

    @antv/g2 --> 4.1.19 @antv/g2plot --> 2.3.25

    • 柱状图柱形宽度设置: -- maxColumnWidth 约束:柱状图最大宽度,像素值 -- minColumnWidth | 约束:柱状图最小宽度,像素值 -- intervalPadding | 组间间隔,像素值 -- dodgePadding | 组内间隔,像素值 -- columnWidthRatio | 一般柱状图宽度占比,比例值 示例:
    <Interval minColumnWidth={10} />
    
    • 放弃resize-observer-polyfill,使用@juggle/resize-observer #1409
    • BulletChart 多条数据bug #1406
    Source code(tar.gz)
    Source code(zip)
  • v4.1.10(Apr 19, 2021)

    feature

    1. @antv/g2 --> 4.1.14
    2. @antv/g2plot --> 2.3.18
    3. export registerScale, getScale, registerTickMethod 方法用于开发者自定义比例尺。
    4. 新增 ReactElement 类型的 Annotation,用法
    // position同其他annotation,content为react组件
    <Annotation.ReactElement position={['min', 6]}  content={<div>{count}</div>} />
    

    fix

    1. 数据更新动画刷新多次。
    2. 数据更新后react自定义 tooltip 失效的bug。
    Source code(tar.gz)
    Source code(zip)
  • v4.1.9(Mar 9, 2021)

  • v4.1.8(Mar 8, 2021)

  • v4.1.7(Feb 7, 2021)

    1. 降级依赖react-error-boudary 为3.0.2,该包4.1.0,export type {...}该用法不兼容低版本ts
    2. 环形图的statistic 配置不可见,null 配置项问题。
    3. 雷达图axis 默认配置优化GroupBarChart 默认isGroup = true
    4. GroupRoseChart 默认isGroup = true
    5. fix observable bug #1365 #1366
    Source code(tar.gz)
    Source code(zip)
  • v4.1.6(Feb 1, 2021)

    FIx

    1. RoseChart, GroupedRoseChart ,stackedRoseChart, 当label 兼容支持type 为inner和outer类型。
    2. Plot 宽度高度自适应,支持flex等外部容器的自适应、以及title和description高度自适应问题。
    3. 解决 external使用的时候 缺少regenerator-runtime 。
    Source code(tar.gz)
    Source code(zip)
  • v4.1.5(Jan 26, 2021)

  • v4.1.4(Jan 26, 2021)

    fix

    • plot 高度自适应,如果不指定高度,且容器height 100%的情况因精度计算会有像素误差导致图表不断变高。
    • g2Plot 2.x不支持玫瑰图RoseChart GroupedRoseChart StackedRoseChart的label.type设置为‘inner’ 和 ‘outer’,此版本bizcharts已兼容。
    Source code(tar.gz)
    Source code(zip)
  • v4.1.3(Jan 25, 2021)

    Fix

    • g2默认关闭了折线图和面积图的排序功能, time和timeCat类型的折线图和面积图默认排序。可通过<Line sortable={true | false} /> 开启或关闭。
    • plots 的高度自适应问题。复现demo https://bizcharts.alibaba-inc.com/gist/2F3uwX1qHjQ
    Source code(tar.gz)
    Source code(zip)
  • v4.1.1(Jan 21, 2021)

  • v4.1.0(Jan 21, 2021)

    为了满足各种不同人打包的方式,和更好的debug,将默认指向umd文件修改为lib/index.js的文件

    依赖升级

    [email protected]~4.1.7 [email protected]~2.3.x

    Feature:

    • 新增一种scale typep= 'linear-strict', 在双轴图的时候使用。能够使tick出来的刻度严格按照配置的tickCount的个数绘制。使得多个轴之间刻度对齐
    • 补充Html 类型的Annotation
    • g2Plot 有1.x 升级到 2.x,虽然bizcharts兼容了旧版g2Plot的API,但推荐使用新版的API,使用了旧版的api会有warning提示。

    Fix

    其中关于g2层bug详情请看 https://github.com/antvis/G2/releases/tag/4.1.0

    Source code(tar.gz)
    Source code(zip)
  • v4.0.16(Dec 1, 2020)

  • v4.0.15(Nov 16, 2020)

    依赖升级

    @antv/[email protected] @antv/[email protected] ##featrue 大量数据下数据对比开关,用户可自己控制不进行图表配置项对比,新增属性 notCompareData。

    fixed:

    修复 translate 平移失效。 修复 slider 初始化start和end失效问题。 #1269 修复 Tooltip 由于自定义tooltip更新数据重渲染过程触发的默认tooltip没有销毁,表现为偶现两个tooltip。#1267 修复 Tooltip triggerOn 优先级应该该与lock 逻辑。 scale 发生变化不重建图表,转场重渲染,表现为scale改变有默认图形切换过程而非现在直接更新。 之前使用g2的changeData修改图表数据导致绘制两次,所以做来性能优化

    风险:

    4.0.14 & 4.0.15两个版本依赖的g2版本中Axis轴事件失效。 4.0.13 如果使用到了坐标轴事件的亲,请暂时锁定版本。非常抱歉带来的不便。已经与g2团队一起修复,在4.1.0的版本中修复此问题。

    Source code(tar.gz)
    Source code(zip)
  • v4.0.14(Oct 14, 2020)

  • v4.0.13(Aug 14, 2020)

  • v4.0.12(Jul 30, 2020)

    4.0.12

    bugfix
    • Tooltip triggerOn="click" 点击后才展示。
    • 图表销毁和react销毁顺序问题导致,自定义tooltip 偶发removeChild 错误。
    feature
    • 新增 LineAdvance 的图形组件。
    • 图表联动,当前支持没有设置adjust的图表联动。详细见Tooltip linkage 属性文档。
    • Tooltip 点击后锁定位置。详见 Tooltip lock 属性文档。
    Source code(tar.gz)
    Source code(zip)
  • v4.0.11(Jul 28, 2020)

Owner
Alibaba
Alibaba Open Source
Alibaba
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
📊 Data visualization library for React based on D3

Data visualization library for React based on D3js REAVIZ is a modular chart component library that leverages React natively for rendering the compone

REAVIZ 740 Dec 31, 2022
Apache Superset is a Data Visualization and Data Exploration Platform

Superset A modern, enterprise-ready business intelligence web application. Why Superset? | Supported Databases | Installation and Configuration | Rele

The Apache Software Foundation 49.9k Dec 31, 2022
DataSphereStudio is a one stop data application development& management portal, covering scenarios including data exchange, desensitization/cleansing, analysis/mining, quality measurement, visualization, and task scheduling.

English | 中文 Introduction DataSphere Studio (DSS for short) is WeDataSphere, a big data platform of WeBank, a self-developed one-stop data application

WeBankFinTech 2.4k Jan 2, 2023
A data visualization framework combining React & D3

Semiotic is a data visualization framework combining React & D3 Interactive Documentation API Docs on the wiki Examples Installation npm i semiotic E

nteract 2.3k Dec 29, 2022
A React toolkit for graph visualization based on G6

Graphin A React toolkit for graph analysis based on G6 English | 简体中文 ✨ Features ?? Good-looking elements, standardized style configuration Graphin st

AntV team 823 Jan 7, 2023
Data visualization library for depicting quantities as animated liquid blobs

liquidity.js A data visualization library for depicting quantities as animated liquid blobs. For a demonstration of what the final product can look li

N Halloran 91 Sep 20, 2022
🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

Gio.js English | 中文 React Version: react-giojs Wechat minigame: wechat usage Gio.js is an open source library for web 3D globe data visualization buil

syt123450 1.6k Dec 29, 2022
An open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar.

Narrative Chart Introduction Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytellin

Narrative Chart 45 Nov 2, 2022
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.4k Jan 2, 2023
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
Location Intelligence & Data Visualization tool

What is CARTO? CARTO is an open, powerful, and intuitive platform for discovering and predicting the key insights underlying the location data in our

CARTO 2.6k Dec 31, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 6, 2023
Globe.GL - A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection

A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection. This library is a convenience wrap

Vasco Asturiano 1.3k Jan 3, 2023
Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

vis.js 1.2k Jan 3, 2023
Open source CSS framework for data visualization.

Charts.css Charts.css is an open source CSS framework for data visualization. Visualization help end-users understand data. Charts.css help frontend d

null 5.7k Jan 4, 2023
An All-in-one Visualization Framework for TiddlyWiki5 based on ECharts

ECharts for TiddlyWiki5 When I first started using TiddlyWiki a long time ago, I wanted TiddlyWiki to be able to visualize data. I wanted to generate

Tiddly Gittly 31 Dec 30, 2022
a graph visualization library using web workers and jQuery

arbor.js -------- Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, a

Christian Swinehart 2.6k Dec 19, 2022