1.D3加载数据的方法
D3提供了方法可以对不同的数据类型进行加载，比如d3.text(), d3.xml(), d3.json(), d3.csv(), d3.tsv()和d3.html().
index.html
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3
4 <script src="https://d3js.org/d3.v4.min.js"></script>
5 <script>
6 d3.tsv("nemployment.tsv", data => {
7
8 console.log(data)
9
10 });
11
12 d3.csv("nemployment.csv", data => {
13
14 console.log(data)
15
16 });
17 </script>
18 </body>
19
20 </html>
nemployment.tsv
name 2000-01 2000-02 2000-03 2000-04 2000-05 2000-06 2000-07 2000-08 2000-09 2000-10 2000-11 2000-12 2001-01 2001-02 2001-03 2001-04 2001-05 2001-06 2001-07 2001-08 2001-09 2001-10 2001-11 2001-12 2002-01 2002-02 2002-03 2002-04 2002-05 2002-06 2002-07 2002-08 2002-09 2002-10 2002-11 2002-12 2003-01 2003-02 2003-03 2003-04 2003-05 2003-06 2003-07 2003-08 2003-09 2003-10 2003-11 2003-12 2004-01 2004-02 2004-03 2004-04 2004-05 2004-06 2004-07 2004-08 2004-09 2004-10 2004-11 2004-12 2005-01 2005-02 2005-03 2005-04 2005-05 2005-06 2005-07 2005-08 2005-09 2005-10 2005-11 2005-12 2006-01 2006-02 2006-03 2006-04 2006-05 2006-06 2006-07 2006-08 2006-09 2006-10 2006-11 2006-12 2007-01 2007-02 2007-03 2007-04 2007-05 2007-06 2007-07 2007-08 2007-09 2007-10 2007-11 2007-12 2008-01 2008-02 2008-03 2008-04 2008-05 2008-06 2008-07 2008-08 2008-09 2008-10 2008-11 2008-12 2009-01 2009-02 2009-03 2009-04 2009-05 2009-06 2009-07 2009-08 2009-09 2009-10 2009-11 2009-12 2010-01 2010-02 2010-03 2010-04 2010-05 2010-06 2010-07 2010-08 2010-09 2010-10 2010-11 2010-12 2011-01 2011-02 2011-03 2011-04 2011-05 2011-06 2011-07 2011-08 2011-09 2011-10 2011-11 2011-12 2012-01 2012-02 2012-03 2012-04 2012-05 2012-06 2012-07 2012-08 2012-09 2012-10 2012-11 2012-12 2013-01 2013-02 2013-03 2013-04 2013-05 2013-06 2013-07 2013-08 2013-09 2013-10
Bethesda-Rockville-Frederick, MD Met Div 2.6 2.6 2.6 2.6 2.7 2.7 2.7 2.6 2.6 2.6 2.6 2.6 2.7 2.7 2.8 2.8 2.9 3 3.1 3.3 3.4 3.5 3.5 3.6 3.6 3.6 3.6 3.6 3.6 3.5 3.5 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.3 3.3 3.3 3.3 3.3 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.3 3.3 3.3 3.3 3.2 3.2 3.1 3.1 3 3 3 2.9 2.9 2.8 2.8 2.8 2.8 2.9 3 3 3 2.9 2.9 2.9 2.9 2.8 2.8 2.7 2.7 2.6 2.6 2.6 2.6 2.6 2.6 2.6 2.5 2.5 2.6 2.7 2.8 2.9 3.1 3.2 3.4 3.6 3.9 4.2 4.5 4.9 5.2 5.5 5.7 5.8 5.9 6 6 6.1 6.2 6.2 6.3 6.3 6.3 6.2 6.1 6 5.9 5.9 5.9 5.9 5.9 5.8 5.8 5.7 5.6 5.5 5.5 5.5 5.6 5.6 5.6 5.6 5.5 5.4 5.4 5.3 5.3 5.3 5.3 5.3 5.3 5.3 5.3 5.2 5.2 5.2 5.2 5.2 5.2 5.1 5.2 5.3 5.5 5.5 5.3 5.2 5.2
Boston-Cambridge-Quincy, MA NECTA Div 2.7 2.6 2.6 2.5 2.4 2.4 2.3 2.3 2.3 2.3 2.3 2.4 2.5 2.6 2.8 2.9 3 3.2 3.4 3.6 3.8 4 4.2 4.4 4.6 4.7 4.8 4.9 4.9 5 5 5 5.1 5.1 5.2 5.2 5.3 5.3 5.4 5.4 5.5 5.6 5.6 5.6 5.5 5.4 5.3 5.2 5.1 5.1 5 4.9 4.9 4.8 4.7 4.6 4.5 4.5 4.4 4.4 4.4 4.4 4.4 4.3 4.3 4.2 4.2 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.2 4.2 4.2 4.2 4.1 4.1 4.1 4 4 3.9 3.9 3.9 3.9 3.9 3.9 3.9 3.9 3.9 4 4.1 4.2 4.3 4.5 4.7 4.8 5 5.3 5.6 5.9 6.2 6.5 6.7 6.9 7.1 7.3 7.4 7.5 7.6 7.6 7.6 7.6 7.6 7.5 7.5 7.4 7.3 7.2 7.1 7 7 6.9 6.9 6.8 6.6 6.5 6.4 6.3 6.3 6.2 6.2 6.1 6.1 6 5.9 5.8 5.7 5.7 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.5 5.4 5.5 5.6 5.9 6 6 5.9 6
Boston-Cambridge-Quincy, MA-NH Met NECTA 2.8 2.7 2.7 2.6 2.6 2.5 2.5 2.5 2.4 2.4 2.5 2.5 2.6 2.8 2.9 3.1 3.2 3.4 3.6 3.8 4.1 4.3 4.5 4.7 4.9 5 5.1 5.2 5.2 5.3 5.3 5.4 5.4 5.5 5.5 5.5 5.6 5.6 5.6 5.7 5.8 5.8 5.9 5.8 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.2 5.1 5 4.9 4.9 4.8 4.7 4.7 4.6 4.6 4.6 4.6 4.5 4.5 4.4 4.4 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.4 4.4 4.4 4.4 4.4 4.3 4.3 4.2 4.2 4.2 4.1 4.1 4.1 4.1 4.1 4.1 4.1 4.1 4.1 4.2 4.3 4.4 4.5 4.7 4.9 5.1 5.3 5.5 5.8 6.1 6.5 6.8 7.1 7.3 7.5 7.7 7.8 7.9 8 8 8 8 8 7.9 7.9 7.8 7.6 7.5 7.4 7.3 7.3 7.2 7.2 7.1 6.9 6.8 6.8 6.7 6.6 6.6 6.6 6.5 6.5 6.4 6.3 6.2 6.1 6.1 6.1 6 6 6.1 6.1 6.1 6.1 6.1 6.1 6.1 6.1 5.9 5.9 5.9 6 6.3 6.3 6.3 6.2 6.3
Brockton-Bridgewater-Easton, MA NECTA Div 3 3 2.9 2.9 2.8 2.8 2.8 2.8 2.8 2.8 2.9 2.9 3.1 3.2 3.3 3.4 3.5 3.6 3.8 3.9 4.1 4.3 4.4 4.6 4.8 4.9 5 5.1 5.2 5.3 5.3 5.4 5.4 5.5 5.6 5.6 5.7 5.8 5.9 6 6.1 6.2 6.2 6.3 6.2 6.2 6.1 6.1 6 5.9 5.9 5.9 5.8 5.7 5.7 5.6 5.5 5.5 5.4 5.4 5.4 5.3 5.3 5.3 5.2 5.2 5.2 5.3 5.3 5.4 5.3 5.3 5.3 5.2 5.2 5.3 5.3 5.3 5.4 5.3 5.3 5.3 5.3 5.2 5.2 5.1 5.1 5.1 5 5 5 5 5 5.1 5.1 5.1 5.2 5.2 5.3 5.4 5.6 5.8 6 6.2 6.5 6.8 7.1 7.5 7.9 8.2 8.5 8.7 8.9 9.1 9.3 9.5 9.6 9.7 9.8 9.9 9.9 9.9 9.9 9.8 9.6 9.5 9.4 9.4 9.3 9.3 9.2 9.1 9 8.8 8.7 8.6 8.5 8.5 8.4 8.4 8.3 8.2 8.1 7.9 7.8 7.7 7.7 7.7 7.7 7.7 7.7 7.6 7.5 7.5 7.5 7.4 7.4 7.2 7.1 7.2 7.4 7.8 7.9 7.9 7.7 7.8
Camden, NJ Met Div 3.6 3.6 3.5 3.5 3.4 3.4 3.5 3.5 3.6 3.6 3.6 3.5 3.5 3.5 3.5 3.6 3.7 3.8 3.9 4.1 4.3 4.5 4.6 4.8 5 5.1 5.2 5.3 5.4 5.4 5.4 5.4 5.5 5.5 5.5 5.6 5.6 5.6 5.5 5.6 5.6 5.6 5.6 5.5 5.4 5.3 5.2 5.2 5.1 5.1 5 5 4.9 4.8 4.7 4.6 4.5 4.4 4.4 4.3 4.3 4.3 4.2 4.2 4.2 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.7 4.7 4.7 4.8 4.8 4.9 4.8 4.8 4.7 4.6 4.5 4.4 4.3 4.3 4.2 4.2 4.3 4.3 4.3 4.4 4.4 4.5 4.6 4.7 4.7 4.8 4.8 4.9 5.1 5.2 5.4 5.7 5.9 6.3 6.7 7.1 7.6 8 8.4 8.7 9 9.2 9.4 9.6 9.7 9.9 10 10.1 10.2 10.2 10.2 10.1 10 10 9.9 9.9 10 10 10 10 9.9 9.8 9.7 9.7 9.7 9.8 9.8 9.9 9.8 9.8 9.7 9.7 9.6 9.7 9.8 9.9 10 10 10.1 10.1 10.1 10.1 10.1 10.1 9.9 9.7 9.4 9.1 9 9 8.8 8.7 8.7 8.6
Chicago-Joliet-Naperville, IL Met Div 4.4 4.4 4.4 4.4 4.5 4.5 4.5 4.5 4.5 4.5 4.7 4.9 5.1 5.3 5.4 5.4 5.4 5.4 5.5 5.6 5.8 6 6.2 6.4 6.6 6.7 6.8 6.9 7 7 7 7 7 7 7 6.9 6.9 6.8 6.8 6.9 7 7.1 7.2 7.2 7.1 7 6.8 6.6 6.5 6.4 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.2 6.2 6.1 6 5.8 5.7 5.5 5.3 5.1 4.9 4.7 4.5 4.5 4.4 4.4 4.3 4.2 4.2 4.2 4.3 4.3 4.4 4.6 4.7 4.8 4.9 5 5.1 5.1 5.2 5.2 5.2 5.2 5.3 5.4 5.6 5.9 6.1 6.3 6.4 6.5 6.9 7.1 7.4 7.9 8.5 9.1 9.5 9.9 10.2 10.4 10.7 10.9 11.1 11.2 11.3 11.2 11.1 10.9 10.7 10.5 10.4 10.2 10.1 10 9.9 9.7 9.5 9.4 9.3 9.4 9.6 9.8 10.2 10.4 10.5 10.5 10.3 9.9 9.5 9.2 8.9 8.8 8.7 8.8 8.9 8.9 8.9 8.9 8.9 8.9 8.9 9 9.4 9.5 9.4 9.3 9.4 9.4 9.4 9.3 9.1
Chicago-Joliet-Naperville, IL-IN-WI MSA 4.1 4.2 4.2 4.2 4.3 4.3 4.3 4.4 4.4 4.5 4.6 4.7 4.9 5 5.1 5.1 5.2 5.2 5.3 5.5 5.7 5.9 6.1 6.3 6.5 6.6 6.7 6.7 6.8 6.8 6.8 6.8 6.8 6.8 6.8 6.7 6.7 6.7 6.6 6.7 6.8 6.9 7 7 6.9 6.8 6.7 6.5 6.4 6.3 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.1 6.1 6.1 6 5.9 5.8 5.8 5.6 5.5 5.3 5.1 4.9 4.7 4.6 4.5 4.4 4.4 4.4 4.4 4.4 4.4 4.4 4.5 4.6 4.6 4.7 4.7 4.8 4.9 5 5.1 5.2 5.3 5.3 5.3 5.3 5.4 5.6 5.8 6 6.2 6.3 6.5 6.8 7.1 7.6 8.1 8.7 9.2 9.7 10 10.2 10.3 10.5 10.7 10.9 11.1 11.3 11.3 11.3 11.1 10.9 10.6 10.4 10.2 10 9.9 9.8 9.7 9.6 9.5 9.4 9.5 9.6 9.8 10 10.2 10.2 10.1 10 9.7 9.5 9.2 9 8.9 8.8 8.8 8.8 8.8 8.8 8.8 8.8 8.8 8.8 9.1 9.6 9.7 9.6 9.4 9.4 9.3 9.2 9 8.8
Dallas-Fort Worth-Arlington, TX MSA 3.7 3.7 3.7 3.7 3.6 3.6 3.6 3.6 3.5 3.5 3.4 3.4 3.5 3.6 3.8 4 4.2 4.5 4.7 5 5.3 5.6 5.9 6.1 6.3 6.4 6.5 6.5 6.5 6.5 6.5 6.5 6.5 6.6 6.6 6.7 6.7 6.7 6.8 6.8 6.8 6.8 6.8 6.7 6.6 6.4 6.3 6.2 6.1 6.1 6 5.9 5.9 5.8 5.7 5.7 5.7 5.7 5.7 5.6 5.6 5.5 5.4 5.3 5.2 5.1 5.1 5.1 5.1 5.1 5 5 4.9 4.9 4.9 4.9 4.9 4.9 4.9 4.8 4.7 4.6 4.5 4.5 4.4 4.4 4.3 4.3 4.2 4.2 4.2 4.3 4.3 4.4 4.4 4.4 4.4 4.4 4.4 4.5 4.6 4.8 4.9 5.1 5.4 5.6 6 6.3 6.6 6.9 7.2 7.4 7.6 7.8 8 8.1 8.2 8.2 8.3 8.3 8.3 8.3 8.3 8.3 8.2 8.1 8.1 8.1 8.1 8.2 8.2 8.2 8.1 8 8 7.9 7.9 7.9 7.9 7.9 7.8 7.6 7.4 7.3 7.1 7 7 6.9 6.9 6.8 6.7 6.6 6.4 6.3 6.2 6.1 6.2 6.2 6.3 6.3 6.4 6.3 6.2 6 6 6
Dallas-Plano-Irving, TX Met Div 3.7 3.7 3.7 3.7 3.6 3.6 3.6 3.6 3.5 3.5 3.4 3.4 3.5 3.6 3.8 4.1 4.3 4.6 4.9 5.2 5.5 5.9 6.2 6.4 6.5 6.7 6.7 6.7 6.8 6.8 6.7 6.7 6.7 6.8 6.8 6.9 6.9 6.9 7 7 7 7 6.9 6.9 6.7 6.6 6.4 6.3 6.3 6.2 6.1 6.1 6 5.9 5.9 5.8 5.8 5.8 5.8 5.7 5.6 5.6 5.4 5.3 5.2 5.2 5.1 5.1 5.1 5.1 5.1 5.1 5 5 5 5 5 5 4.9 4.8 4.7 4.6 4.5 4.4 4.4 4.3 4.3 4.3 4.2 4.2 4.3 4.3 4.4 4.4 4.4 4.4 4.5 4.5 4.5 4.6 4.7 4.8 5 5.2 5.5 5.7 6.1 6.4 6.7 7 7.2 7.5 7.7 7.9 8 8.1 8.2 8.2 8.2 8.3 8.3 8.3 8.3 8.3 8.2 8.1 8.1 8.1 8.1 8.1 8.2 8.1 8.1 8 8 8 8 8 8 7.9 7.8 7.7 7.5 7.3 7.2 7.1 7.1 7 7 6.9 6.8 6.6 6.5 6.3 6.2 6.1 6.2 6.3 6.3 6.3 6.4 6.4 6.2 6.1 6 6
Detroit-Livonia-Dearborn, MI Met Div 4.1 4.1 4.2 4.2 4.3 4.3 4.3 4.3 4.4 4.5 4.7 5 5.3 5.6 5.7 5.7 5.7 5.7 5.8 6 6.3 6.7 7 7.2 7.3 7.3 7.3 7.3 7.2 7.2 7.1 7.1 7.1 7.3 7.5 7.8 8.1 8.4 8.6 8.7 8.8 8.8 8.7 8.7 8.6 8.4 8.3 8.2 8.1 8.1 8.2 8.3 8.4 8.5 8.7 8.8 9 9.1 9.1 9.1 9.1 9 8.9 8.8 8.7 8.6 8.5 8.4 8.4 8.5 8.5 8.4 8.3 8.2 8.2 8.1 8.2 8.3 8.4 8.5 8.6 8.7 8.6 8.5 8.4 8.3 8.3 8.3 8.4 8.6 8.7 8.9 9 9 8.9 8.8 8.7 8.6 8.7 8.8 9.1 9.4 9.7 10 10.5 11.1 11.9 12.7 13.7 14.5 15.3 15.9 16.3 16.7 16.9 17 16.9 16.7 16.6 16.4 16.2 16 15.7 15.4 15.1 14.8 14.5 14.3 14.1 14 13.7 13.5 13.2 13 12.9 12.9 12.9 12.9 12.8 12.7 12.4 12.2 11.9 11.7 11.5 11.4 11.4 11.4 11.5 11.6 11.7 11.7 11.8 11.8 11.9 12 12 11.8 11.4 11 10.7 10.7 10.5 10.5 10.5 10.4nemployment.csv同上
如下图所示，在浏览器直接打开，，在chrome中测试上面的代码，控制台会报如下错误：
d3.v4.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/volod/Desktop/D3.js%E5%8A%A0%E8%BD%BDcsv%E6%95%B0%E6%8D%AE/nemployment.tsv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
这是因为安全机制禁止了cross origin request，不允许直接读取本地文件, 所以我们需要一个webserver来server我们的数据
2.VS Code在本地进行调试和打开本地服务器
<1>在扩展中搜索插件 Debugger for Chrome 进行安装。
<2>配置launch.json文件，根据步骤来。file就是你在浏览器中需要运行的文件的路径。
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}<3>配置好之后，直接使用调试是不行的，需要开启服务器。
3. npm install -g live-server安装，开启服务器
（3与4都能实现VS Code在本地进行调试和打开本地服务器，选择其中一种方法即可）
1.打开vs code制台。选择终端，在终端里输入 npm install -g live-server 进行安装.
npm install -g live-server2.然后再输入live-server,按下回车，如下图所示：
4.在vs code中安装live server 插件
（3与4都能实现VS Code在本地进行调试和打开本地服务器，选择其中一种方法即可），如下图所示：
5.以下是使用D3 v4实现下图效果：
index.html
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <style> 4 .axis--y path { 5 display: none; 6 } 7 8 .cities { 9 fill: none; 10 stroke-linejoin: round; 11 stroke-linecap: round; 12 stroke-width: 1.5px; 13 } 14 15 .focus text { 16 text-anchor: middle; 17 text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; 18 } 19 20 .voronoi path { 21 fill: none; 22 pointer-events: all; 23 } 24 25 .voronoi--show path { 26 stroke: red; 27 stroke-opacity: 0.2; 28 } 29 30 #form { 31 position: absolute; 32 top: 20px; 33 right: 30px; 34 } 35 </style>
36 <svg width="960" height="500"></svg>
37 <!-- <label id="form" for="show-voronoi"> 38 Show Voronoi 39 <input type="checkbox" id="show-voronoi" disabled> 40 </label> -->
41 <script src="https://d3js.org/d3.v4.min.js"></script>
42 <script> 43 44 var months, 45 monthKeys, 46 monthParse = d3.timeParse("%Y-%m"); 47 48 var svg = d3.select("svg"), 49 margin = { top: 20, right: 30, bottom: 30, left: 40 }, 50 width = svg.attr("width") - margin.left - margin.right, 51 height = svg.attr("height") - margin.top - margin.bottom, 52 g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 53 54 var x = d3.scaleTime() 55 .range([0, width]); 56 57 var y = d3.scaleLinear() 58 .range([height, 0]); 59 60 var z = d3.scaleOrdinal(d3.schemeCategory10); 61 62 var voronoi = d3.voronoi() 63 .x(function (d) { return x(d.date); }) 64 .y(function (d) { return y(d.value); }) 65 .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]); 66 67 var line = d3.line() 68 .x(function (d) { return x(d.date); }) 69 .y(function (d) { return y(d.value); }); 70 71 d3.tsv("nemployment.tsv", type, function (error, data) { 72 if (error) throw error; 73 74 x.domain(d3.extent(months)); 75 y.domain([0, d3.max(data, function (c) { return d3.max(c.values, function (d) { return d.value; }); })]).nice(); 76 z.domain(data.map(function (d) { return d.name; })) 77 78 g.append("g") 79 .attr("class", "axis axis--x") 80 .attr("transform", "translate(0," + height + ")") 81 .call(d3.axisBottom(x)); 82 83 g.append("g") 84 .attr("class", "axis axis--y") 85 .call(d3.axisLeft(y).ticks(10, "%")) 86 .append("text") 87 .attr("x", 4) 88 .attr("y", 0.5) 89 .attr("dy", "0.32em") 90 .style("text-anchor", "start") 91 .style("fill", "#000") 92 .style("font-weight", "bold") 93 .text("Unemployment Rate"); 94 95 g.append("g") 96 .attr("class", "cities") 97 .selectAll("path") 98 .data(data) 99 .enter().append("path") 100 .attr("d", function (d) { d.line = this; return line(d.values); }) 101 .style("stroke", function (d) { return z(d.name); }); 102 103 var focus = g.append("g") 104 .attr("transform", "translate(-100,-100)") 105 .attr("class", "focus"); 106 107 focus.append("circle") 108 .attr("r", 3.5); 109 110 focus.append("text") 111 .attr("y", -10); 112 113 var voronoiGroup = g.append("g") 114 .attr("class", "voronoi"); 115 116 voronoiGroup.selectAll("path") 117 .data(voronoi.polygons(d3.merge(data.map(function (d) { return d.values; })))) 118 .enter().append("path") 119 .attr("d", function (d) { return d ? "M" + d.join("L") + "Z" : null; }) 120 .on("mouseover", mouseover) 121 .on("mouseout", mouseout); 122 123 d3.select("#show-voronoi") 124 .property("disabled", false) 125 .on("change", function () { voronoiGroup.classed("voronoi--show", this.checked); }); 126 127 function mouseover(d) { 128 d3.select(d.data.city.line) 129 .style('stroke-width', 3) 130 .style('stroke', d3.hsl(z(d.data.city.name)).brighter(1)); 131 132 d.data.city.line.parentNode.appendChild(d.data.city.line); 133 focus.attr("transform", "translate(" + x(d.data.date) + "," + y(d.data.value) + ")"); 134 focus.select("text").text(d.data.city.name + ': ' + d.data.value); 135 } 136 137 function mouseout(d) { 138 d3.select(d.data.city.line) 139 .style("stroke-width", 1.5) 140 .style('stroke', z(d.data.city.name)); 141 focus.attr("transform", "translate(-100,-100)"); 142 } 143 }); 144 145 function type(d, i, columns) { 146 if (!months) monthKeys = columns.slice(1), months = monthKeys.map(monthParse); 147 var c = { name: d.name.replace(/ (msa|necta div|met necta|met div)$/i, ""), values: null }; 148 c.values = monthKeys.map(function (k, i) { return { city: c, date: months[i], value: d[k] / 100 }; }); 149 return c; 150 } 151 152 </script>
153 </body>
154
155 </html>nemployment.tsv
name 2000-01 2000-02 2000-03 2000-04 2000-05 2000-06 2000-07 2000-08 2000-09 2000-10 2000-11 2000-12 2001-01 2001-02 2001-03 2001-04 2001-05 2001-06 2001-07 2001-08 2001-09 2001-10 2001-11 2001-12 2002-01 2002-02 2002-03 2002-04 2002-05 2002-06 2002-07 2002-08 2002-09 2002-10 2002-11 2002-12 2003-01 2003-02 2003-03 2003-04 2003-05 2003-06 2003-07 2003-08 2003-09 2003-10 2003-11 2003-12 2004-01 2004-02 2004-03 2004-04 2004-05 2004-06 2004-07 2004-08 2004-09 2004-10 2004-11 2004-12 2005-01 2005-02 2005-03 2005-04 2005-05 2005-06 2005-07 2005-08 2005-09 2005-10 2005-11 2005-12 2006-01 2006-02 2006-03 2006-04 2006-05 2006-06 2006-07 2006-08 2006-09 2006-10 2006-11 2006-12 2007-01 2007-02 2007-03 2007-04 2007-05 2007-06 2007-07 2007-08 2007-09 2007-10 2007-11 2007-12 2008-01 2008-02 2008-03 2008-04 2008-05 2008-06 2008-07 2008-08 2008-09 2008-10 2008-11 2008-12 2009-01 2009-02 2009-03 2009-04 2009-05 2009-06 2009-07 2009-08 2009-09 2009-10 2009-11 2009-12 2010-01 2010-02 2010-03 2010-04 2010-05 2010-06 2010-07 2010-08 2010-09 2010-10 2010-11 2010-12 2011-01 2011-02 2011-03 2011-04 2011-05 2011-06 2011-07 2011-08 2011-09 2011-10 2011-11 2011-12 2012-01 2012-02 2012-03 2012-04 2012-05 2012-06 2012-07 2012-08 2012-09 2012-10 2012-11 2012-12 2013-01 2013-02 2013-03 2013-04 2013-05 2013-06 2013-07 2013-08 2013-09 2013-10
Bethesda-Rockville-Frederick, MD Met Div 2.6 2.6 2.6 2.6 2.7 2.7 2.7 2.6 2.6 2.6 2.6 2.6 2.7 2.7 2.8 2.8 2.9 3 3.1 3.3 3.4 3.5 3.5 3.6 3.6 3.6 3.6 3.6 3.6 3.5 3.5 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.4 3.3 3.3 3.3 3.3 3.3 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.2 3.3 3.3 3.3 3.3 3.2 3.2 3.1 3.1 3 3 3 2.9 2.9 2.8 2.8 2.8 2.8 2.9 3 3 3 2.9 2.9 2.9 2.9 2.8 2.8 2.7 2.7 2.6 2.6 2.6 2.6 2.6 2.6 2.6 2.5 2.5 2.6 2.7 2.8 2.9 3.1 3.2 3.4 3.6 3.9 4.2 4.5 4.9 5.2 5.5 5.7 5.8 5.9 6 6 6.1 6.2 6.2 6.3 6.3 6.3 6.2 6.1 6 5.9 5.9 5.9 5.9 5.9 5.8 5.8 5.7 5.6 5.5 5.5 5.5 5.6 5.6 5.6 5.6 5.5 5.4 5.4 5.3 5.3 5.3 5.3 5.3 5.3 5.3 5.3 5.2 5.2 5.2 5.2 5.2 5.2 5.1 5.2 5.3 5.5 5.5 5.3 5.2 5.2
Boston-Cambridge-Quincy, MA NECTA Div 2.7 2.6 2.6 2.5 2.4 2.4 2.3 2.3 2.3 2.3 2.3 2.4 2.5 2.6 2.8 2.9 3 3.2 3.4 3.6 3.8 4 4.2 4.4 4.6 4.7 4.8 4.9 4.9 5 5 5 5.1 5.1 5.2 5.2 5.3 5.3 5.4 5.4 5.5 5.6 5.6 5.6 5.5 5.4 5.3 5.2 5.1 5.1 5 4.9 4.9 4.8 4.7 4.6 4.5 4.5 4.4 4.4 4.4 4.4 4.4 4.3 4.3 4.2 4.2 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.3 4.2 4.2 4.2 4.2 4.1 4.1 4.1 4 4 3.9 3.9 3.9 3.9 3.9 3.9 3.9 3.9 3.9 4 4.1 4.2 4.3 4.5 4.7 4.8 5 5.3 5.6 5.9 6.2 6.5 6.7 6.9 7.1 7.3 7.4 7.5 7.6 7.6 7.6 7.6 7.6 7.5 7.5 7.4 7.3 7.2 7.1 7 7 6.9 6.9 6.8 6.6 6.5 6.4 6.3 6.3 6.2 6.2 6.1 6.1 6 5.9 5.8 5.7 5.7 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.6 5.5 5.4 5.5 5.6 5.9 6 6 5.9 6
Boston-Cambridge-Quincy, MA-NH Met NECTA 2.8 2.7 2.7 2.6 2.6 2.5 2.5 2.5 2.4 2.4 2.5 2.5 2.6 2.8 2.9 3.1 3.2 3.4 3.6 3.8 4.1 4.3 4.5 4.7 4.9 5 5.1 5.2 5.2 5.3 5.3 5.4 5.4 5.5 5.5 5.5 5.6 5.6 5.6 5.7 5.8 5.8 5.9 5.8 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.2 5.1 5 4.9 4.9 4.8 4.7 4.7 4.6 4.6 4.6 4.6 4.5 4.5 4.4 4.4 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.5 4.4 4.4 4.4 4.4 4.4 4.3 4.3 4.2 4.2 4.2 4.1 4.1 4.1 4.1 4.1 4.1 4.1 4.1 4.1 4.2 4.3 4.4 4.5 4.7 4.9 5.1 5.3 5.5 5.8 6.1 6.5 6.8 7.1 7.3 7.5 7.7 7.8 7.9 8 8 8 8 8 7.9 7.9 7.8 7.6 7.5 7.4 7.3 7.3 7.2 7.2 7.1 6.9 6.8 6.8 6.7 6.6 6.6 6.6 6.5 6.5 6.4 6.3 6.2 6.1 6.1 6.1 6 6 6.1 6.1 6.1 6.1 6.1 6.1 6.1 6.1 5.9 5.9 5.9 6 6.3 6.3 6.3 6.2 6.3
Brockton-Bridgewater-Easton, MA NECTA Div 3 3 2.9 2.9 2.8 2.8 2.8 2.8 2.8 2.8 2.9 2.9 3.1 3.2 3.3 3.4 3.5 3.6 3.8 3.9 4.1 4.3 4.4 4.6 4.8 4.9 5 5.1 5.2 5.3 5.3 5.4 5.4 5.5 5.6 5.6 5.7 5.8 5.9 6 6.1 6.2 6.2 6.3 6.2 6.2 6.1 6.1 6 5.9 5.9 5.9 5.8 5.7 5.7 5.6 5.5 5.5 5.4 5.4 5.4 5.3 5.3 5.3 5.2 5.2 5.2 5.3 5.3 5.4 5.3 5.3 5.3 5.2 5.2 5.3 5.3 5.3 5.4 5.3 5.3 5.3 5.3 5.2 5.2 5.1 5.1 5.1 5 5 5 5 5 5.1 5.1 5.1 5.2 5.2 5.3 5.4 5.6 5.8 6 6.2 6.5 6.8 7.1 7.5 7.9 8.2 8.5 8.7 8.9 9.1 9.3 9.5 9.6 9.7 9.8 9.9 9.9 9.9 9.9 9.8 9.6 9.5 9.4 9.4 9.3 9.3 9.2 9.1 9 8.8 8.7 8.6 8.5 8.5 8.4 8.4 8.3 8.2 8.1 7.9 7.8 7.7 7.7 7.7 7.7 7.7 7.7 7.6 7.5 7.5 7.5 7.4 7.4 7.2 7.1 7.2 7.4 7.8 7.9 7.9 7.7 7.8
Camden, NJ Met Div 3.6 3.6 3.5 3.5 3.4 3.4 3.5 3.5 3.6 3.6 3.6 3.5 3.5 3.5 3.5 3.6 3.7 3.8 3.9 4.1 4.3 4.5 4.6 4.8 5 5.1 5.2 5.3 5.4 5.4 5.4 5.4 5.5 5.5 5.5 5.6 5.6 5.6 5.5 5.6 5.6 5.6 5.6 5.5 5.4 5.3 5.2 5.2 5.1 5.1 5 5 4.9 4.8 4.7 4.6 4.5 4.4 4.4 4.3 4.3 4.3 4.2 4.2 4.2 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.7 4.7 4.7 4.8 4.8 4.9 4.8 4.8 4.7 4.6 4.5 4.4 4.3 4.3 4.2 4.2 4.3 4.3 4.3 4.4 4.4 4.5 4.6 4.7 4.7 4.8 4.8 4.9 5.1 5.2 5.4 5.7 5.9 6.3 6.7 7.1 7.6 8 8.4 8.7 9 9.2 9.4 9.6 9.7 9.9 10 10.1 10.2 10.2 10.2 10.1 10 10 9.9 9.9 10 10 10 10 9.9 9.8 9.7 9.7 9.7 9.8 9.8 9.9 9.8 9.8 9.7 9.7 9.6 9.7 9.8 9.9 10 10 10.1 10.1 10.1 10.1 10.1 10.1 9.9 9.7 9.4 9.1 9 9 8.8 8.7 8.7 8.6
Chicago-Joliet-Naperville, IL Met Div 4.4 4.4 4.4 4.4 4.5 4.5 4.5 4.5 4.5 4.5 4.7 4.9 5.1 5.3 5.4 5.4 5.4 5.4 5.5 5.6 5.8 6 6.2 6.4 6.6 6.7 6.8 6.9 7 7 7 7 7 7 7 6.9 6.9 6.8 6.8 6.9 7 7.1 7.2 7.2 7.1 7 6.8 6.6 6.5 6.4 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.3 6.2 6.2 6.1 6 5.8 5.7 5.5 5.3 5.1 4.9 4.7 4.5 4.5 4.4 4.4 4.3 4.2 4.2 4.2 4.3 4.3 4.4 4.6 4.7 4.8 4.9 5 5.1 5.1 5.2 5.2 5.2 5.2 5.3 5.4 5.6 5.9 6.1 6.3 6.4 6.5 6.9 7.1 7.4 7.9 8.5 9.1 9.5 9.9 10.2 10.4 10.7 10.9 11.1 11.2 11.3 11.2 11.1 10.9 10.7 10.5 10.4 10.2 10.1 10 9.9 9.7 9.5 9.4 9.3 9.4 9.6 9.8 10.2 10.4 10.5 10.5 10.3 9.9 9.5 9.2 8.9 8.8 8.7 8.8 8.9 8.9 8.9 8.9 8.9 8.9 8.9 9 9.4 9.5 9.4 9.3 9.4 9.4 9.4 9.3 9.1
Chicago-Joliet-Naperville, IL-IN-WI MSA 4.1 4.2 4.2 4.2 4.3 4.3 4.3 4.4 4.4 4.5 4.6 4.7 4.9 5 5.1 5.1 5.2 5.2 5.3 5.5 5.7 5.9 6.1 6.3 6.5 6.6 6.7 6.7 6.8 6.8 6.8 6.8 6.8 6.8 6.8 6.7 6.7 6.7 6.6 6.7 6.8 6.9 7 7 6.9 6.8 6.7 6.5 6.4 6.3 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.2 6.1 6.1 6.1 6 5.9 5.8 5.8 5.6 5.5 5.3 5.1 4.9 4.7 4.6 4.5 4.4 4.4 4.4 4.4 4.4 4.4 4.4 4.5 4.6 4.6 4.7 4.7 4.8 4.9 5 5.1 5.2 5.3 5.3 5.3 5.3 5.4 5.6 5.8 6 6.2 6.3 6.5 6.8 7.1 7.6 8.1 8.7 9.2 9.7 10 10.2 10.3 10.5 10.7 10.9 11.1 11.3 11.3 11.3 11.1 10.9 10.6 10.4 10.2 10 9.9 9.8 9.7 9.6 9.5 9.4 9.5 9.6 9.8 10 10.2 10.2 10.1 10 9.7 9.5 9.2 9 8.9 8.8 8.8 8.8 8.8 8.8 8.8 8.8 8.8 8.8 9.1 9.6 9.7 9.6 9.4 9.4 9.3 9.2 9 8.8
Dallas-Fort Worth-Arlington, TX MSA 3.7 3.7 3.7 3.7 3.6 3.6 3.6 3.6 3.5 3.5 3.4 3.4 3.5 3.6 3.8 4 4.2 4.5 4.7 5 5.3 5.6 5.9 6.1 6.3 6.4 6.5 6.5 6.5 6.5 6.5 6.5 6.5 6.6 6.6 6.7 6.7 6.7 6.8 6.8 6.8 6.8 6.8 6.7 6.6 6.4 6.3 6.2 6.1 6.1 6 5.9 5.9 5.8 5.7 5.7 5.7 5.7 5.7 5.6 5.6 5.5 5.4 5.3 5.2 5.1 5.1 5.1 5.1 5.1 5 5 4.9 4.9 4.9 4.9 4.9 4.9 4.9 4.8 4.7 4.6 4.5 4.5 4.4 4.4 4.3 4.3 4.2 4.2 4.2 4.3 4.3 4.4 4.4 4.4 4.4 4.4 4.4 4.5 4.6 4.8 4.9 5.1 5.4 5.6 6 6.3 6.6 6.9 7.2 7.4 7.6 7.8 8 8.1 8.2 8.2 8.3 8.3 8.3 8.3 8.3 8.3 8.2 8.1 8.1 8.1 8.1 8.2 8.2 8.2 8.1 8 8 7.9 7.9 7.9 7.9 7.9 7.8 7.6 7.4 7.3 7.1 7 7 6.9 6.9 6.8 6.7 6.6 6.4 6.3 6.2 6.1 6.2 6.2 6.3 6.3 6.4 6.3 6.2 6 6 6
Dallas-Plano-Irving, TX Met Div 3.7 3.7 3.7 3.7 3.6 3.6 3.6 3.6 3.5 3.5 3.4 3.4 3.5 3.6 3.8 4.1 4.3 4.6 4.9 5.2 5.5 5.9 6.2 6.4 6.5 6.7 6.7 6.7 6.8 6.8 6.7 6.7 6.7 6.8 6.8 6.9 6.9 6.9 7 7 7 7 6.9 6.9 6.7 6.6 6.4 6.3 6.3 6.2 6.1 6.1 6 5.9 5.9 5.8 5.8 5.8 5.8 5.7 5.6 5.6 5.4 5.3 5.2 5.2 5.1 5.1 5.1 5.1 5.1 5.1 5 5 5 5 5 5 4.9 4.8 4.7 4.6 4.5 4.4 4.4 4.3 4.3 4.3 4.2 4.2 4.3 4.3 4.4 4.4 4.4 4.4 4.5 4.5 4.5 4.6 4.7 4.8 5 5.2 5.5 5.7 6.1 6.4 6.7 7 7.2 7.5 7.7 7.9 8 8.1 8.2 8.2 8.2 8.3 8.3 8.3 8.3 8.3 8.2 8.1 8.1 8.1 8.1 8.1 8.2 8.1 8.1 8 8 8 8 8 8 7.9 7.8 7.7 7.5 7.3 7.2 7.1 7.1 7 7 6.9 6.8 6.6 6.5 6.3 6.2 6.1 6.2 6.3 6.3 6.3 6.4 6.4 6.2 6.1 6 6
Detroit-Livonia-Dearborn, MI Met Div 4.1 4.1 4.2 4.2 4.3 4.3 4.3 4.3 4.4 4.5 4.7 5 5.3 5.6 5.7 5.7 5.7 5.7 5.8 6 6.3 6.7 7 7.2 7.3 7.3 7.3 7.3 7.2 7.2 7.1 7.1 7.1 7.3 7.5 7.8 8.1 8.4 8.6 8.7 8.8 8.8 8.7 8.7 8.6 8.4 8.3 8.2 8.1 8.1 8.2 8.3 8.4 8.5 8.7 8.8 9 9.1 9.1 9.1 9.1 9 8.9 8.8 8.7 8.6 8.5 8.4 8.4 8.5 8.5 8.4 8.3 8.2 8.2 8.1 8.2 8.3 8.4 8.5 8.6 8.7 8.6 8.5 8.4 8.3 8.3 8.3 8.4 8.6 8.7 8.9 9 9 8.9 8.8 8.7 8.6 8.7 8.8 9.1 9.4 9.7 10 10.5 11.1 11.9 12.7 13.7 14.5 15.3 15.9 16.3 16.7 16.9 17 16.9 16.7 16.6 16.4 16.2 16 15.7 15.4 15.1 14.8 14.5 14.3 14.1 14 13.7 13.5 13.2 13 12.9 12.9 12.9 12.9 12.8 12.7 12.4 12.2 11.9 11.7 11.5 11.4 11.4 11.4 11.5 11.6 11.7 11.7 11.8 11.8 11.9 12 12 11.8 11.4 11 10.7 10.7 10.5 10.5 10.5 10.4如上所述，运行即可
今天的文章D3.tsv与D3.csv加载数据分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/22029.html
