threejs 热力图做成材质_D3.js数据可视化（一）——绘制热图（heat map）

二维标量可视化

1. 实验名称

二维标量的可视化。

2. 实验目的

使用d3以及提供的NBA篮球上个赛季的数据(basketball statics.xlsx)，绘制一个热图(heat map)。

3. 技术基础

Web, HTML, DOM, CSS, JavaScript, SVG。

核心技术为D3 —— Data-Driven Documents(数据驱动的文档)。数据来源于你，而文档就是基于Web的文档(或者网页)，代表可以在浏览器中展现的一切，比如HTML，SVG。D3扮演的是一个驱动程序的角色，因为它联系着数据和文档。

4. 步骤

4.1 配置web服务器

使用windows集成软件包xxamp，下载后安装即可。XAMPP(Apache+MySQL+PHP+PERL，主要使用Apache)安装后，其安装目录中htdocs文件夹即为自己的项目文件存放地址。为使目录更清晰，再在htdocs文件夹中新建一个projects文件夹，把所有项目都放进projects文件夹。

4.2 下载安装D3

从http://d3js.org/ 下载d3源码，在projects文件夹中新建一个文件夹，叫做lab_1，在lab_1中新建一个文件夹，叫做d3，另外在lab_1中新建一个文本文档，命名为index.html。下载的d3源码d3.v3.js放入d3文件夹。

4.3 编写代码

index.html

}text.mono{font-size:9pt;font-family:Consolas, courier;fill:#000;

}text.axis-workweek{fill:#000;

}text.axis-worktime{fill:#000;

}