D3 实战练手

工作相关,了解流行的可视化库,(如百度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的功能设计允许代码重用,通过集合不同的组件和插件。

引用自小渝人儿

实战一 标签云

Model-View-Controller

Live Example: wurui.cc

首先是数据准备,我用Java写了一个采集全站高频词的程序,输出一个<单词,字号>的map,让高频的词有更大的字体。

数据采集过程需要注意的是对中文进行分词,Stopwords的排除以及根据词频计算字号。

然后我们使用D3的布局函数d3.layout.cloud.js。再根据map设置字号,颜色随机就可以了~

实战二 Sunburst

Model-View-Controller

Live Example: wurui.cc

sunburst不知道怎么翻译好,光芒?简而言之是一个圆盘的多级结构,也可以说是一个变异的树结构。

同样写一个程序来获取数据。这次进步一点,把数据放在一个json文件中。这里我想展示一个博客-分类-文章的多级结构,最外圈每一个扇形的大小由文章的字节数来确定。内圈的累计计算由D3自动完成。

绘制部分感谢bl.ocks.org,这次没有现成的layout,基本靠画圈圈来完成的。

给每个部分加上标签坡费了我一番周折,最后还是没有理解mousemove事件返回的鼠标位置到底在哪儿,如果知道怎么调,欢迎留言。

实战三 Geo Map

Model-View-Controller

Live Example: wurui.cc

在页面上绘制地图,这里每一条边都是现场绘制出来的哦。数据源请搜索“GeoJson china”(懒人请进)。

源码简单易懂,值得一提的球体经纬度如何投影到二维平面上,这里使用常见的墨卡托投影。投影方式千奇百怪,世界中心到底在哪,有兴趣的同学可以看一看

var projection = d3.geo.mercator()

添加一个map,根据我到过的省份频次给不同区块上色。

然后添加了简单的交互,类似刮刮乐,鼠标扫过便能揭开真相!

实战四 Chord Diagram

Model-View-Controller

Live Example: wurui.cc

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