网页制作与设计

1、 Web可视化工具可视化工具 为什么需要为什么需要D3 D3是什么是什么 D3与与Processing的比较的比较 总结总结 D3的设计的设计 01：为什么需要D3 硬件产品和交互设备的多样化使得可视化设计工具面临新的技术难题。理想 情况下，可视化工具需要支持从桌面应用到web应用以及多触点移动设备， 同时还需要紧随硬件发展的趋势，如多核计算以及特殊的图形硬件。Protovis 提供了JavaScript和Java的实现版本支持异构平台，D3是Protovis的后续产品 同样具备跨平台的特性。D3与Protovis最大的差异在于用户能够更直接地使 用SVG，比Protovis更灵活。同时D3的

2、性能要胜于Protovis，特别是在动画方 面，主要原因在于D3只有变化的属性才被更新而不是重新绘制整个场景。目 前Protovis已停止开发，全面转向D3。 02：D3是什么 Web上的交互式可视化通常需要同时使用多项技术，HTML用于显示页面内容，CSS用 于设计样式，JavaScript用于交互，SVG用于绘制。值得高兴的是，DOM以层次结构 展现页面内容，使得这些技术能够相互协作。然而目前的可视化工具对DOM进行了过 多自主形式的封装，导致这些工具在可访问性（accessibility, 学习）及表现多样性 （expressiveness, 可视化呈现的多样性）都存在不足。D3在综合考

3、虑表现多样性、效 率和可访问性的基础上提出的。 D3并没有引入新的图形化语法，而只是解决了另一个不同的更小得问题：有效地操作 基于数据的文档。D3核心的共献在与设计了一个可视化的“内核”，类似于jQuery、 CSS及XSLT这样的文档转换器(Document Transformer)。低层次上，D3的文档模型直 接操作图形原语，这一点类似于Processing和Raphel。而在高层抽象上，D3包含了 一系列内核之上的辅助模块，这些模块受之前的可视化系统影响而产生。 D3使用了selection这一概念：用谓词标识一个元素的集合，然后赋予一系列的操作来 改变被选的元素的值。这一概念起源于CS

4、S，而jQuery提供了更灵活的控制接口。然 而，在数据可视化时，通常需要添加或删除一些元素(Element)，然而jQuery缺乏这种 动态改变的机制。基于XML的XSLT虽然能够允许用户按照定义好的模板填充数据并生 成HTML，但是没有高级的可视化抽象，无法灵活地处理繁杂的数学可视化任务。 Protovis和D3都是基于宿主语言（JavaScript），采用声明式语言（DSL）描述式可视 化设计。开发者告诉DSL需要什么样的计算结果，而不需要知道结果是如何计算的。 HTML/CSS以及SQL都是DSL的典型代表。用于可视化的声明式语言也有很多，如 Grammar of Graphics,

5、ggplot2, HiVE, ViaQL以及Ploaris。这些语言都提供了高级抽象 以及快速分析，但是并不提供细粒度的图形及交互式控制。 03：D3的设计 D3的原子操作是selection：从当前文档中提取元素（Element）集合。操作符 （Operator）作用于selection之上，用于修改元素内容。数据联合（Data Joins）将输 入数据绑定到元素，使得操作符能够操纵相关的数据。这一过程产生了进入（enter） 及退出（exit）两个子选择，分别用于创建和销毁元素与数据之间的对应关系。动画式 的转换（transitions）可以对属性及样式进行插值处理，让它们变化更平滑。事件

6、处理 器（Event handlers）则用于对用户的输入产生响应并可以交互。大量的辅助模块 （Modules），如布局、缩放简化了一些常用的可视化操作。 04：D3与Processing的比较 1）Pixel vs. Vector Processing像HTML5 Canvas一样，是基于像素的图形库；D3使用SVG，是基于矢量 的。一些的图形化的效果如motion bur and glow，如果用基于像素的库实现起来比较 容易（可以组合多帧或者做卷积）。SVG用filter也可以实现，但是不如pixel-based库 那么灵活。而基于矢量的库则在缩放上有自身的优势。 2）Immediate

7、 vs. Retained Processing由于是在pixel buffer中绘制，最终所有绘制的内容都变成pixel buffer中的元 素。而retained-mode系统则维护一个可见元素的场景图（scenegraph）。它的好处在 于你可以控制场景，改变了场景中的元素，场景跟着改变，而无须像pixel buffer那样管 理dirty region然后再redraw。基于这一点，后者能获得比较好的性能。但是对于很复 杂的场景，维护场景自身也会带来一定的开销。 另外，对于动画，往场景中添加交互操作更容易。用HTML5 Canvas，需要用 pointInPath手工做hit test

