【www.shanpow.com--工作总结】
可视化工程师篇(1):Web工程师必备的43款可视化工具
Web工程师必备的43款可视化工具
可视化工具JavaScript前端开发开发工具
摘要：话说工欲善其事，必先利其器。对Web工程师来说，通晓开发工具则是其走向成功之路的必经之路。
国外站点DATAVISUALIZATION.CH为大家总结出了当前热用的43款可视化工具，包括Arbor、Chroma.js、D3.js、Google Chart Tools等，绝对让你一饱眼福。
1.Arbor.js
Arbor是一个免费的、可视化的图形库，基于矢量创建动态的连接图。它为图形组织和屏幕刷新处理提供了一个高效的、力导向的布局算法。
2.CartoDB
CartoDB是一个地图Web Service，并提供非常丰富API，利用它可以轻松创建动态的、可视化的数据驱动地图。
3.Chroma.js
交互式色彩空间资源管理器，允许预览一组线性插值等距的颜色。
4.Circos
Circos是一个Perl语言开发的自由可视化软件，最初主要用于基因组序列相关数据的可视化，目前已应用于多个领域，例如 影视作品中的人物关系分析，物流公司的订单来源和流向分析等，大多数关系型数据都可以尝试用Circos来可视化。
5.ColorBrewer
ColorBrewer是专门为帮助用户选择地图和其他图片配色方案而设计的在线工具。
6.Cubism.js
Cubism.js是D3可视化库的一个插件，用于实现时序图。
7.D3.js
D3是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HMTL表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图。
8.Dance.js
基于Data.js和Underscore.js的一个简单的数据驱动的可视化框架。
9.Data.js
Data.js是一个JavaScript数据表示框架，提供统一的接口和数据域。
10.DataWrangler
DataWrangler是一个交互式的数据清理和转换的可视化工具。
11.Degrafa
Degrafa是一个功能强大的声明式绘图框架，提供丰富的用户接口、数据可视化和映射。
12.Envision.js
Envision.js是一个可以快速创建动态、交互式的时间序列的可视化库。
13.Flare
一组软件工具集，用于在ActionScript中创建交互式的可视化数据。
14.GeoCommons
GeoCommons是一个可视化的数据地图分析工具。
15.Gephi
Gephi是一个可视化的网络探索平台，用于构建动态的、分层的数据图表。
16.Google Chart Tools
Google Chart Tools可以帮助你将数据转化为图表，并嵌入自己的网页，这些图表还拥有交互功能，可以钻入，或通过鼠标盘旋获取详细信息，还可以实现动画图表。
17.Google Fusion Tables
Google Fusion Tables是一个数据可视化服务，Fusion Tables可以上传100MB的表格文件，同时支持CSV和XLS格式，当然也可以把Google Docs里的表格导入进来使用。对于大规模的数据，可以用Google Fusion Tables创造过滤器来显示你关心的数据，处理完毕后可以导出为csv文件。
18.Google Refine
Google Refine是一款非常强大的数据整理工具，可以帮助用户清理数据，进行格式转换等。
19.Impure/Quadrigram
一个可视化编程语言，旨在收集、处理可视化信息。
20.JavaScript InfoVis Toolkit
一个JavaScript库，用于给Web创建交互式的、可视化的数据。
21.Kartograph
Kartograph是一个简单且轻量级的框架，建立交互式地图应用程序无需谷歌地图或其他任何地图服务。
22.Leaflet
Leaflet是一个轻量级的JavaScript库，用来创建基于平铺系列的交互式地图，桌面和手机浏览器皆适用。
23.Many Eyes
一个Web应用程序，用来创建、分享和讨论用户上传图形数据。
24.MapBox
一个Web平台，用于托管自定义的地图设计和一些列的开源工具。
25.Miso Dataset
一个客户端数据转换和管理库，用来加载、解析、查询和操作数据。
26.Modest Maps
提供基本的地图功能，包含丰富的API。
27.Mr. Data Converter
一个Web应用程序，把Excel数据转换成友好的Web文件，如HTML、JSON、XML等。
28.NodeBox
一个桌面应用程序,允许您创建生成,静态,鼓舞或交互的视觉效果。
29.Paper.js
一个矢量图形脚本框架。
30.Peity
Peity是一个简单jQuery插件，把任何一个元素内容转换成一个简单图饼、线条或条形图标。
31.Polymaps
一个基于矢量和tile创建动态、交互式的动态地图。
32.Prefuse
Prefuse是一组API工具包，它有两个项目，一个是基于Java的API调用（prefuse toolkit），生成Applet或者窗口程序，另一个是基于ActionScript的API调用（prefuse flare），可以生成Flash。
33.Processing
一个开源的编程语言，是Java语言的延伸，并支持许多现有的Java语言架构，不过在语法 (syntax) 上简易许多，并具有许多贴心及人性化的设计。Processing可以在Windows、MAC OS X、MAC OS 9 、Linux等操作系统上使用。
34.Processing.js
该框架主要针对不想使用Flash或Java applets进行图片编程以及Web交互的开发者。Processing.js使用JavaScript在HTML5的Canvas元素上绘制形状以及操作图像。
35.Protovis
Protovis是一个可视化JavaScript图表生成工具。
36.R
R主要用来进行数据探索、统计分析、作图的解释型语言。
37.Rapha?l
Rapha?l是一个小型的JavaScript 库,用来简化在页面上显示向量图的工作。
38.Recline.js
Recline.js是一个开源的JS库用于利用JavaScript+HTML轻松创建基于数据的应用。这个库拥有大最的功能来处理数据集包括：加载，查询和操作等。
39.Rickshaw
Rickshaw是一个基于D3.js来创建序交互式的时间序列图表库。
40.Sigma.js
Sigma.js是一个开源的轻量级库，用来显示交互式的静态和动态图表。
41.Tableau Public
Tableau Public是一款桌面可视化工具，用户可以创建自己的数据可视化,并将交互性数据可视化发布到网页上。
42.Tangle
Tangle是一个用来探索、Play和可以立即查看文档更新的交互式库。
43.Timeline
Timeline即时间轴，用户通过这个工具可以一目了然的知道自己在何时做了什么。
可视化工程师篇(2):可视化：可视化四大派，办公室派、设计师派、分析师派、工程师派
数据可视化技术四大派系：办公室派、设计师派、分析师派和工程师派
数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。这个是百科上对“数据可视化”的定义，有点晦涩么，我们换个方式解读。如果你经常被领导批评PPT做得不好，我想你一定能够理解这句话“文不如表、表不如图”，其实换位思考一下，假如你自己也做了领导，面对纷繁复杂的人、事情况，应该也会对高度总结的图表产生好感。无论如何，赏心悦目的图确实比表格让人心情好很多。
一图解千言这所谓的“一图解千言”，被没有国界没有民族的宣传，但很多人都把信息可视化和数据可视化混在一起了，从广义上说，作为数据汇总结果的几个数字，是可以归于信息概念的，也可以被设计师们拿来做可视化元素。比如AI里面的图形选项。
本人不是平面设计师，就不班门弄斧了，更不敢和央视媒体的专业认识讨论信息可视化的概念，虽说用好了信息元素能够加分不少，我们还是只说说数据的可视化。
有需求就有技术，后者说存在即合理，当下对于不同的人群，大家用的数据可视化技术可谓千差万别，我从个人用户角度切入，帮助大家分分类。
对号入座了没有，入不进去的话也就算了，当领导也没啥不好的J。以上技术工具刨除盗版因素，都是可以获得的，能做出来的效果也是各有千秋，一方面是难度问题，一方面也是经验问题。后面三类都是专业工具，也就是作为办公室人员，99%都用不上它们，第一种Office大家天天用，但你也许感到奇怪，Excel的图不是挺丑的吗？
上图是从百度搜出来的普通图表，难怪大家都这么想。我也是醉了，微软干嘛不把默认的图形搞的好看一些呢，无论是格式和配色，简直和国产软件一样！为了对比，我再从yahoo（为啥google还不能用）和Smartbi官微找了2张图，你看看有什么感觉？
期待我的结论么？其实很简单，中国的绝大多数同胞们根本就没有发现Excel这个工具的强大，或者说无限的灵活性和扩展能力。大家别说我媚外，确实从百度里面搜不出来这些好图片。没人骂街我再举个例子，《经济学人》、《华尔街日报》和《商业周刊》的编辑应该都是Excel高手，或者说有规范的Excel模板，做出来的图表十分高大上。
如果你对Excel如何做出来这些效果好奇，我非常理解，因为第一次见到它们我也很吃惊，现在有很多教你做商业图表的书和网上课程（比如刘万祥老师），相比学习成本应该非常可以接受。能自己掌握技巧是好事，以后你也可以炫耀给同事，那如果你不想学怎么办？别急，中国人多路子多，想必很快就会有人专门做这个事情，毕竟Excel的模板功能相当强大，不会就“抄”呗，这个领域应该是没有知识产权的吧！所以对我们个人来说，Excel就够了，赶紧去学吧，保准一辈子不浪费。但对企业用户，Excel够不够呢？这点就有点麻烦，Excel现在的版本都是对个人比较方便，放到企业环境就有点别扭，比如数据是分散在数据库和本地的，而且报表的权限也有些要求，甚至还有领导想从手机、平板上看报表。别急，我说3条路，你自己选选：1第一条路：办公可视化（继续使用Excel）
能做到么？答案肯定的，首先微软不可能放弃这个市场，其次国内已经有软件（Smartbi电子表格）可以使用Excel完成数据采集、分析、展现、发布等一系列功能。这条路的好处是你以前做的
2第二条路：自助可视化（别想有Excel报表）
这些商用软件从国外开始流行，比如水晶易表、Qlikview、Tableau，国内也有很多效仿者，我就不给他们做广告了。这些软件简直就是直接做图，基本没有任何报表（单元格）能力，用惯Excel的人肯定只能和其热恋，无法“走入婚姻的殿堂”。但其做图的能力确实非常惊艳，只是替代品越来越多，已经没有2年前那么令人惊喜了。
3第三条路：报表可视化（Excel报表的另辟蹊径）
这条路跟国外的产品没有任何关系，广告不得不打上了，比如润乾、思迈特、帆软、亿信华辰等。他们充分理解Excel表格在国内客户的心理地位，因此功能上首先做到了完成“中国式报表”，然后才是增加统计图形。从数据可视化实现方式上，后三者的可视化效果更好一些，它们应该都是集成了xxx Charts类的图形控件。值得表扬的是，亿信华辰和思迈特陆续都改用了咱们国产的Echarts控件，关于它咱们后面单说说。
亿信华辰集成的Echarts2.0
思迈特Smartbi集成的Echarts3.0（貌似是ipad截图）
这个Echarts是个什么鬼？它是百度旗下的一个产品，也是工程师派系最为追捧的唯一的国产化图形控件，很多甲方自己的开发人员都选用Echarts实现可视化展现分析，可谓这个领域的中国骄傲了！这下你知道为什么国产软件厂商都选择Echarts了吧。
这个开源图形控件官网有更多例子
说完了个人和企业用户如何看懂数据可视化，回头看看我们所处的环境，到处都在说“大数据”，那么它与“数据可视化”有什么关系么？从网上搜几张图看看，个人总结一下，前面所有的可视化介绍都是基于统计数据的，但“大数据可视化”是基于细节数据的。
那么，这些基于细节的大数据可视化图，是怎么制作出来的呢？可以想象，要么这些图是用D3.js、Processing.js这样的编程方法生成（工程师派），要么是用Gephi这样的成熟工具制作（分析师派）。Gephi是进行社交图谱数据可视化分析的工具，不但能处理大规模数据集并生成漂亮的可视化图形，还能对数据进行清洗和分类，看其官方还是挺酷的。
总结一下，人们都说女人是“一白遮百丑”，同样数据可视化也用于满足视觉感官，当然是越漂亮越好。无论大数据可视化用的专业分析工具，还是人人电脑上就有的Excel，先看看你自己的职业发展方向吧，办公室派、设计师派、分析师派和工程师派里面总有你的位置，能做好其中一个就已经可以拍好“老板的马屁”了。
同时我提议各位读者还是选用免费或者开源的软件工具，把钱花在学习上面才最值（前面说过Excel商业图表类似的课程），如果用Excel+Smartbi的话还可以发布到APP耍酷，够逼格吧！假如想追求个性，关键时刻用一下Gephi，你的工作报告一定会异常出彩！
来源：中国电子表格应用大会
链接：http://www.spreadsheet.com.cn/dhdt/dhgg/68.html
可视化工程师篇(3):数据可视化到底有什么用？
1可视化是什么有人说，数据可视化这名太装逼。
不过广义上，可视化无处不在, 打开浏览器, 网站就是个数据可视化, 背后是数据库密密麻麻的数据表, 到了你的浏览器就是浅显易懂的页面。
淘宝是商品的可视化, 上面有价格、发货地种种过滤器, 微信是实时数据的可视化, 围起了你的社交网络, 让你一眼看到最新的消息流。
舆论有时候会制造一些新的名词 大数据、 o2o、云计算, 也包括数据可视化, 但看起来日新月异的变化背后, 是我们的认识稳定而缓慢的变化, 真正改变三观的创新其实不多。
小学的教科书里就有折线图, 后来有了excel可以在电脑里画, 这几年你打开某某大数据产品, 长得还是差不多, 只是点一下会有交互存在。
狭义上的数据可视化, 更多是纯图形去代表数据, 也有很多分类, 不过也许你也懒得了解了。
2功能与形式
有时, 数据可视化给人的感受是『 真厉害 』
然后, 然后就没有然后了…
也有人说, 『你就一美工, 有啥用呢』
虽然我们工作也经常做show为主的可视化, 但长期而言, 可视化最好是一种有用的东西。
3快速的解读
天下武功, 唯快不破, 可视化让人一眼发现趋势。
心理学家说, 人脑70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。
这是道德经的一段(深度装逼)：
『 有无相生, 难易相成, 长短相形, 高下相倾 』
这句话朗朗上口, 背后多少是个感官的映射：
很多感官是强绑定的, 有、长、高都是正向的, 无、短、下都是负向的, 想想平时说的话, 内心强大、 影响深远、信念坚定、强和大, 深和远, 坚固(硬度高)和稳定(质量大), 都是我们不经意之间对通感进行了绑定。
而不同的感官获取的速度和效率是不一样的, 面对一张密密麻麻的数据表, 你可能很难判断最大的数字在哪里, 但你给加个颜色就一目了然:
哪里最大, 哪里最小, 趋势怎样。
如果我们把数据信号转化成感觉, 你看上面的表格的时候, 你先认知了表格的数字, 再转化成数字信号, 远不如看颜色一目了然。
这点很像GPU和CPU的关系, GPU处理图形超快, 但处理逻辑多的任务就歇菜了, CPU可以处理复杂的任务, 但复杂的画图就累瘫了, 存在意味着合理, 合理意味着该用啥就用啥。
人脑就是有些奇怪的特性, 比如一句话三四个逻辑可能就把你考倒了, 一篇很长的文章你也背不下来, 凭这两点, 你轻松地就被电脑秒杀了, 但有时候你的反应能力比电脑都强, 比如视觉, 你一眼就认出了隔壁家老王就是老王, 电脑却很难。
人的视觉能力强大, 导致了我们通过视觉去感觉数据比直接看数据更快速, 一眼看到趋势。
不觉得你宝贵的生命, 不该浪费在看数字上么？
4世界的切片（语言/摄影/数据可视化）
映射只是个细节, 摆在你面前一个很大的数据集, 我们如何去设计可视化？
人的思维有穷有尽, 你很难想象四维空间的方体如何旋转, 也很难理解月球绕着地球的同时地球又绕着太阳转最终留下了怎样的曲线, 你同样难于理解一句逻辑很长的句子, 比如, 上海徐汇区20年房龄以上的房子在去年3月的房价增长率比上海平均房价增长率快了多少。你也许很快理解了这句话, 但再增加几个维度理解就难了。
大脑就像管道, 当信息管涌的时候, 入口就会堵上, 因此我们理解的能力, 在维度和逻辑的增加里变得迟钝。
拿语言对比数据可视化。我们说话或者写文章, 都有停顿, 每个句子都不长, 整个文章按照章节段落句子在时间上拆成长长的流水线, 每次只讲一点点, 按照程序界的黑话就是『以时间换空间』, 大脑这个CPU反应慢, 不过没关系, 任务排队, 花点时间多反应一会也能想明白问题。
比如 你不会这样介绍自己, 而是用逗号切成小短句：
『 我是一个来自于有上有天堂下有苏杭美誉的杭州市辖区内唯一民用飞机场的萧山市市中心的因为北宋隐士而得名的萧然山下一家有五十年历史的国有企业的厂办小学毕业的后来去了上海读书然后工作然后转行的数据可视化工程师。』
因为每个事物都有很多特点, 也就是数据维度多, 反映到数据库就是字段非常多, 而且你一句话说不清楚, 你必须把他们切成片段。
多少, 今天我们不缺数据, 但如何通过海量的数据, 描述你的观点和解读, 解答你的问题和疑惑, 指导你的行动和决策？
弱水三千, 只取一瓢, 做一个可视化和说一句话, 拍一张照片一样, 选择几个维度, 表达一个观点, 寻找一个角度, 捕捉一个瞬间。
然而可视化和说话一样, 有角度的可视化就是不全面的, 面面俱到就是什么都没说, 并不存在一种解决所有问题的数据可视化, 不同的角度就有不同的答案, 千人千面。
这让我想起了《巴赫, 哥德尔, 埃舍尔 集异璧之大成》的封面, 光通过了一个三维物体, 投影在三面墙上, 每一个切片里都是不一样的字母：
低维度的思维注定我们只能理解三个平面字母, 却无法一次性理解那个高维度的整体。
5一个小例子
你买房了, 目的是投资有回报, 你问：
『 去年上海房价哪里涨幅最大 』
这句话包含4个维度（时间, 地点, 板块, 涨幅）。
我以图作答, 把去年的增长率做个计算, 画在图上就一目了然, 可是去年上海房价普涨, 上海上下一片红。
我也知道整个上海涨的快, 这个图有什么软用？
不要紧, 我们改一改, 那就把20% 作为分界, 增长超过20%的标红色, 超过越多则越大, 不足的标记成蓝色, 不足越多则越大。
涨的快的, 跌的凶的, 图里就看的清楚。
交互上还可以优化一下, 比如点击一下我就看得到详情, 点下详情我进的到原始链接, 看看这数据tm是不是假的, 非常满足本人的好奇心。
回到现状, 你看大部分房产网站都有地图找房的功能, 但我并不在意每个区在卖多少房子, 我的问题是我要买的房子在哪里, 我还希望上能查看房价趋势变化, 然后找到我要看的区域放大, 然后查看明细信息, 比如单个小区的容积率、绿化率、建设年代等等。
6精确性
可视化也出来很多年了, 有时候我问自己, 做来做去那么点东西, 你有进步么…
不过, 进步还是有点的, 更高的渲染性能, 更丰富的交互特性, 但更重要的是, 更精确了, 我觉得这很重要。
说一个小case, 许多人都喜欢这样的热力图, 据说看着特别大数据：
此刻, 我脸上写满了懵逼般的茫然, 五颜六色真的能把分析包装的高大上吗?
我的理由, 并不是因为5年前这种展现就很流行, 太老太过时, 而是有切实存在的2个问题:
1、 我要的是定量分析, 而不是定性分析。
这种热力图, 可以定性的分布情况, 但确实不能确定红橙黄绿青蓝紫到底代表多少的数值, 我鼠标所在的某个区域, 究竟有多少热度, 我也不知道我鼠标100米范围内具体有哪些明细的数据。
2、 有很多图, 用热力图画是完全不准确的。
有兴趣的同学, 可以翻翻这种热力图的代表, heatmap.js的源码,
https://github.com/pa7/heatmap.js/tree/master
大致的意思是, 如果有一个数据点, 就在地图上画上一个从周边到中心透明度增加的圆点, 数据遍历完了, 生成一张透明度不一的图, 最后统一按照透明度进行着色。
所以, 点密集的地方会非常高亮, 因为很多点互相叠加, 不算怎么说, 你用这种图去表现人流、gps定位数大致是合适的, 每个点大小一致, 大家就pk一下数量。
但很多场景是不合适的, 比如你用热力图表现世界各国的交易, 用点的大小表现交易量, 美国就要吃亏, 因为欧洲国家小而密集, 汇聚在一起非常亮眼, 美国、俄罗斯、中国都是泱泱大国, 一个国家只有一个点。
更不合理的是房价, 我看到有人用这种热力图去做房价分析, 这个结果是错误的, 和欧洲和美国道理一样, 小区密集的地方显得很亮, 并不仅仅是因为数值大就发亮。
7解决
如要判断一个城市各个区域的房价, 不如用这种方式去展现 (剧透下我大帝都的房价哈哈哈)
我把地图切分成小块, 计算里面的房屋均价, 然后去着色, 那我们看的比较清楚。
再细一步, 我的可视化组件可以自由地定义怎么为数据取平均, 为什么？
我六边形的格子里有2个小区, 一个卖10w, 一个卖1w, 当你考察六边形地块的价值的话, 是5.5w/平吗？
显然, 这个地块的房屋均价是接近10w的, 你应该为面积进行加权：
地块均价 = (小区1面积 小区1均价 + 小区2面积 小区2均价) / (小区1面积 + 小区2面积)
