javascript代码实例教程-数据可视化与D3.js

发布时间:2019-01-18 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-数据可视化与D3.js脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

数据可视化

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

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

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

数据可视化的WEB技

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

如今流行的WEB数据可视化技术有D3.js和tableau等等很多。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并不成功。

javascript代码实例教程-数据可视化与D3.js

查看中文文档

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

第一个例子

我姑且称为helloword吧。其实就是example里的第一个例子-box plots。打开链接:
https://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

javascript代码实例教程-数据可视化与D3.js

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-数据可视化与D3.js全部内容,希望文章能够帮你解决javascript代码实例教程-数据可视化与D3.js所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。