8、ing，用SVG只需要向HTML语句添加event listener即可。甚 至可以用CSS（hover, anchor tags, etc）做简单的交互。 3）Proprietary vs. Standard Processing虽然具有一个非常好用的API，但是远不如HTML流行。D3建立在标准 HTML之上，因此可以与其他技术进行整合，例如使用外部的stylesheets做样式，甚至 可以使用CSS3作动画。也可以在服务器上生成HTML，然后使用D3做数据变换在客户 端上显示。或者与其他的JavaScript工具一起使用，如jQuery。而Processing则是一个 相对封闭的系统。

9、4）Imperative vs. Declarative Processing本质上是一种C/C+风格的编程语言，使用函数和for循环等等，通常被称 为“Imperative”编程。D3是声明式的，虽然不像CSS那样纯粹的声明式语法，但已经 去除了大部分的控制语句。 05：总结 D3在web可视化上确实下了很多功夫，尤其是动画上编程简单效果 非常棒，而且D3的例子中实现了常见的可视化方法，很多可以直接拿 来使用。但是受浏览器本身的限制，D3仍然存在一些不足，特别是处 理数据的规模还很小，尽管Jeff Heer还开发了与之相配合的JS数据库 来支持D3处理更大的数据，但是效果并不佳。在交互上，D

10、3也还仍 有很多工作需要继续。希望D3的发展越来越好，成为web可视化的标 准库。 Web可视化效果的介绍 这个信息时代更多地让人觉得它是个信息过剩的时代。铺天盖地般的 信息令人目不暇接，很多未经加工的原始信息只有使用某种方法找出 其中的规律才有价值。 数据可视化跟用语言描述一样，都可能“撒谎”、 误导人，甚至扭曲事实。我们要把把数据变成生动的图表就能帮我们 从一个全新的角度来看懂这个世界，从中揭示出原先隐藏的一些模式 和趋势。运用得当，数据可视化是可以开口讲故事的。 如果从字面上来理解，可视化就是把信息映射为可见图形的过程。我 们必须总结出一些规则，解读数据，同时把数据变成有形的东西。 静态

11、可视化展示的只是预先合成好的数据“视图”，而要展示相同信息 的不同侧面， 往往需要多个静态视图。在静态视图中，数据的维度同 样也是受限的，因为所有可视化的要素必须同时展示在同一个表面上。 要在静态视图中表现多维数据的难度势比登天。固定不变的图像什么 时候最合适？除非像印刷或打印时，不需要也没有必要弄一堆视图。 然而，动态的响应式的图形可以激发人们探索数据的欲望。 1996 年，马里兰大学的Ben Shneiderman 率先在 “Visual Information-Seeking Mantra”中提出“先给出一 个大小合适、筛选得当的概要，然后根据需要展示细节”， 由此开始，大多数交互可视化

12、工具的基本功能就发生了变 化。 看不见的可视化不叫可视化。生成了可视化作品，把它展 示给别人至关重要，而在Web 上发布是向全世界展示的 最快捷方式。采用标准的Web 技术，意味着只要是使用 较新浏览器的人都能看到和体验你的成果，而跟他们使用 的操作系统（Windows、Mac、Linux）和设备（笔记本、 台式机、智能手机、平板电脑）无关。D3 是用JavaScript 写出来的，所以学习它通常意味着要理解很多JavaScript 代码。对我们很多搞数据的人而言，D3 是他们学习 JavaScript（乃至通常所说Web 开发）的起点。 可视化效果图 SVG动画圆角矩形 每个矩形相关联的数据中心的位置和旋转角度。每一秒的动画，矩形的漂移对鼠标的 位置和旋转稍。 圆形的布局（raindrops） OMG颗粒 鼠标移动产生图案 鱼眼镜头畸变 在上面的图中,鱼眼畸变放大鼠标周围的局部区域,而更大的图形上下文影响。本地化、 循环变形的性质通过应用它可以清楚的看到一个统一的网格: 笛卡尔变形 圆形鱼眼只是许多可能失真的一项功能。两个循环变形的缺点,它压缩(而不是放大)附 近地区的圆的周长,并要求准确曲面网格线显示失真。后者使得它不适合可视化定量位 置编码,如散点图。 Sarkar和棕色因此