(一)D3简介

一、D3是什么

一张图片价值相当于一千个字

D3的全称是 Data-Driven Documents,直译为:数据驱动的文档

D3是一个javaScript的函数库,是用来做数据可视化的。

文档指DOM,即文档对象模型(Document Object Model)

D3允许用户绑定任意数据到DOM,然后根据数据来操作文档,创建可交互式的图表。

二、D3的优势

1. 数据能够与DOM绑定在一起

可以方便的根据数据进行操作,并且当数据更改之后,图形的更新也会很方便。

2. 数据转换和绘制是独立的

D3的做法,提供一个函数computePie(),可将数据转换成饼状图的数据,

然后开发者使用自己喜欢的方式来绘制饼状图。

3. 代码简洁

4.大量布局

5. 基于SVG,缩放不会损失精度

三、D3的适用范围

Ben Fry 《Visualizing Data》中将数据可视化的过程分为7个步骤

1、获取 Acquire

2、分析 Parse

3、过滤 Filter

4、挖掘 Mine

5、表现 Represent

6、改善 Refine

7、交互 Interact

(二)数据可视化是什么

数据可视化 Data Visualization

一、目的

数据可视化的目的,是要对数据进行可视化处理,以使得能够明确的地、有效地传递信息。

比起枯燥乏味的数值,人类对于大小、位置、浓淡、颜色、形状等能够有更好、更快的认识。经过可视化之后的数据能够加深人对于数据的理解和记忆。

二、构成要素

坐标:直角坐标系、极坐标系

大小:

色彩:

标签:

关联:

数据可视化是对数字信息进行可视化,信息可视化是对数字信息和非数字信息进行可视化。

三、图表种类

1、柱形图

2、散点图

散点图使用三维数据集,x轴 y轴 点

3、折线图

4、饼状图

5、弦图 :节点之间的联系

6、力导向图

7、树状图

8、打包图

9、分区图

D3简介的更多相关文章

  1. D3笔记01——D3简介与安装

    1 D3简介 发布于2011年,全称Data-Driven Documents,直译为“数据驱动的文档”. 简单概括为一句话:D3是一个Javascript的函数库,是用来做数据可视化的.文档指DOM ...

  2. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  3. D3 学习

    D3 学习笔记 D3简介 D3全称是Data-Driven Documents数据驱动文档,是一个开源的javascript库,可以用于数据可视化图形的创建,但不仅仅只是这些.可以查看d3帮助文档还有 ...

  4. D3.js 之 d3-shap 简介(转)

    [转] D3.js 之 d3-shap 简介 译者注 原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape 译者: ssthouse 联系译者: 邮箱 ...

  5. D3.js 简介和安装

    一.What´s D3.js D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. D3 的全称是(Data-Dri ...

  6. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  7. D3基础---简介和数据

    D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. d3获取:http://d3js.org/ 在代码文件中引入D ...

  8. 【 D3.js 入门系列 --- 0 】 简介及安装

    家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

  9. 转载:TypeScript 简介与《TypeScript 中文入门教程》

    简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...

  10. svg + d3

    为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...

随机推荐

  1. vue的异步组件

    异步组件 异步组件:可以在首页加载之前先加载的组件,主要是做性能优化,提高用户体验 一.基本用法 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件.Vue 提供了 de ...

  2. ArcGIS Pro SDK 002 对数据文件的读取和操作

    做系统开发或者数据处理的时候,我一般还是喜欢使用文件数据源,例如矢量用.shp文件存储,栅格数据用.tif或者.img文件存储.ArcGIS Pro SDK中对数据源操作的API和ArcObjects ...

  3. 任何人均可上手的数据库与API搭建平台

    编写API可能对于很多后端开发人员来说,并不是什么难事儿,但如果您主要从事前端功能,那么可能还是有一些门槛. 那么有没有工具可以帮助我们降低编写API的学习门槛和复杂度呢? 今天就来给大家推荐一个不错 ...

  4. 计算属性报错:Maximum recursive updates exceeded.

    计算属性或普通函数中有对相关依赖的响应式数据进行一次以上的更新就可能导致达到最大执行的限制: const calcSurplus = computed(() => (k: string) =&g ...

  5. 一次线上OOM问题分析

    现象 线上某个服务有接口非常慢,通过监控链路查看发现,中间的 GAP 时间非常大,实际接口并没有消耗很多时间,并且在那段时间里有很多这样的请求. 原因分析 先从监控链路分析了一波,发现请求是已经打到服 ...

  6. 后台Mysql存储过程调用

    https://blog.csdn.net/weixin_43695211/article/details/127883536

  7. MessageUtil

    1 public abstract class MessageUtil { 2 3 public static String changeMsg(CustomerReportQueryObject q ...

  8. Java实现简单薪水计算器相关操作代码

    /** * 薪水计算器 * 1.通过键盘输入用户的月薪,每年是几个薪水 * 2.输出用户年薪 * 3.输出一行字"如果年薪超过10万,恭喜你超越了90%的国人:如果年薪超过了20万,恭喜你超 ...

  9. Transformers Pipelines

    pipelines 是使用模型进行推理的一种很好且简单的方法.这些pipelines 是从库中抽象出大部分复杂代码的对象,提供了一个简单的API,专门用于多个任务,包括命名实体识别.屏蔽语言建模.情感 ...

  10. QT 连接SQLIte数据库

    1.新建一个qt应用程序 2.在.pro文件中添加 sql     (下图,可以查看使用方法) 添加结构查看: 3.开始连接数据库 4.运行结果查看: 5.查看数据库文件: 6.使用可视化工具创建一个 ...