数据可视化，第 1 部分: 使用 SVG 和 D3 可视化浏览指标

在这个由两部分组成的文章系列中，将会学习如何结合使用可缩放矢量图形 (SVG) 和开源 D3 JavaScript 库创建数据可视化. 形状、颜色和布局可能对从业务角度理解海量数据有很大的帮助. 一个示例场景演示了如何使用 SVG 和 D3 来根据社交媒体的浏览指标创建实用的图形.

语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ，是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况，所以问题往往表现为：我们应该使用哪种方案.

先让大家感受一下用SVG技术制作的简单动画：. 如果你看不到这个演示，说明你的浏览器不支持SVG，请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

       现在数据管理面临的一个关键性问题是如何将这些海量的来自于四面八方的非结构化数据可视化. 不管你从事于什么行业或者正在从事于哪一方面的研究，正将是你经常会触及的问题. 最近，埃里克•奥彭肖和JR里根做客了商务博客的“金融时代”专栏，讨论的主题为“大数据可视化是‘大数据’的关键机会”，分析了今天大数据的使用者们面临的可视化问题，以及公司为应对这个挑战而付诸的一些创新的方法.

当用户在圆上点击时，使用js创建一个元素：. // 更高效的计时器，类似于setTimeout，不会发生丢. 已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

今天我们继续来学习SVG动画方面的知识. 一听到动画效果，你可能就觉的头都打啦. 不要担心，SVG本身提供的动画属性非常容易使用，今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性：. 在上面的代码中，我们在元素里面添加了一个 的标签. 包含了下面的一些属性.

Visual.ly相关图片(图片来源：Techweb.com.cn). 　　【TechWeb报道】4月12日消息，新酷网站：可视化数据探索平台Visual.ly. 　　我们生活在数据收集和内容创作的时代. Visual.ly正是这个数据时代当产物，一个全新的可视化信息图形新平台. 信息图形将极大的刺激视觉表现，促进用户间相互学习、讨论.

在当前互联网，各种数据可视化图表层出不穷，本文尝试对数据可视化的方法进行归纳，整理成6步法. 一般的数据图表都可以拆分成最基本的两类元素: 所描述的事物及这个事物的数值，我们暂且将其分别定义为指标和指标值. 比如一个性别分布中，男性占比30%，女性占比70%，那么指标就是男性、女性，指标值对应为30%、70%.