d3.js 简介和安装
最近一直在做大数据可视化方面的事,想着,把目前比较流行的可视化开源项目也学习一下,于是,打算花点时间写几个d3的例子,也算是一个入门级的学习,废话不多说,首先介绍一下d3,后面我们直接看例子。
D3 是什么
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。如果你不知道什么是 JavaScript ,请先学习一点 JavaScript 的基础知识。
JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。
为什么要数据可视化
现在有一组数据, 【 4 , 32 , 15 , 16 , 42 , 25 】 ,你能一眼看出它们的大小关系吗?当然这里的数据不算多,有那眼疾手快的家伙站出来说我能一眼看出来!但更直观的是用图形显示,如下图:
通过图形的显示,能很清楚地知道他们的大小关系。当然,D3 能力远不止如此,这只是一个很小的应用。把枯燥乏味复杂的数据,用简单明了的图形表示出来,这就是数据可视化。
D3 有多受欢迎
D3 是一个开源项目,作者是纽约时报的工程师。D3 项目的代码托管于 GitHub(一个开发管理平台,目前已经是全世界最流行的代码托管平台,云集了来自世界各地的优秀工程师)。
在 GitHub 上最受关注的项目有哪些呢?
JQuery 的名声够大了,但排名第 6,D3 却排名第 5。
如何学习和使用 D3
以下是几个学习 D3 的站点:
- 官方网站
http://d3js.org/
包含有很多示例和 API,要想得心应手的使用 D3,熟悉 API 是避不开的。
- Mike Bostock 的博客和作品展示板
http://bost.ocks.org/mike/
- OUR D3.JS 数据可视化专题站
http://www.ourd3js.com/
笔者开设的站点,包含有 D3 的一系列教程。
D3 是一个 JavaScript 函数库,并不需要通常所说的“安装”。它只有一个文件,在 HTML 中引用即可。有两种方法:
(1)下载 D3.js 的文件
- d3.zip
解压后,在 HTML 文件中包含相关的 js 文件即可。
(2)直接包含网络的链接
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
这种方法比较简单,但要保持网络连接有效。
学习 D3 需要什么预备知识
想要通过 D3 来开启数据可视化之旅的朋友,需要什么预备知识呢?
- HTML:超文本标记语言,用于设定网页的内容
- CSS:层叠样式表,用于设定网页的样式
- JavaScript:一种直译式脚本语言,用于设定网页的行为
- DOM:文档对象模型,用于修改文档的内容和结构
- SVG:可缩放矢量图形,用于绘制可视化的图形
路人甲:额,我需要学那么多才能开始学 D3 吗?心理压力有点点...大
馒头华华:不必,完全可以直接学 D3,遇到不明白的地方,再看相关内容即可
路人乙:HTML、CSS 啥的,我从来都没用过,也没有关系吗?
馒头华华:只要在 W3School ,分别看看这几个词是什么意思,是用来干什么的,再看几个简单例子即可,没有必要全掌握了再学习 D3。
需要什么工具
制作网页常用的工具即可。
记事本软件:Notepad++、Editplus、Sublime Text 等,选择自己喜欢的即可。
浏览器:IE9 以上、Firefox、Chrome 等,推荐用 Chrome
服务器软件:Apache、Tomcat 等
其中,服务器软件可能不是必须的,不过 D3 中有些函数需要将 HTML 文件放置于服务器目录下,才能正常使用,关于这点以后会再做说明。
好了,可以开始你的 D3 之旅了。祝你好运。
d3.js 简介和安装相关推荐
- Node.js简介、安装Node.js、ES6中的模块
一.Node.js简介 1. Node是什么 1)浏览器内核有两个引擎:渲染引擎(渲染html.css).JavaScript引擎(运行JavaScript代码) 2)Node是独立于浏览器的Java ...
- D3.js可视化库入门视频教程
2019独角兽企业重金招聘Python工程师标准>>> D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定任意数据到DOM,然后将数据驱动转换应用到Documen ...
- d3.js入门-01简介、安装
D3简介: d3是一款优秀的数据可视化工具,可以帮助我们创建较为复杂的可视化.拖拽.缩放 的数据视图. 他的优点: D3.js是一个开源项目,无需任何插件即可运行.它需要非常少的代码并提供以下好处和减 ...
- 《D3.js数据可视化实战手册》—— 1.1 简介
本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第1章,第1.1节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
- 3、Spark 和 D3.js 分析航班大数据
实验资源 1998.csv airports.csv 实验环境 VMware Workstation Ubuntu 16.04 spark-2.4.5 scala-2.12.10 实验内容 " ...
- D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
- D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
- Py之folium:python库之folium的简介、安装、使用方法之详细攻略
Py之folium:python库之folium的简介.安装.使用方法之详细攻略 目录 folium的简介 folium的安装 folium的使用方法 folium的简介 Folium是建立在Pyth ...
- Py之dominate:python的dominate库的简介、安装、使用方法之详细攻略
Py之dominate:python的dominate库的简介.安装.使用方法之详细攻略 目录 dominate库的简介 dominate库的安装 dominate库的使用方法 dominate库的简 ...
最新文章
- 【转】C#格式化字符串
- 怎样远程连接服务器后上传文件,远程登录服务器后怎样上传文件
- Github标星66.6k+:常见数据结构与算法的Python实现
- 吃豆豆游戏的C语言程序码,C++实现基于控制台界面的吃豆子游戏
- Docker相关概念与安装(Docker-CE)
- 【网上收藏】取得网卡mac
- ssm中java实现树状结构_java ssm使用递归写树形结构
- 指令数据采集(五)--指令的条件的执行判断
- JS关于辅助函数inherit()的小问题
- HP Socket HttpServer使用
- NIOSII 安装问题汇总
- 缓存的CachePut 冲突 Cacheable
- 一条线 理解SSH登录前因后果
- camera Intrinsic and Extrinsic
- 唤醒时间过长 Android,关于android:功耗问题之过多唤醒源-wakeups
- 光伏发电站远程监测无线解决方案,时刻保持电力十足
- WinForm 子窗体在父窗体范围内移动,不能出父窗体
- 编写西游记人物类(XiYouJiRenWu)
- JAVA的String、StringBuilder、StringBuffer、包装类、日期Date类、枚举类(Enumeration)
- 程序员的下一个风口——永远是不断自我学习,自我思考提升!
热门文章
- 蓝桥杯 试题 基础练习 十六进制转十进制——5行代码AC
- n阶自相关matlab代码,随机信号及其自相关函数和功率谱密度的MATLAB实现.doc
- php 接口说明文档,phpwind文章中心接口说明
- 事件驱动java实现_基于spring实现事件驱动
- C语言 十六进制整数字符串转十进制整数
- Source Insight 使用教程(1)——新建项目
- Mac OS X 中快速访问系统根目录的四种方法
- range函数python3_Python3如何使用range函数替代xrange函数
- java中主函数抛出的异常怎么解决_java – 从递归函数中抛出异常
- python如何让图片镜像翻转_98后常春藤学霸林之秋,一作拿下CVPR最佳论文提名,首次挑战图片翻转不变性假设...