linhuiw / blog

前端开发思考

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Charticulator 调研

linhuiw opened this issue · comments

交互式构建图表,优势在于布局和数据绑定

优势

定制的图表更具表现力,可以根据传递的数据进行细节的设计

传统工具的问题:

  1. 手动设置数据和属性的映射,比较低效;
  2. 可以用可视化的库编写代码实现,但是用户需要有较高的编程技能;
  3. 可视化构建工具,提供的布局方式有限或者提供的布局构建的交互不够方便。

设计原则

Charticulator的设计遵从如下的原则:

将布局作为有意的设计选择
使用部分规约(partial specification)构建布局
平衡直接操作和通过面板设置的交互方式

Charticulator的约束包括多个层次

图表层次的约束:绘图区块、图例、参考线等的位置约束关系
绘图区块中的约束:不同图标之间的位置约束关系
图标层次的约束:图标中不同元素之间的约束关系
标记内在的约束关系:如对于长方形,它的左右坐标、中心的横坐标以及宽度这4个变量,只有2个是自由变量

连接建立

  • 数据序列
  • 多个绘图区块对应的相同数据项之间
  • 额外指定的边数据

image

元素组成

image

图形语法的概念透出

  • Layout Composition
    image

  • Sub-layouts
    image

  • Coordinate Systems 坐标系统
    image

想法

  • 独立的服务,类似于 chartMaker 的方式
  • 核心在于使用数据绑定的方式,丰富图表的丰富度。
  • 不是使用预设的图表,而是针对图形得数据绑定,预设的图表表现力不足