使用D3.js进行数据可视化

D3.js介绍

  D3.js是一个流行的JavaScript数据可视化库,全称为Data-Driven Documents,即数据驱动文档。它以数据为核心,通过数据来驱动文档的展示和操作。D3.js提供了丰富的API和工具,使得开发者能够创建出各种交互式和动态的数据可视化效果。

官方介绍网站:What is D3? | D3 by Observable

D3.js导入方式介绍

  在JavaScript中导入D3.js通常使用ESM+CDN、UMD+CDN和UMD+local这三种方式,其中:ESM (ES Modules):ESM是ECMAScript模块(ECMAScript Modules)的缩写,也被称为ES6模块,是JavaScript官方的模块化方案。它使用importexport语句进行模块的导入和导出,支持静态导入和动态导入。

CDN (Content Delivery Network):CDN即内容分发网络,是一种通过分布在多个地理位置的服务器来快速、有效地向用户分发内容的网络服务。使用CDN可以加快资源的加载速度,提高用户体验。

UMD (Universal Module Definition):UMD是一种通用的模块定义方式,旨在使JavaScript库或模块能够在多种环境中使用,包括浏览器全局变量方式、AMD环境和CommonJS环境(如Node.js)。UMD允许库或模块在各种不同的JavaScript模块加载器和环境中运行。

local:将JavaScript库或模块直接保存在本地项目中,而不是从外部CDN或其他远程位置加载。

D3.js导入方式1:ESM+CDN

D3.js导入方式2:UMD+CDN 

 D3.js导入方式3:UMD+local

D3.js文件官方下载地址:Getting started | D3 by Observable

使用D3.js进行数据可视化_第1张图片

使用D3.js绘制柱形图
  
  
  
      
    GGBoy  
      
  
  
      
  

使用D3.js进行数据可视化_第2张图片

 使用D3.js绘制曲线图
  
  
  
    GGBoy  
  
  
    

使用D3.js进行数据可视化_第3张图片

 使用D3.js实现网页时钟
  
  
  
      
      
    GGBoy  
      
      
  
  
     
      
  

使用D3.js进行数据可视化_第4张图片

你可能感兴趣的:(信息可视化,前端框架,javascript,开发语言)