1. Method of D3 loading data
D3 provides methods for loading different data types, such as D3.text (), d3.xml(), d3.json(), d3.csv(), d3.tsv() and 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.4Copy the codeNemployment. CSV ditto
If you test the code in Chrome, the console will return the following error:
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.Copy the code
This is because the security mechanism forbids cross Origin Request to read local files directly, so we need a Webserver to server our data
2.VS Code debugs locally and opens the local server
<1> In the extension search plugin Debugger for Chrome to install.
<2> Configure the launch.json file and follow the steps. File is the path to the file you want to run in your browser.
{// Use IntelliSense to learn about related attributes. // Hover to view descriptions of existing properties. / / for more information, please visit: 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}"}}]Copy the code<3> After configuration, direct use of debugging is not possible, you need to start the server.
3. NPM install -g live-server install and start the server
Both 3 and 4 can be achievedVS Code debugs locally and opens the local server, either way)
1. Open the VS Code console. Select a terminal and enter NPM install -g live-server to install it.
npm install -g live-serverCopy the code2. Enter live-server again and press Enter, as shown in the following figure:
4. Install the Live Server plug-in in VS Code
(Both 3 and 4 can enable VS Code to debug and open the local server locally, just select one of the methods), as shown below:
5. Here is what D3 V4 looks like:
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.5 px; 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 and 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.32 em")
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", to 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>Copy the codenemployment.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.4Copy the codeAs described above, just run