首页 > 代码库 > 走进小作坊(二十三)----数据之美

走进小作坊(二十三)----数据之美

            这段时间,对数据可视化的研究从横向与纵向都有扩展。横向意义在于从更广阔的视角思考可视化方案,纵向意义在于深挖方案的具体实现。这本《数据之美》兼有横向与纵向内容。

   一、可视化文档

    在朋友帮助下,研读了一些层次数据可视化文档。文档构建如下:

技术分享

    此文档从层次数据定义开始讲起。捎带提及层次数据可视化挑战。挑战主要在于层次数据的展现与交互上,反映到微观上,分别是点和边的空间排布组织形式以及用户对相关部分观察分析交互的探索。文档大头在于对层次数据可视化方法的介绍,乐帝这里比较关注树图(treemap)构建。

    此文档从宏观上对层次数据可视化给了介绍,填充了乐帝在层次数据这方面理论知识的盲点。

    另一篇文档专门基于树图可视化的文档更偏向算法论述。但文中涉及树图可视化交互还是值得借鉴。

技术分享

   二、《数据之美》

   《数据之美》这本书与《鲜活的数据》出自同一个作者,内容侧重点互为补充。前者更适合设计师,后者更适合技术人员。《数据之美》各个部分,都从宏观讲述可视化构建流程。前面几部分比较微观。后面如了解数据、使可视化更清晰、为读者进行可视化,可以分别从选定可视化形式、可视化展现优化、检查可视化角度理解。其中涉及树图可视化展现与交互非常有参考价值:

技术分享

   三、D3 Treemap布局

   D3中treemap布局,可以非常方便的对传入数据进行树图数据结构构造,并且提供一些额外的优化展示方法,API构建如下图:

技术分享

   下面看看D3 treemap对数据结构的修改,原始数据对象:

技术分享

   经过treemap处理后的root数据结构(其中area属性为dx、dy乘积):

技术分享

   未经处理时,子对象数据结构:

技术分享

   经过treemap处理后,子对象数据结构:

技术分享

   乐帝在这里写了一个treemap实现树形结构简单例子:

   http://download.csdn.net/detail/yingyiledi/8352817

   例子效果图如下:

技术分享

    此布局与乐帝研究期许有些许出入,D3 treemap布局构建树图是通过计算子对象所占父对象比例填充到父对象中。在涉及父子对象有位置关系或者子对象不是100%填充父对象的场景中,并不能满足需求。但treemap计算比例关系还是有价值的。

   四、其他treemap案例:

    http://jstreemap.com/

    http://www.cs.umd.edu/hcil/treemap/

   http://blog.csdn.net/dragonszy/article/details/7931635


走进小作坊(二十三)----数据之美