forked from PacktPublishing/How-to-Visualize-Data-with-D3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPracticeReadingCSVData_Solution.rtf
84 lines (82 loc) · 7.32 KB
/
PracticeReadingCSVData_Solution.rtf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
{\rtf1\ansi\ansicpg1252\cocoartf2513
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;\f1\fnil\fcharset0 Monaco;}
{\colortbl;\red255\green255\blue255;\red46\green45\blue42;\red255\green255\blue255;\red31\green36\blue45;
\red162\green70\blue22;\red63\green69\blue80;\red60\green184\blue123;\red190\green191\blue193;}
{\*\expandedcolortbl;;\cssrgb\c23529\c23137\c21569;\cssrgb\c100000\c100000\c100000;\cssrgb\c16078\c18824\c23137;
\cssrgb\c70196\c35294\c10588;\cssrgb\c31373\c34118\c38824;\cssrgb\c27451\c76078\c55686;\cssrgb\c79216\c79608\c80000;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{none\}.}{\leveltext\leveltemplateid1\'01.;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid1}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}}
{\info
{\author Elisabeth Robson}}\margl1440\margr1440\vieww19520\viewh25200\viewkind0
\deftab720
\pard\pardeftab720\sl920\partightenfactor0
\f0\fs72 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 Do the Work Solution: Practice Reading CSV Data\
\pard\pardeftab720\sa400\partightenfactor0
\fs36 \cf2 I added my code directly to an HTML file in a script element.\cb1 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0
\f1\fs24 \cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 window.onload = \cf5 \strokec5 function\cf4 \strokec4 () \{\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 readData(\cf7 \strokec7 "Icecream.csv"\cf4 \strokec4 );\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \};\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \'a0\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf5 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec5 function\cf4 \strokec4 readData(file) \{\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 d3.csv(file, processData)\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 .\cf5 \strokec5 then\cf4 \strokec4 ((data) => analyzeData(data))\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 .\cf5 \strokec5 catch\cf4 \strokec4 ((error) => console.log(\cf7 \strokec7 "Error: "\cf4 \strokec4 , error.message));\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \}\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf5 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec5 function\cf4 \strokec4 processData(datum) \{\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \cf5 \strokec5 let\cf4 \strokec4 dataItem = \{\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 year: parseInt(datum.Year) || 0,\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 pounds: parseInt(datum[\cf7 \strokec7 "Pounds-Sold"\cf4 \strokec4 ]) || 0,\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 topSeller: datum[\cf7 \strokec7 "Top Seller"\cf4 \strokec4 ] || \cf7 \strokec7 ""\cf4 \strokec4 , \cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 maxStatePerCapita: datum.Max_State_Per_Capita || \cf7 \strokec7 ""\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \};\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \cf5 \strokec5 return\cf4 \strokec4 dataItem;\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \}\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf5 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec5 function\cf4 \strokec4 analyzeData(data) \{\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf8 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec8 // This is the data you should see in the console\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 console.log(data);\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf8 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec8 // Extra Credit\cf6 \cb1 \strokec6 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sl340\partightenfactor0
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \cf5 \strokec5 let\cf4 \strokec4 pounds = data.map((d) => d.pounds);\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \cf5 \strokec5 let\cf4 \strokec4 maxPounds = d3.max(pounds);\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \cf5 \strokec5 let\cf4 \strokec4 maxIndex = pounds.indexOf(maxPounds);\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 console.log(data[maxIndex]);\cf6 \cb1 \strokec6 \
\ls1\ilvl0\cf4 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext . }\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 \}\cf6 \cb1 \strokec6 \
}