D3.tsv与D3.csv加载数据

1,713 阅读9分钟

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.4

nemployment.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-server

2.然后再输入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

如上所述,运行即可