d3中⽂案例_D3js初探及数据可视化案例设计实战-web开发编辑推荐:
本⽂来⾃cnblogs，本⽂主要介绍了D3js⼀个可视化⼯具，并且以实际案例讲解了数据可视化的设计、⽅法、过程和结果等相关内容。
摘要：本⽂以本⼈⽬前所做项⽬为基础，从设计的⾓度探讨数据可视化的设计的⽅法、过程和结果，起抛砖引⽟之效。在技术⽅案上，我们采⽤通⽤web架构和d3js作为主要技术⼿段；考虑到项⽬需求，这⾥所做的可视化案例都是数据演⽰⼯具，不是数据探索⼯具。其中所⽤截图，并⾮最终效果图。
⼀． 基础说明
1. 基础技术
使⽤D3js绘制图形
图1，五彩斑斓的d3js
D3js是应⽤在web开发上的开源JS组件库，是⼀个数据可视化⼯具。D3的全称是Data-Driven
注意：
a) SVG技术不能兼容IE8及更低版本的IE浏览器。如果想要IE8使⽤d3，请⽤r2d3.js(⼀个结合了
Raphael.js的扩展库)。但是考虑到即使如此，IE7依然⽆法兼容，不如放弃对⼆者的兼容性考虑。如果实在要兼容IE，要么⽤VML(微软出品的绘图⼯具，缺点是复杂)，要么预渲染成位图(需要放弃⼀些交互效果)。
b) SVG在浏览器端实现的⽅法是对每⼀个点和边新建⼀个对象，虽然这样做令我们操作它变得更容易(我们可以直接操作dom，代码像jquery⼀样简洁)，但是节点数量如果过多就会消耗太多的系统资源。例如论坛⾥⼀个朋友使⽤d3绘制超过12000个节点的图，直接导致每个试图打开它的浏览器都崩溃了。这个时候如果不愿意做简化那么应该试试canvas绘图。
2. 制作流程
D3js只是⼀个可视化⼯具。就像学会了photoshop⼯具不等于能画出好看的CG⼀样，光会⽤D3js的API，依然不能保证可以设计出优秀的可视化作品。好在d3js已经提供了很多经典案例以供学习。初学D3js的最好⽅法还是以案例为切⼊点，通过修改开源的案例来快速实现想要的效果。如此积累到⼀定程度便可主动设计新案例。可以说跟从临摹开始的美术学习完全⼀样，设计制作可视化案例的基本流程是：
1) 分析需求——确认重点表现对象
2) 分析数据来源——确认数据维度和特征
3) 寻参考案例——依照需求和数据来源寻类似案例
4) 设计图形——纯设计⾓度制作PSD效果图
5) 使⽤静态数据制作源程序——⽣成静态的⽹页代码
6) 数据预处理——对不同的数据格式和来源进⾏过滤
7) 使⽤动态数据测试和修改源程序——⽣成可⽤的程序
8) 迭代
lab的⽂章，描述了“基因组导航系统”数据可视化案例的制作过程，很好的反映了以上制作流程。
当然，在具体操作时，肯定要涉及数据格式变换、数据预处理等内容。我们通常约定数据格式为json，或者csv.但是本⽂只从设计的⾓度探讨数据可视化的设计之道，起抛砖引⽟之效，不讨论数据获取，数据预处理等细节。
3. 设计标准
从使⽤场景上来说，数据可视化分为两类，⼀类是数据表现⼯具，⽤于把设计师所知道的数据⽤⼈们更易理解的⽅式表达出来；⼀类是数据探索⼯具，为了帮助未知事物的研究。考虑到项⽬需求，这⾥的案例都是数据表现⼯具。从技术⾓度上说，d3js也最适合做数据表现⼯具。
⼀个合格的可视化案例通常需要包含四个⽅⾯：informative(饱含信息的)，efficient(⾼效的)、Novel(新颖的)、Aesthetic(有美感的)。
以上四者中，informative最为重要，提供获取信息的途径是可视化成功与否的关键；Efficient次之，必须尽可能直截了当地获取信息，同时不牺牲任何必要的复杂性；Aesthetic是以上⼆者的适当补充，⽽novel通常只是Effective
information的副产品。
⼤量平庸的可视化设计完全基于标准格式，如bar chart(条形图)、pie chart(饼图)、line
chart(线图)、bubble chart(散点图或⽓泡图)等。虽然这些图提供了便捷⽅式并且具有⾃明性，但是其标准性和普遍性意味着⽆法达到新颖性。
故⽽在理想状态下，应尽量采⽤新颖、⾼效的设计⽅案，突出结论及提⾼视觉魅⼒；即使采⽤标准图形，也要有⾜够的交互特性使之与众不同。
4. 相关资源
⼆． 实际案例
案例⼀：区域报修热点图
1. 需求分析
系统中需要统计每个区域的报修次数，并以图形化的⽅式显⽰出来。地区⼜可以细分为楼宇和房间，每个部分可以分别统计个数也可以汇总出总数。其中重点在于，同层次下不同地区之间报修数量的对⽐。
2. 数据分析
需要表现的数据维度：2维，地区和报修数量。
a) 地区，特点是多层次，地区可以分为区域、楼宇、房间，呈树形包含关系；底层节点的数量可能会⽐较多，不可预估。但观察者注重的是上层节点，偶尔会关注底层节点。
b) 报修数量，特点是数字，根节点的值通过叶节点计算。
3. 寻参考案例
4. 制作统计图
在经过对⽐后，我个⼈认为Circle Packing或者bubble chart可以⽐较直观地表现数值信息和不同区域之间的对⽐关系。并且Circle
Packing还有⼀个优点，就是可以有效地屏蔽多余的数据，⼀开始只展⽰上层节点的关系，当⽤户有需要的时候再点击对应的圆圈展⽰下层节点——这是显⽰多级层次数据的必要⼿段。现在做可视化离不开交互，故⽽这⾥我选择⼀个带有交互的案例作为参考模版。它可以很有效地表现出双维度的层次、对⽐关系。
图2，仿照Circle Packing案例我们制作的初始统计
5. 维度增加
原始的统计只有区域、报修数量两个维度(虽然区域这个维度是多层次的)。为了增强功能，我们需要增加⼀个重要的维度——时间。如此整个可视化案例就可以反映时变特征，⽅便⽤户追寻历史信息。可以说在很多领域时变特征分析是数据分析和可视化⽅⾯表现的重点。
图3，开始先⽤下拉框调试，以后改成时间轴
更进⼀步，我们希望把报修类型维度也加⼊图中。报修类型种类⼀般在10个以内。将这个维度加⼊图形，如果反映出某个地区常出现的报修类型，那么对于管理员此类信息是⾮常有⽤的。
在表现上，为了避免信息过载，这⼀类附加信息我们通常使⽤tip、附加图形的⽅式表⽰。例如图4表现报修类型的饼图和原图结合的⽅式，这种多图结合的⽅式对⽐效果表达得好，缺点是实现难度⼤，设计难度⼤，并且可能会给⽤户造成误解，故⽽必要时需要增加⽂字提⽰。图5使⽤了tips与原图结合的⽅式。Tips是最常⽤的增加维度的⽅法，但是和原图耦合度不⾼，产⽣的对⽐效果较差，优点是容易实现，⽤户理解障碍也⼩。
图4，饼图与原图结合的⽅式呈现更多维度信息
原创效果
图5：tips与原图结合的⽅式呈现更多维度的信息
使⽤tips的参考案例有：
6. 总结
⾄此，这个统计图中已经包含了4个维度(地区、报修类型、时间、报修数量)，⼀个层次关系(地区的包含关系)，两种直接的对⽐关系(区域之间报修数量的关系、
区域内报修类型之间的数量关系)，⼀种间接的对⽐关系(不同区域的报修类型的数量关系)。可以说⾜够强⼤了。为了向参考过的案例表达敬意，我称其为zooming
Circle Packing with tips and timeline统计图。
我们可以总结：单维度上带有层次关系并且总维度较少的统计数据 和 强调单维度的对⽐关系的需求，适合此zooming
Circle Packing统计图显⽰。这种zooming Circle Packing图，在展⽰强烈对⽐关系时⾮常有效，但是确实不适合太多维度的数据。如果要增加新的维度，那么我们往往只能采⽤上述的办法，增加新的下拉列表、tips、时间轴等与原图耦合度不⾼的部件来显⽰。这种部件越多，⽤户理解起来也会越困难。增加⼀个两个倒还可以接受，如果维度过多，应该试试tree
map等统计图(不过那也更难理解了)，或者拆开为多图显⽰。
案例⼆：维修组⼯作量对⽐图
1. 需求分析：
项⽬中还有⼀个需求。就是统计每个⽉维修组⼯作量。⼀个维修组可能有多个⼈，每个组、每个⼈的⼯
作量都要统计并量化的表⽰出来。维修组和组员的数量⼀般不会很多。需求重点：反映组之间的⼯作量对⽐，若能同时反映每个⼈的⼯作量对⽐则更好。
2. 数据分析：
数据维度：维修组、时间、⼯作量
a) 维修组：带有2级层次，维修组——维修⼈员，⼆者呈树形包含关系。维修组及其成员的数量都不是很多。数据可视化大屏设计
b) 时间：普通时间轴。从系统开始运⾏后计算。以⽉为最⼩单位。
c) ⼯作量：维修⼈员处理的⼯单数记为其⼯作量，维修组的⼯作量为组内成员的⼯作量之和
3. 寻案例：
我们可以看出，这个数据集跟上⼀个区域热点图的数据集有很多相似之处，都有⼀个带有层次关系的维度，都带有时间轴，总维度数也不多，故⽽理论上也可以⽤zooming
Circle Packing图来实现。但是也有两个显著区别，其⼀是维修组的层次和数量不像区域那么多，其⼆，
需求要求我们能同时展⽰⼯作组和⼈之间的对⽐。考虑到这两点不同，和⼈们容易审美疲劳，不能⽤zooming
Circle Packing图，需要重新寻案例。
寻的对象显然是类似zooming Circle Packing这样可以显⽰层级关系同时⼜能反应总和数据对⽐关系的统计图和主题图，例如
tree，tree
map，bar chart， stack chart，line chart等等。这⾥我到两个带交互效果的案例：
(带有层次的柱状图)
经过对⽐我选择了后者，因为它堆栈和柱状图组都能在⽤户不做操作的情况下反映底层之间的对⽐关系，适合表达满⾜“同时反映每个⼈的⼯作量”的需求。故⽽我对其进⾏修改，做出了如下初始统计图：
图6维修组⼯作量对⽐图的柱状图组效果
图7维修组⼯作量对⽐图的堆栈图效果
4. 维度增加
从上⾯两图可以明显地看到，组之间的⼯作量对⽐、甚⾄⼈员之间⼯作量的对⽐表达得很完美。再配合⼀些动画效果已经⾜够美观。最后就是增加⼀个时间轴，来反映时间变量。
最后为了明确描述信息，丰富内容，可以采⽤增加tips的⽅法，在⽤户⿏标点击(click)或者悬停(hover)的时候显⽰tips，把维修⼈员姓名、⽉⼯作量、⽉总分、⽉平均分这些信息显⽰出来。本质上还是⽤tips增加维度的⽅法。
5. 总结
事实上⼀开始这个图的设计内容有很多，最初计划将时间、维修组、维修⼈员、⼯作量、维修⼈员的⽤户评价总分、维修⼈员的⽤户评价平均分这6个纬度的数据全表现在⼀个图上，同时突出时变特征分析和⼈员之间的对⽐关系。但是这么复杂图⽤纯2D图形是很难表现的，可以想象的结果是增加⼀堆选项按钮，勉强将所有维度的数据绑定到⼀个图中。或者⼀个⼤图多个⼩图来表现，这样不仅做起来难，做好后⽤户⽤起来也难。应该简化内容，⼀幅图⾥就表现主要需求，太多的内容不如分开，如此就有了第三个案例，维修⼈员时序评价图。
案例三：维修⼈员时序评价图
1. 需求分析：
既能按时间顺序表现维修⼈员的评分变化，⼜能同时⽐较多个维修⼈员。
需求重点：时序变化，多⼈⽐较
2. 数据分析：
数据维度：维修⼈员，时间，平均分，总分
a) 维修⼈员：单⼀，⽆层次。
b) 时间：普通时间轴。从系统开始运⾏后计算。以⽉为最⼩单位。
c) 总分：维修⼈员 当⽉评价总分
d) 平均分：评价总分/当⽉接单数
3. 寻案例：
这个案例⽆疑是最好的，同时显⽰多个变量的时序变化，line、bar是最为常⽤的表现⽅式。我们可以
最快速度想到的类似案例⽆疑是股票⾛势图——多个股票的对⽐是多⼏道变化的线。这种统计图由于常见，有⼀种不⾔⾃明的效果。
这有⼀个⾮常好的案例：
这个案例的优点在于：⼤⼩⾃适应，漂亮的动画效果，滑动时间轴，可由⽤户选择对⽐对象，好看的tips。
以这个案例为模版，各种表现时序对⽐关系的报表⼿到擒来。例如把⼈名换成维修⼈员，把⼈名出现的数量换成总分，就已经是很不错的统计图了。最后，平均分和总分是两码事，数值差距⼤，不适合在⼀个图中表现，拆成两个图就好。
图8，⼀个⼗分好的案例，法国⼈命名的变化
图9，使⽤两个图表展⽰不同纵坐标数值的案例
本来这⼀类时序对⽐关系的报表就⽐较成熟。再考虑到⼯时因素，不做多余的设计。
那么思路很明确了，维修⼈员时序评价图，采⽤类似图9的双图显⽰⽅式，同时采⽤类似图8的动画效果。这样已经满⾜需求的需要了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。