学习d3.js进行数据可视化

时间:2012-08-19 08:58:36

标签: javascript d3.js

我想开始学习使用D3.js包来进行数据可视化(作为我博士的副项目)。我没有java - 经验,但我确实有OOP背景,因为我主要在python工作。因此,我想知道什么是学习使用d3的最佳方式,以及可以推荐我的环境。

6 个答案:

答案 0 :(得分:37)

Scott Murray的教程是一个很好的起点:http://alignedleft.com/tutorials/d3/

关于环境,您可能会发现这很有用:http://tributary.io。它是一个交互式编码编辑器,旨在帮助您学习d3。

答案 1 :(得分:22)

自从我最近发现它以来,我建议您使用http://phrogz.net/js/d3-playground/和沙盒进行试用,并了解这些碎片如何协同工作。

答案 2 :(得分:8)

Scott Murrays网站是一个良好的开端http://alignedleft.com/tutorials/d3/

完成后,我可能会建议你看一下这个网站http://techslides.com/over-1000-d3-js-examples-and-demos/,它列出了1000个d3的例子。您通常可以复制javascript数据和代码,并在您自己的计算机上本地使用它。

您也可以尝试拍摄其中一个图,看看是否可以重建它。

我之所以发现它有用,是因为您需要能够识别d3引发的错误。这是你不知道为什么会有一个麻烦的错误的时刻。通过一个你正在重建的例子,你可以保证自己有一份代码的副本,这样你就可以更容易地纠正自己。

答案 3 :(得分:3)

我为初学者写了一些教程,以学习 Javascript和数据可视化

http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/ http://blog.vida.io/2014/06/23/coding-visualization-tutorial-2-functions/

我发现wiki的前四个教程对于学习 D3基础知识非常有用:

https://github.com/mbostock/d3/wiki/Tutorials

简介,三个小圈子,连接思考,选择如何工作。

我的团队运行https://vida.io。我们对d3使用模板方法,允许用户快速创建工作文档,上传新数据,并通过GUI编辑器将数据绑定到文档。查看示例开始:

https://vida.io/explore

答案 4 :(得分:2)

这是我用来学习d3js的资源列表。对于刚接触Web开发的人来说,官方网站可能有点压倒性,所以这里还有一些:

<强>教程

  • 官方D3js网站有一个很好的示例和教程列表here
  • Square在here
  • 上有快速介绍D3
  • Christophe Viau有一个很好的单页介绍here
  • Jerome Cukier在D3中的“Hello World”,其中详细介绍了如何设置环境here
  • Scott Murray(alignedleft)解释得非常好。他也是“互动数据可视化”的作者,我强烈推荐。教程here

<强>参考

  • 你会看到很多不同的d3功能,并想知道他们做了什么。使用官方API here

答案 5 :(得分:0)

我已经阅读了许多d3.js教程,发现它们令人困惑。当一个人还不熟悉HTML和CSS时,他们需要对细节进行更多解释。 NRecursions中更好地呈现了这些细节:
第1部分:http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html
第2部分:http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html