这个由两部分组成的文章系列将演示有助于从数据中提取有业务价值的信息的可视化技术，本文是这个系列的第一部分。您将看到如何使用可缩放矢量图形 (SVG) 和开源 D3 ">JavaScript 库创建可通过浏览器查看的可视化表示，通过形状和颜色来传达信息。我将通过一些可视化浏览指标（与社交媒体使用相关）的示例来演示这些技术。第 1 部分概述 了 SVG 和 D3 如何协同工作，还提供了一些基本示例。第 2 部分 将会更深入地剖析这个强大的开放标准技术组合的可视化功能。
分析社交媒体指标
公司理解客户行为的一种创造性方式是，通过社交媒体提出想法，并让潜在客户参与到交互式讨论中。社交媒体上的互动反映了双向的人际互动：要理解人们的好恶，您必须聆听他们在说什么，就像您希望与积极主动的人互动一样。
以一家家庭装饰公司为假设场景，该公司以博客、视频、Facebook 页面和论坛形式发布公开内容。这些内容通过社交媒体资源展示了公司的想法，并尝试发起讨论和其他形式的用户互动。这些内容迎合各个客户的口味和偏好，帮助他们从一个社交资源导航到另一个。为了判断不断变化的客户趋势并提出新方法和新设计，公司希望从三个方面分析浏览数据：
流行度，由每个社交资源的 查看次数表示 参与该资源上的 互动的用户数量 用户从一个资源 导航到另一个资源的方向
表 1、2和 3 分别显示了三周内用户查看、用户互动和导航次数。请注意，这些表使用了彩色名称来表示公司使用的社交媒体资源类型（比如博客和 Facebook 页面）。
表 1 显示了每个资源的用户查看次数：
表 1. 每个社交资源的用户查看次数
社交资源 蓝色 金色 绿色 红色 紫红色 第 1 周 7057 7483 3749 3846 4598 第 2 周 2371 7397 4589 2861 8249 第 3 周 5972 5672 9152 9725 8983
在 表 1中可以看到，蓝色资源在第 1 周被查看了 7,057 次，金色资源是这一周被查看次数最多的资源。
表 2 显示了用户互动数据：
表 2. 每个社交资源上互动的用户数量
社交资源 蓝色 金色 绿色 红色 紫红色 第 1 周 2052 2089 1586 1426 2632 第 2 周 2071 2190 7214 3782 2721 第 3 周 3076 3190 4532 3825 4831
从 表 2中可以看到，第 1 周在蓝色资源上有 2,052 名用户参与了互动，在这一周紫红色资源上的用户互动次数最高。
表 3 显示了从蓝色资源导航到其他资源的用户数量：
表 3. 蓝色社交资源的导航数据
社交资源 蓝色到金色 蓝色到绿色 蓝色到红色 蓝色到紫红色 第 1 周 3057 3483 8749 8456 第 2 周 2371 7397 4589 2861 第 3 周 5972 5672 9152 9725
从 表 3可以看到，在第 1 周有 3,057 名用户在访问蓝色资源后导航到了金色资源，而且红色资源收到了来自蓝色资源的最多观众。
浏览数据的可视化
可视内容提供了一种比数字表格更容易、更快捷的方式来解释大数据量。可通过多种方式以图形方式表示表 1、2和 3中的数据。例如，图 1 就是一种显示 表 1中的第 1 周数据的简单方式：
图 1. 用圆圈表示的每种社交资源在第 1 周的查看次数
图 1 将每种资源的查看次数表示为一个圆圈。圆圈的相对大小与它们表示的次数成正比，所以查看最多的资源（金色）由最大的圆圈表示。每个圆圈还显示了每种资源第 1 周获得的实际查看次数。
图 2 是 图 1的一种细微变形，使用了一种不同的圆圈布局：
图 2. 以稍微不同的圆圈布局显示的第 1 周查看次数
每种资源的17891.html">流行度只是公司希望分析的一个数据维度。图 3 同时显示了第 1 周每种资源的查看次数和希望在该资源上互动的用户数量 —一种可视化表示中包含两种维度：
图 3. 嵌套的圆圈表示了第 1 周的用户查看次数和互动的用户数量
在 图 3 中，外圈表示资源的总查看次数，内圈表示在该资源上互动的用户数量。我还在每个圆圈中放入了数字来表示实际的查看和互动数据。
图 1、图 2和 图 3 显示了组合颜色、形状和实际数字来表示数据的简单方式。通过查看 图 3，您可看到金色资源在第 1 周吸引了最多用户查看，而紫红色资源上的互动最多。