antvis / ava Goto Github PK
View Code? Open in Web Editor NEW🤖 A framework for automated visual analytics.
Home Page: https://ava.antv.antgroup.com/
License: MIT License
🤖 A framework for automated visual analytics.
Home Page: https://ava.antv.antgroup.com/
License: MIT License
Cannot find module '../../../../datawizard/transform' from 'node_modules/@antv/chart-advisor/lib/insight/insightWorkers/monotonicity.js'
引用方式需要修改一下,datawizard
下也是 npm
包,导致实际发布之后文件目录发生改变,应当为以下引用方式
import { RowData, autoTransform, AggregationType } from '@antv/dw-transform';
The current chart recommending pipeline is data > G2Plot
.
The whole process is in one huge function analyze()
.
For flexibility and expansibility, the pipeline should be splited divided into smaller tubes, like:
data > data props > chart schema(specification) > library translator > chart code
There could be api for each step to enable different usages.
Like https://github.com/antvis/AVA/blob/master/packages/chart-advisor/src/util.ts#L29, it should be StackedArea
in G2Plot 1.0.
AVA推荐是基于图表知识库的,但是其能够推荐出的图表目前是没有覆盖知识库中所有图表类型的吧?例如力导向图是不是就没有办法推荐。
那这个情况下,不知道在哪里可以找到AVA当前能够推荐的所有图表的列表。
另外AVA目前是都基于G2plot进行推荐对吧,与G2的结合是否有方法。
我是可视化产品经理,问题有不专业的地方请见谅!
What is SoC2020: #69
AVA 是一套智能可视化解决方案,目前已经初步解决了从给定数据字段智能推荐和生成单个图表的问题,现阶段一个重要的目标是从多维数据集中自动识别出含有“洞察”的字段子集。比如,输入 20 列数据,能发现第 1、2 列存在相关关系;第 6 列的可选值中存在一个绝大占比的值;第 2、8 列形成的时序关系中存在几个异常值,等等。
我们为这个任务提供了一个简单的结构:示例。结构中对每一种洞察定义了一个 InsightWorker,调用这个 InsightWorker 的特定方法可以检索出数据集中所有包含这种洞察类型的字段组合子集
AVA is a framework for automated and augmented visual analytics. At present, the problem of recommendation and generation of a single chart from given data fields has been initially solved. An important goal at this stage is to automatically identify subsets of fields that containing "insights" from a multi-dimensional dataset. The insights include correlation, majority, outliers, etc.
We provide a demo structure for this task. An InsightWorker is defined for each type of insight, and a specific method of this InsightWorker can retrieve subsets of all fields that contain this type of insight.
参与研发部分 InsightWorkers,使它们能够服务于 AVA 的洞察识别功能:
Participate in the development of some InsightWorkers so that they can serve the insight recognition.
除了使用拷贝配置按钮获取配置还有别的方法可以直接在代码里获取配置吗, 因为需求并不需要用户拷贝配置 而是系统自己获取并渲染
import React, { useEffect, useRef } from 'react';
import { autoChart } from '@antv/chart-advisor';
/**
* https://www.npmjs.com/package/@antv/chart-advisor
*
* https://observablehq.com/@jiazhewang/autochart-automatic-chart-dev-library-by-antv
*/
const AChart = ({ option: { data = [], ...option }, ...props }) => {
const instance = useRef(null);
useEffect(() => {
if (!instance) {
return;
}
autoChart(instance.current, data, option);
}, [option, data]);
return <div ref={instance} {...props} />;
};
export default function() {
const option = {
data: [
{ 区域: 'East', 销量: 4684.44 },
{ 区域: 'North', 销量: 4137.09 },
{ 区域: 'NorthEast', 销量: 2681.46 },
{ 区域: 'SouthEast', 销量: 2447.01 },
{ 区域: 'SouthWest', 销量: 818.59 },
{ 区域: 'NorthWest', 销量: 1303.5 },
],
purpose: 'Comparison',
toolbar: 'true',
title: '某数据对比图',
description: '统计区间:2019-2010',
theme: 'light',
};
const chartStyle = { width: 800, height: 600 };
return <AChart option={option} style={chartStyle} />;
}
AVA/packages/datawizard/transform/src/smartMock.ts
Lines 7 to 12 in ac692db
todo
comment in ac692db. It's been assigned to @jiazhewang because they committed the code.大佬 假如想实现自定义内容
比如: 坐标轴X、Y的文本自定义 (label, value) 这种 我想显示成 value% 这种怎么配置
自定义图形显示颜色 根据value值的不同,显示自定义的颜色能否实现
tooltip的内容能否自定义
这些在G2的使用中 都可以通过api就行修改,用autoChart能否在configs种实现自定义呢
请问下,几时有正式版?对其他其他插件图表是否有智能识别?
The BI system generally have data model detail and the field meta info is similar to dataProps, should we support user to input the field meta to overwrite or replace dataProps?
如题,当我按照文档增加了一个图表类型后,当我用dataPropsToAdvices时,并没有获得对应的图表类型
const data = [{ 单价: 345333 }];
单价字段被认为成时间字段,但是如果多增加几列就没有问题了。
打算支持vue吗
疑惑:
// 如onPlotClick等,尝试在导出的configs里配置,但是会报错
events:{
onPlotClick:(ev)=>{console.log(ev)}
}
PS:在使用了AVA后确实是觉得可以更快速的生成配置参数,然后结合g2plot的文档再进行细化定制,效率感人。但是如果无法绑定事件,以及提供一些额外的参数配置入口(比如需要做图表和表格的切换功能,可能就需要自定义一个表格组件在toolbar点击切换的时候用表格覆盖当前图表,制造切换的效果)最后还是会因为需求覆盖率的问题不得不放弃AVA。
最近使用的时候,采用按照规则逐步解析为G2Plot配置的方法,我将G2Plot里的雷达图数据进行转换后advices里并没有雷达图选项,查看了dataPropsToAdvices方法的源码,但还是不明白对应的softScore和hardScore的计算。希望各位可以帮小弟解惑
Chart Knowledge Base (CKB) 是一个提供图表经验的知识库,它的形式基于 JSON。CKB 希望能解决目前可视化研究环境(特别是中文环境)中概念、术语不统一的问题。降低领域内研究和讨论的沟通成本。我们基于数据可视化社区来共建一个图表知识库。每个参与者都可以提出自己对于图表的认识。我们会一起讨论来制定图表的名称、定义、分类和各种属性。CKB 的关键意义在于,他是智能图表推荐的基石。
为了便于更多不熟悉代码开发和 git 工具的设计师、分析师、行业相关人员可以参与到 CKB 的共建,我们需要一个网页来展示 CKB 的 内容,并支持用户直接编辑和提交相关字段。
开发一个 web 的 Chart Knowledge Base 文档网页系统,包含如下功能:
Welcome to the open source world!If you haven't planned how to spend this summer, come to the Alibaba Summer of Code and coding with us! 💻
Alibaba Summer of Code is a global program focused on engaging students directly into open source software development. Under the guidance of the mentor in the Alibaba open source project, students experience the software development in the real world.Alibaba Summer of code will begin between May 25th and September 5th. Students can use the summer time to participate in the open source project and work with the core members of the project.
On this exclusive developer journey, students will have the opportunity to:
Jiazhe (Neo) Wang
GitHub ID:neoddish
Alibaba Data-Tech Expert, AntV Developer
Step 1. You can click on these links to apply directly:
Step 2. Full list of Alibaba Summer of Code Projects
以下链接将与 5月25日 上线
These links would be available on May 25th.
Email Address: [email protected]
When using ChartAdvisor's autoChart()
, we will always encounter situations where no chart type could be recommended. In that case, we should at least show some feedback in the target container.
An Example from AntV website:
A related issue & case: Issue #8
const region_sales = [
{ btag: 'fav',count: 997815},
{ btag: 'pv', count: 1135028},
{ btag: 'buy',count: 5388715},
];
就是没法画出图形的,但是
const region_sales = [
{ btag: 'fav',count: 997815},
{ btag: 'pv', count: 1135028},
{ btag: 'buy',count: 5388715},
{ btag: 'buy',count: 0},
];
就是可以画出图形的
There is only a mapping from chart specification to G2Plot. We will need one for G2.
目前如果设置了configs,advisor的标题无法生效
import { autoChart, AutoChartOptions } from '@antv/chart-advisor';
export interface IAChart extends AutoChartOptions {
data: any[];
[key: string]: any;
}
const config = {
configs: {
title: { visible: true, text: '百分比堆叠条形图(G2 Plot配置)' },
description: { visible: true, text: '一个简单的百分比堆叠条形图(G2 Plot配置)' },
legend: { flipPage: false },
xAxis: { label: { visible: true }, title: { visible: true, text: '月份' } },
yAxis: { title: { text: '数值' } },
label: { position: 'right' },
xField: 'x',
yField: 'y',
stackField: 'serie',
smooth: true,
point: { visible: true },
width: 800,
height: 600,
},
type: 'Area',
};
const option: IAChart = {
data,
toolbar: true,
title: '百分比堆叠条形图(advisor配置)',
description: '一个简单的百分比堆叠条形图(advisor配置)',
theme: 'light',
config,
development: true,
preferences: {
canvasLayout: 'landscape',
},
};
如果把G2 Plot中的title配置信息删除,保留advisor的title配置,渲染结果不含标题;
AVA/packages/chart-advisor/src/advisor.ts
Line 85 in cf1efe6
just like my data size: 140608...
用g2plotRender渲染图表时,如何配置libConfig,才可以让图表以指定颜色显示。
我的代码:
export const colors10 = ['#4DBFE8', '#F9A741', '#3B7ECD', '#E0725F', '#ECDEDE', '#07817C', '#1161C8', '#FFE581', '#5ABEF9', '#D87E49',];
显示效果:
我的问题:
我设置了同时设置了color10和defaultColor,在多条折线图时,color10的设置生效,但是在单条折线图(或者单条柱形图)时,defaultColor没有生效,因为折线(或柱形)并没有按照color10[0]的颜色进行展现。
hi
我写了一个使用autochart的demo,想实现切换图标数据的功能。
当时点击‘data1’按钮第一次切换数据时,是可以的
当时点击‘data2’按钮第二次切换数据时,控制台报错
调试代码发现,当第一次切换数据时,从父节点中移除了noDataLayer,然后在构建图表时由于这句代码,没有将noDataLayer重新添加至container节点下。
我当前的临时绕过方法:在报错行后(noDataLayer从父节点移除后),增加 this.noDataLayer = undefined
想请问下
1、这是一个bug吗,还是说是我切换数据的方式不正确?
2、我的这种临时绕过方法,是否是合理的,是否会影响antochart内部的 “缓存”,或者引起其他问题?
期待回复。谢谢。
重现步骤:
打开demo,依次点击data1 、data2按钮,当点击data2按钮时报错
Now all defined charts in BarChart family and ColumnChart family only receive nominal data as classification dimension, would it possible to use ordinal data as well?
As wiki mentioned:
Ordinal data is a categorical, statistical data type where the variables have natural, ordered categories. ...
The ordinal scale is distinguished from the nominal scale by having a ranking.
Maybe it is ok to have ordinal data in bar/column charts?
The isOrdinal
function just tell you a column is ordinal. But users may want to sort the column after knowing that.
A corresponding sort function is required.
Some texts in autoChart and other features are still Chinese only. May need some i18n
目前我们的图表知识库(CKB)还有很多信息不完备,急需社区合力讨论、补充。
At present, our Chart Knowledge Base still has a lot of incomplete information, which urgently needs the community to discuss and supplement together.
关于为什么要做 CKB,这篇文章进行了解释:《AVA/CKB:一次性解决图表命名问题》
This article explains why CKB is required: "AVA/CKB: Solving the Chart Naming Problem at One Time" (Sorry, only the Chinese version is available)
请参考我们的 CKB 贡献指南,里面有操作细节,感谢!
Please refer to our CKB contribution guide, which has operational details, thanks!
Range Column (区间柱状图)
Range Bar (区间条形图)
Bullet (子弹图)
包不包括拟物图表 (水波图、仪表盘)
Hi,
I wanted to list the thumbnails and I notice that the Heatmap
and Histogram
chart thumbnails are not available. The URLs I get from the package:
http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/6fxTNNgLmb/Heatmap.svg
http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/VfwdcWnr0u/Histogram.svg
目前开发模式下的配置面板链接到 https://render.alipay.com/p/s/autoChart/config-panel.html?type=Area&cancopydata=false 的独立html页面,能否单独开源出来用户自由部署。
目前的方案有两个问题:
1.该页面需要加载antd.js moment.js以及react.development.js等文件,载入时间较长,表现为打开时卡顿;
2.不方便内网部署。
另外:参数中的cancopydata能否开发出来,默认为true;
https://render.alipay.com/p/s/autoChart/config-panel.html?type=Bubble&cancopydata=false
请问这部分的代码,在哪里维护?
AVA/packages/chart-advisor/src/advisor.ts
Lines 428 to 433 in 443fa9b
todo
comment in 443fa9b. It's been assigned to @jiazhewang because they committed the code.hi,team:
did we have any plan to support a general backend, and support multi pop OLAP / OLTP databases?
columns: [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
],
data: [
{
key: '1',
name: 'ccc',
age: 32,
address: 'aaa',
},
{
key: '2',
name: 'ddd',
age: 42,
address: 'aaa',
},
],
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.