数据可视化与D3.js

数据可视化

数据可视化是如何把数据更好的展现出来的一个课题,在大数据出现后,它变得更为重要和迫切。

以前使用excel进行柱状图、饼状图、折线图等是最常用的数据可视化手段之一,而在WEB端,使用流行的extjs、fusioncharts、jfreechart,或者相对不太流行的amchart、highcharts、Bootstrap里的charts、jquery的一些插件等等都可以实现饼状图等的展示。

然而我这里说的数据可视化并不是这种传统的、简单的图形,而是更为复杂,能够在有限的空间里展示更多的数据信息,尤其是针对大数据的更好展现。比如treemap1就是一个例子。传统实现树形数据结构的展示都会通过一棵树,比如extjs里的树形组件,而treemap通过一个个矩形,加以不同的切分、不同的颜色实现更多信息的展示。

数据可视化的WEB技术

数据可视化的技术有很多,但这里只讨论WEB端的,所以excel即使它现在或以后能实现多牛叉的数据可视化,本文也先不讨论。

如今流行的WEB数据可视化技术有D3.jstableau等等很多。D3有非常多的可视化图形,多得都看不过来。具体可见D3-Example。而tableau除了对treemap等的支持外,对地图的支持尤为突出。具体可见tableau-gallery

其实,只要能把数据通过图形化展示,都可以称为数据可视化。但是我这里划分为两类是为了更好的区分老一代数据可视化和在大数据背景下新的数据可视化技术。比如在下面这篇文章中:

30个最好的数据可视化工具推荐

Extjs和d3js都是数据可视化工具。但是我认为,extjs更倾向于js组件库,而数据的图形化只是它的其中一个功能,所以也不太会面面俱到,只提供基本的图形即可。而D3则不同,它是专门针对数据可视化的,除了常见的图形,它更专注于如何更好的进行数据可视化。

下面重点介绍D3的入门使用。

D3.js入门

如何下载

官方网站

在首页下载d3.zip,目前的版本是3.5.5(在d3..js文件的第3行可看见)。解压后只有三个文件:

  • d3.js
  • d3.min.js
  • LICENSE

查看Example

点击首页的上方的Example。根据example里的源文件,可以快速做出一个helloword的例子。如果不使用服务器的情况下,建议使用Firefox浏览器,我亲自测试使用chrome和ie并不成功。

查看中文文档

学习一个新技术,除了源代码(d3.js),文档绝对是最重要的。

Wiki中文链接

第一个例子

我姑且称为helloword吧。其实就是example里的第一个例子-box plots。打开链接:

http://bl.ocks.org/mbostock/4061502#morley.csv

根据里面的说明创建3个文件:

  • index.html
  • box.js
  • morley.csv

直接用火狐(我的版本是Mozilla Firefox35.0.1)打开index.html即可。其他浏览器最好先部署个服务器才能打开。否则会在d3.csv、d3.json等代码行报错:

? Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

参考

推荐一个很好的d3.js中文网,基本我遇到的大部分初级问题,都在这里找解答。

- ourd3js

推荐几篇文章:

本文出自:ouyida3的csdn博客

2015.5.19


  1. 如果不知道treemap是什么,可通过D3.js对treemap的一个实现大概看看treemap的模样。 ?
时间: 2024-10-07 03:15:33

数据可视化与D3.js的相关文章

d3.js:数据可视化利器之快速入门

hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,34,71]; 简单地思考一下,要完成这个任务有两个问题需要解决: 用什么可视元素来表现横向柱? 数据对应到可视元素的什么属性? 这个不算困难,我们使用HTML的DIV元素来实现,代码参见http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/:快速

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu

【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: [html] view plain copy <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: [html] view plain copy var set = ["I like dog","I like

前端数据可视化

原文 在大数据时代,很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,开发人员很多时候需要使用图表来表现一些数据.随着Web技术的发展,从传统只能依靠于flash.IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas.svg为代表的html5技术,表现点.线.面要素的技术已经越来越规范成熟.我把前端数据可视化分为了五种:1.图表2.图谱3.地图4.关系图5.立体图我将按照顺序介绍62款前端可视化插件,下面就分享下34款图表插件:1.amchartsurl:

基于HTML5的数据可视化实现方法解读

现在在大数据的带领下,数据可视化越来越突出,能够清楚的分析出自己想要的数据,这也是我们现在最求的数据可视化方法,那么实现HTML5的数据可视化方法有哪些?这都是我们值得研究的东西,数据可以给我们带来敏感的市场未来发展,同时也能够实时分别不同数据效果. HTML5为数据可视化提供了新的实现方法.本文对HTML5在健康数据可视化在PC及部分移动终端上的应用进行研究.使用HTML5中的Canvas和SVG实现的数据可视化方法基于浏览器的支持,具有很好的平台兼容性 可视化(Visualization)是

python数据可视化、数据挖掘、机器学习、深度学习 常用库、IDE等

一.可视化方法 条形图 饼图 箱线图(箱型图) 气泡图 直方图 核密度估计(KDE)图 线面图 网络图 散点图 树状图 小提琴图 方形图 三维图 二.交互式工具 Ipython.Ipython notebook Plotly 三.Python IDE类型 PyCharm,指定了基于Java Swing的用户界面 PyDev,基于SWT的用户界面(适用Eclipse) IEP(Interactive Editor for Pyhton),交互式编辑器 Enthought中的Canopy:以PyQt

[资料搜集狂]D3.js数据可视化开发库

偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d3js.org/ 中文资料:http://www.ourd3js.com/ C3.js是一个基于D3.js的图表库. https://github.com/masayuki0812/c3 http://c3js.org/ 附:

前端编程提高之旅(八)----D3.js数据可视化data join解析

   D3.js作为一门轻型的可视化类库,非常便于将数据与web界面元素绑定,实现可视化.乐帝d3.js入门是大体看了一遍<d3js数据可视化实战>这本书,D3操作非常类似于jquery的使用,具体体现在两点: 选择器模块都采用CSS3标准 方法可以链式调用    有了jquery使用基础,相信再加上以上书籍的例子,调试很容易上手使用D3.js,乐帝目前认为D3.js与jquery区别在于:D3.js独有的数据结构概念及对SVG操作方便的实现.而深入理解D3原理,以上皮毛的理解就不够用了.  

D3.js数据可视化(二)——绘制弦图(Chord Layout)

树图网可视化实验 1. 实验要求 要求通过树,或者图.网的可视化聚类,分析某个公司的邮件社交网络.根据要求设计可视化方案,并利用D3工具实现可视化效果. 2. 过程 2.1. 可视化方案的设计思路 2.1.1. 可视化要求 1) 可视化该邮件社交网络. 2) 该可视化中的每个Edge都对应着一个权重(Emails per month或者weight),要求将该权重属性映射到一个图形化的属性,比如,color,types of line,size or shapes. 3) 可视化方案中要体现每个