用 D3.js 画一个 bubble chart

在展示 GO 富集分析的结果的时候经常会使用 bubble chart, 因为它的信息量相对来说比较大,bubble 的位置(x, y) ,大小和颜色, 每个属性都可以用来展示数据的某一维度信息。

比方说,我可以这样建立数据到图形属性的映射关系:

1
2
3
4
Gene ratio -> x
GO item name -> y
-log2(Pvalue) -> size
mean log2(FoldChange) -> color

可以通过这四个属性把我想展示的 GO 富集的结果信息都放在一张图上。

为了学习 D3.js 试用它来做了一个 bubble char。

做出来的效果是这样的:

具体的代码放到了这个 repo 里面, 我的 JS 写的比较烂。。但感兴趣的话还是可以看看。

D3.js 非常强大的绘图库,可以创建具有强动态效果的交互式 网页 SVG 图像。 交互式图像可以说是未来数据绘图的一种趋势, 而且用这种 html 模板渲染 D3.js 做图表的方式, 非常适合用来做生信软件或者 pipeline 的报告。 虽然现在也有一些其他语言的绘图库也可以做这类事情, 比如 Python 的 Plotly、Bokeh、Pygal 等等, 但总体来看,这些包还是不如 D3.js 强大、灵活。 所以 D3.js 还是非常值得研究一下的。