工作相关，了解流行的可视化库，（如百度echarts，GoogleCharts，Gephi等）最后还是D3 Gallery的诸多Demo惊艳了我。简单介绍后带来我的实战。
D3是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式操作Dom。
D3允许绑定任何数据到DOM对象模型，然后应用数据驱动转换到文档。例如：你可以用D3从数组生成HTML表格，或者使用相同数据平滑和动态创建一个SVG图表。
D3不是一个庞大的框架，像想象那样提供许多功能。相反，D3解决这关键问题：基于数据文档高效操作。避免专有的表现，同时提供良好适应性。公开全部功能，如CSS3、HTML5和SVG网页标准，很少的开销，D3速度非常快。支持大数据集和动态交互和动画效果。D3的功能设计允许代码重用，通过集合不同的组件和插件。
引用自小渝人儿
实战一 标签云
首先是数据准备，我用Java写了一个采集全站高频词的程序，输出一个<单词，字号>的map，让高频的词有更大的字体。
数据采集过程需要注意的是对中文进行分词，Stopwords的排除以及根据词频计算字号。
然后我们使用D3的布局函数d3.layout.cloud.js。再根据map设置字号，颜色随机就可以了~
实战二 Sunburst
sunburst不知道怎么翻译好，光芒？简而言之是一个圆盘的多级结构，也可以说是一个变异的树结构。
同样写一个程序来获取数据。这次进步一点，把数据放在一个json文件中。这里我想展示一个博客-分类-文章的多级结构，最外圈每一个扇形的大小由文章的字节数来确定。内圈的累计计算由D3自动完成。
绘制部分感谢bl.ocks.org，这次没有现成的layout，基本靠画圈圈来完成的。
给每个部分加上标签坡费了我一番周折，最后还是没有理解mousemove事件返回的鼠标位置到底在哪儿，如果知道怎么调，欢迎留言。
实战三 Geo Map
在页面上绘制地图，这里每一条边都是现场绘制出来的哦。数据源请搜索“GeoJson china”（懒人请进）。
源码简单易懂，值得一提的球体经纬度如何投影到二维平面上，这里使用常见的墨卡托投影。投影方式千奇百怪，世界中心到底在哪，有兴趣的同学可以看一看。
var projection = d3.geo.mercator()添加一个map，根据我到过的省份频次给不同区块上色。
然后添加了简单的交互，类似刮刮乐，鼠标扫过便能揭开真相！
实战四 Chord Diagram
Chord既是和弦的意思，第一次看到这种类型的图时简直闪瞎我的狗眼，惹得我非常想自己做一个。
这个类型的图非常适合点对点的数据类型，比如Uber流量图。那我一个小博客，页面间跳转少的可怜，做个河图还可以，怎么也撑不起chord。哪里去找点对点的数据呢？最后我非常无耻的选择了pairwise document similarities。。。即博文间的相似度。。。。
这里又用到一些简单的自然语言处理方法（包括前面的stopwords）。用TF-IDF建立向量，简单的用余弦值来作相似度。程序
D3提供现成的d3.layout.chord，调用即可，每条弦的宽度会根据你带入的值自动计算。再给不同分类的文章加上颜色，炫酷的Chord Diagram就出炉啦！
小结
四篇实战之后，对D3的select, layout, data import, text, event, 回调函数有了简单的认识。
像我这样的前端小白也能成功做出一定的效果，这突显了D3的易用性。还没有体验过的朋友一定不要错过！做出了漂亮的效果也不要忘了留言分享哦~
comments powered by Disqus