数据可视化系列研究之常见图表分析.doc

数据可视化系列研究之常见图表分析Column Chart柱形图3簇状柱形图3堆积柱形图3百分比堆积柱形图4带负数的柱形图5Error Line误差线5Line Chart折线图6普通折线图6多Y轴图表7可伸缩折线图7Step Line Chart阶梯线图8Area Chart面积图9普通面积图9堆积面积图9百分比堆积面积图10Pie and Doughnut Chart饼图和圆环图10普通饼图11复核饼图11多层饼图12Map地图13Radar Chart雷达图14雷达图（周期）15雷达图（参数）15Scatter Chart散点图16XY散点图16Bubble Chart气泡图17Box Chart盒图18Surface Chart曲面图19Waterfall Chart瀑布图20Gantt Chart甘特图21Funnel Chart漏斗图22Pyramid Chart金字塔图23Candlestick Chart K线图24Kagi Chart卡吉图25Histogram直方图26Gauges仪表盘27Angular油表图27Cylinder桶图28LED图28Thermometer温度计图29Bulb灯泡图29Spark Chart火花图29Bullet Chart子弹图30Pareto Chart帕累托图31Marimekko Chart细分市场份额矩阵图32Cluster Dendrogram谱系图33Sunburst光芒图34TreeMap矩阵式树图35Scatterplot Matrix散点矩阵图36HeatMap热图37Chord弦图39Comparison Chart比较图表40Word Cloud词云41Force Chart力学网络图42Predictions预测图43附45Column Chart柱形图柱形图（也称作条形图）用来显示或比较多个数据组，有助于凸显数据的高值和低值。数据较多是可以使用水平柱形图。簇状柱形图簇状柱形图适合展现多个类别在某一维度对比的情况，可以表示三个维度的信息：X轴为一维，颜色为一维，Y轴为具体的数值维下图为不同国家在不同年份的出口对比示意图：堆积柱形图堆积柱形图表现的是某个指标的对比情况以及该指标的子指标对比情况。当数据集需要被按构成进行分解，而数据集作为整体还需要与其他数据集进行对比时，就需要堆积图。下图（垂直和水平两种）为多种商品在2004、2005、2006三年的销售情况。堆积在一起的柱形，表示某种商品在三年内销售的总和。当商品较多时，可以考虑水平图：百分比堆积柱形图与堆积柱形图类似，但展现的是占比关系。百分比堆积柱形图每个柱形的高度相同，数值均为100%，每个柱形内展现各个分类所占的百分比。下图是几个公司的税收分类图。不同颜色代表不同类别的商品。Y轴是百分比，用来体现每类商品税收所占比重：带负数的柱形图柱形图不一定都是向上的，也可以有向下的柱形。下图是几个国家对于银行投资兴趣的变化，可以看到有的国家是增长的（正数），有的国家是减少的（负数）：Error Line误差线下图是电器的使用寿命表，由于存在误差，所以用误差线来表示上下浮动范围：Line Chart折线图折线图用一系列以折线相连的点表示数据。这种类型的图表最适于表示大批分组的数据，特别是一段时间内的趋势和表现。普通折线图下图为某公司今年和去年各个月的销售情况对比图（由于基于时间，而且有12个月，用折线图比用柱形图更加直观）：多Y轴图表发电机温度、电力、转速同时在一张图中展现：可伸缩折线图可伸缩折线图用来展示一段时间的数值变化，可以对X轴进行放大操作，这样可以在看到整体情况后，选择一段时间具体分析数值的变化。下图展示了某网站一年的访问数量，数据是按周统计的，用户可以选择其中几周将X轴放大查看具体的数据。Step Line Chart阶梯线图阶梯线图类似折线图，同样适合于表现随时间变化数值的变化。只不过折线图通过直线将两个数值连接，而阶梯线图通过折线连接。上图显示了某公司2006年和2007年各个月份销售额的情况。Area Chart面积图面积图用填充了颜色或图案的面积来显示数据。强调数量随时间而变化的程度。面积片数不宜超过5片。普通面积图下图展示了某公司在2003年和2004年月销售情况，图中还展现了目标销售额线：堆积面积图和堆积柱形图类似，堆积面积图也是体现多项随时间的变化以及整体随时间的变化。下图展示了2010年4个月不同类商品销售情况以及总体销售情况：百分比堆积面积图百分比堆积面积图强调的是随时间变化，多个指标占比的变化情况。下图展现了某公司三种商品随时间变化销售占比情况：Pie and Doughnut Chart饼图和圆环图饼图用分割并填充了颜色或图案的饼形来表示数据。饼图通常用来表示一组数据各自的占比，也可以选择多个饼图来显示多组数据。圆环图（甜甜圈）是饼图的一个变种，表达的意思和饼图相同。普通饼图下图展示了某次比赛各国参赛选手人数（还有变形的多纳圈图）：复核饼图下图显示了某公司四个季度的销售额，由于第三、第四季度的销售额较小，采用了子饼图来显示：多层饼图饼图不仅能表现各模块占比，还能用来展现组成关系。多层饼图是用于展现层次关系的一种形式。下图是某公司机构关系图，FusionCharts的多层饼图提供可视化的路径跟踪，可以从子节点回溯到根节点。Map地图地图用来展现地理信息，以及与地理位置有关的信息。比如各地区（国家、省市）的各项指标情况。指标的多少可以用颜色表示，或者一根柱子，或者一个圆圈。颜色的深浅、柱子的高低、圆圈的大小用来区分数值的大小。Radar Chart雷达图雷达图可以用来表现一个周期数值的变化，也可以用来表现对象主要参数的相对关系。雷达图（周期）下图显示一年各个月产品销售和服务支持获得的收益图：雷达图（参数）下图展现了两个对象的主要属性对比情况，不仅可以对比两个对象的关系还可以对比对象各个属性的情况（数值的单位必须一致）：Scatter Chart散点图散点图是由代表信息池中特定数据的绘制点组成的集合。散点图允许用户考察大范围的数据来确定趋势以及线性相关性。散点图的X轴和Y轴都是数字。XY散点图下图展示了参与调查的客户持有股票和基金时间的情况。可以从散点中发现是否存在线性相关性，并且发现离群点：Bubble Chart气泡图气泡图用一系列气泡表示数据。气泡的大小与数据量成正比。当图表中有三项彼此独立的参数时，需要用到冒泡图。下图显示了多个公司（气泡）购买服务的价格、数量（气泡半径）与服务粘性的关系，可以看到最大的气泡代表其购买的服务最多，但价格较低且粘性低，所以目前不是我公司的头等重要客户，而是是需要培养的客户：Box Chart盒图盒图（也叫箱图）由一个或多个方块组成，说明一个或多个数据集的数据分布情况。在统计分析中，经常用到盒图。一个盒图的数据集（一个方块）中，横线代表的含义由上之下依次为：最大值、Q3、Q2、Q1、最小值。Q1（第一四分位数），是一个样本数据中由小到大排列后第25%的数值；Q2（第二四分位数），是样本数据由小到大排列后第50%的数值；Q3（第三四分位数），是排列后第75%的数值。上图展示了一个公司不同部门员工年龄的分布情况。可以看到市场部（Marketing）的年轻人非常多，50都小于24岁，超过一半人小于部门评价年龄30岁。Surface Chart曲面图曲面图展示多组数据的地形视图，动态地发现数据间的关系。三维曲面图在二维展现下效果较差，需要可以自由转换视角才能发挥曲面图的优点。下图是某公司去年四个季度电器、食品、服装的销售情况（曲面图还是展示地形比较好，这个示例是我自己编的，不一定很适合）：Waterfall Chart瀑布图瀑布图用来显示累计影响的结果。从左到右，最右侧的柱子是最终数值，其左侧的柱子是各种影响最终结果因素的数值。下图是某工厂的花费图。第一柱形是预期花费，绿色的两个柱形分别为材料和工资花费，都比预期增加了，红色柱形表示税收实际少交了17美元，最后一个柱形是最终的实际花费：下图展示了某公司收入、支出、利润的关系，用瀑布图再合适不过了。绿色部分，前两个柱子是两个收入分类的收入情况，第三个柱子是收入总和；红色部分，前两个柱子是两个支出分类的数值，第三个是支出的总和；最后蓝色的柱子是利润实际的值。通过瀑布图可以看到利润的得出是由前面数值影响的结果。Gantt Chart甘特图甘特图是一种水平条形图，通常用于时间表的图形化表示。横轴显示时间范围，纵轴显示一系列任务或事件。它直观地表明任务计划在什么时候进行，以及实际进展与计划要求的对比。下图展示了某软件公司几个部门11个月内的工作进度情况（五角星是里程碑）：Funnel Chart漏斗图漏斗图用来表示逐层分析的过程，从一个总值（最顶端），不断除去不关心的部分（瀑布的某一层），最终得到关心的值（最底端）的过程。漏斗图也常用在直观展现销售机会状态，因为销售机会越靠前越多，越靠后越少，所以成漏斗状。下图展现了某软件公司访问/购买情况。可以看到45.5%的访问用户下载了产品，21.9%感兴趣，但只有3.2%的用户购买了软件：Pyramid Chart金字塔图金字塔图用于展示类似金字塔的层级结构和数据量。例如某个国家的收入分配，金字塔顶部显示高收入类别，逐渐降低到代表低收入的底部。注意，金字塔的宽度没有任何意义。下图显示了不同类型商品销售情况：Candlestick Chart K线图K线图（也称蜡烛图）中垂直的直线表示某一天（或周期）的最高价和最低价，而柱体则表示当天（或周期）的开市价和收市价，并且用颜色区分开市价和收市价的关系。这种图最早被日本人用来记录米市的行情。下图显示了2006年两个月内的股票走势情况：Kagi Chart卡吉图Kagi图被广泛用于股票和商品价格分析。它是一种帮助做出交易决策的有效工具，消除了细微波动，提供了关于长期趋势的清晰理解。当高于前一最高点的时候（价格上升），用红色线条表示（粗线）；低于前一最低点的时候（价格下降），用蓝色线条表示（细线）。上图体现的是AT&T的股票收盘价的卡吉图，在具体交易时，卡吉图由细变粗时买入，由粗变细时卖出。Histogram直方图直方图（又称质量分布图）是用于描绘测量值与平均值的变化程度的一种条形图类型。是柱状图的特殊应用。借助分布的形状和分布的宽度（偏差），它可以帮助用户确定过程中的问题的原因。长方形的宽度表示数据范围的间隔，高度表示时间间隔内的数据数。下图显示了某发动机不同马力，频率分布情况。图中曲线代表正常型直方图的轮廓：下图是六种直方图类型示意图：Gauges仪表盘仪表盘用于展示面板、实时监控和报告中的单值指标。它们被用来显示关键绩效指标（KPI），进度指标和数量指标。一般会用颜色表示不同的状态（优、良、中、差；正常、低风险、高风险）。Angular油表图类似于油表的仪表盘。下图展示了某存储设备可用空间的情况：Cylinder桶图桶图可以用来显示当前资源可用情况。下图显示了某软件公司开发用计算机已使用情况：LED图下图显示了某计算机内存使用状态：Thermometer温度计图用温度计形式，展现数据。下图显示了某计算机内存使用情况：Bulb灯泡图直观显示数值，用颜色表示所处状态（红、黄、绿）：Spark Chart火花图火花图是一种设计简单却能容纳密集数据的小型图表。由于所占的空间小，可以容易地把火花图嵌入管理面板中，在单一的视图中显示大量的KPI。下图显示了某地的天气预报信息：Bullet Chart子弹图子弹图通常用来在一个较狭小的空间内表示某项指标数值（利润、客户数等）是否达到目标值的情况。还可以通过背景颜色来表示定性的范围（差、合格、良、优）。子弹图可以直观的表示当前指标与目标值的关系，非常适合展现绩效指标。上图表示了2013年1-4月份某公司的新增客户数量与全年目标的关系。图中的竖线表示2013年末该公司客户数要达到的目标值（2100），浅蓝色柱子表示2012年全年该公司新增客户数（1650），深蓝色柱子表示该公司2013年1-4月份的新增客户数（1000）。图中背景使用三种灰色来表示不同的评价，深灰色为不合格（0-1400），灰色为合格（1400-2000），浅灰色为优秀（2000-?）。如果年末客户数落在中间灰色的范围内，说明2013年的客户数指标只能算作合格。业务主管看到这个图，就能对整体的工作状况有一个直观的了解，方便进行相关决策的制定。Demo /mbostock/4061961上图显示了某地区税收情况，横向条形表示当前税收值，竖线代表目标值。不同背景颜色代表不同的评价等级。Pareto Chart帕累托图帕累托图又叫排列图、主次图,是按照发生频率大小顺序绘制的直方图，表示有多少结果是由已确认类型或范畴的原因所造成。它是将出现的质量问题和质量改进项目按照重要程度依次排列而采用的一种图表。帕累托图用来显示与2/8原理有关的东西。下图显示了某软件测试结果，X轴为bug的类型，左侧Y轴为bug数量，右侧Y轴为bug所占百分比（累计）。可见GUI部分是最需要重点关注的部分。Marimekko Chart细分市场份额矩阵图细分市场份额矩阵图可以用来显示三个维度的营销数据：单个细分市场的总值、特定细分市场中所有竞争对手所占的份额、以及每个细分市场中竞争者各自的份额。下图显示的是某商城各种手机销售情况，X轴是不同手机分类，Y轴是销售占比，不同的颜色代表不同制造商的手机。下图显示的是某网站访问用户中，四种浏览器在不同国家的统计情况。IE浏览器最多，其中美国、欧洲和其他地区三个分类基本数量相同。Cluster Dendrogram谱系图谱系图主要用来展现层次和分类、从属关系。需要有一个根节点。当叶子节点比较多的时候，只适合从根节点往叶子节点的方向查看，反向则比较困难。D3中有两种展现方式，一种是横向树状，一种是圆环树状。上图展示了Flare（一款绘图软件）的class类关系图谱。从中可以直观的看到Flare这款软件源码的代码结构，包括软件包的分类、从属（熟悉java的朋友会发现其实就是class文件的包路径）。Demo /mbostock/4339607Sunburst光芒图光芒图类似于树形图，但它采用的是放射形布置。主要用来展示层级关系以及各部分的占比。树的根节点是在中心处，叶片在周围。每个圆弧的面积（或角度，取决于实现）对应的值。上图展示的是某网站各个页面访问量的统计情况。网站将页面分成了几大类，然后逐层细分，有的页面属于第二层，有的页面属于第五层，所以出现了类似太阳光芒四射的图形。鼠标悬浮在某一个分类上，中间还会显示该分类所有页面访问量占总访问量的百分比。Demo /kerryrodden/7090426TreeMap矩阵式树图矩阵式树图通常用来展示层次数据的占比关系。图中的每个矩形代表树的一个节点，大矩形中的小矩形代表父节点包含的子节点。不同的节点用不同的颜色加以区分，节点的值用矩形面积的大小表示。 下图是DataV的treemap示例，表现的是淘宝各分类商品的销售情况。一次只展现两层节点。第一层的节点用边界较宽的大矩形表示，其中边界较窄的小矩形代表第二层节点。第一层节点下的小矩形 都采用同一类颜色，颜色的深浅代表节点的值的大小。点击第一层节点将把该节点下的两层节点放大显示。点击上方导航条中的链接可以回退到上一层节点。Demo /datavjs/#treemapScatterplot Matrix散点矩阵图散点矩阵是一个可以展示多维数据的可视化方法，它可以展示出每个两维度之间的关系。该组件的输入数据是一张有多个属性的二维表，用户可以选择需要展示的属性。每个小的矩形是一个散点图，展示了两个属性之间的关系。散点的不同颜色表示不同的数据类别。用户可以通过笔刷选取某些散点或者单独选取某个类别的散点，被选取的散点会被高亮出来。Demo /datavjs/#scatterplotMatrixHeatMap热图热图是二维表的图形化展示，适合展现大量的数据。每个指标用颜色深浅来代表值的大小，用户可以直观地、迅速地发现指标值较高的X、Y轴坐标，快速定位。Demo /ianyfchang/8119685上图是D3的一个示例，X轴和Y轴是两个维度，比如机构以及各种风险指标，红色颜色越深代表值越大，绿色颜色越深代表值越少。点击任意X轴或Y轴值可进行排序。在两个维度存在较多组合时，使用HeatMap能迅速发现需要关注的点。上图是FusionCharts中提供的Heatmap图，展示了一周不同时段网络流量的状况，底下的移动条可以调节显示颜色的部分。不在显示数值范围的色块将显示为白色，这样用户可以自定义关注的数值区间。Chord弦图弦图通常用来展示多个节点间的连结关系。多个节点分布在圆环的边上，数值越大，所占的弧长越长。每个节点都与其他节点存在关系，表现在节点间的圆弧上，其反映的是双向关系。下图展示了全国各大机场乘客人数（模拟场景），可以看到上海的乘客最多，而上海的乘