Skip to content

Instantly share code, notes, and snippets.

@jchaskell
Created September 24, 2015 04:42
Show Gist options
  • Save jchaskell/91b7b26880713bd80bcd to your computer and use it in GitHub Desktop.
Save jchaskell/91b7b26880713bd80bcd to your computer and use it in GitHub Desktop.
Exports to China
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>States' Trade Relationship with China</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1{
font-size:24px;
margin:0;
}
p{
font-size:12px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
circle:hover {
fill:#FFFF66;
}
path {
stroke: gray;
stroke-width: 0.5;
}
g.highlight path {
stroke: crimson;
stroke-width: 2;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>US States' Exports to China</h1>
<p>Xi Jinping, the president of China, just arrived in the US. In addition to Washington D.C., he is visiting <strong style="color:crimson;">Washington</strong> and <strong style="color:crimson;">New York</strong>, two states that send a lot of exports to China. Washington, especially, has seen its exports rise sharply in recent years, and <a href =http://www.reuters.com/article/2015/09/23/us-icbc-leasing-boeing-idUSKCN0RN16120150923>Boeing just announced a deal</a> to sell 300 aircraft to Chinese firms.</p>
<script type="text/javascript">
var w = 800;
var h = 550;
var padding = [ 20, 10, 50, 100];
//Top, right, bottom, left
var dateFormat = d3.time.format("%Y");
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Lines!
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.exports_china);
});
var svg = d3.select("body") //creates SVG for putting graph
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in contents of CSV file
d3.csv("trade_with_china_by_state_only_export.csv", function(data) {
years = ["2008", "2009", "2010", "2011", "2012", "2013", "2014"]
xScale.domain([ d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.exports_china;
}),
0
]);
var data = d3.nest()
.key(function(d) {
return d.state;
})
//.key(function(d) { return d.year; })
.sortKeys(d3.ascending)
.entries(data);
//console.log(data);
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.classed("highlight", function(d) {
if (d.key == "Washington" || d.key == "New York") {
return true;
} else {
return false;
}
});
/* groups.append("text")
.data(data)
//.enter().append("text")
.attr("transform", "translate(" + (w+3) + "," + yScale(data[6].values) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "Crimson")
.text(function(d) {
return d.key;
})
.filter(function(d) {
return d.key == "Washington" || d.key == "New York" ;
});
groups.append("text")
.data(data)
.attr("transform", "translate(" + (w+3) + "," + yScale(data[6].values) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "gray")
.text(function(d) {
return d.key;
})
.filter(function(d) {
return d.key == "Texas" || d.key == "California" ;
});*/
groups.append("title")
.text(function(d) {
return d.key;
});
groups.selectAll("path")
.data(function(d) {
return [ d.values ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke-width", 2);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
state year exports_china
1 Alabama 2008 817147134
2 Alabama 2009 801095298
3 Alabama 2010 1910683193
4 Alabama 2011 2337076737
5 Alabama 2012 2389479073
6 Alabama 2013 2468189824
7 Alabama 2014 3126670408
8 Alaska 2008 733090679
9 Alaska 2009 586229677
10 Alaska 2010 921276201
11 Alaska 2011 1477185272
12 Alaska 2012 1353509982
13 Alaska 2013 1236228045
14 Alaska 2014 1466861476
15 Arizona 2008 1254539127
16 Arizona 2009 821766006
17 Arizona 2010 1037149359
18 Arizona 2011 1003958364
19 Arizona 2012 1252179673
20 Arizona 2013 1079923163
21 Arizona 2014 1019115907
22 Arkansas 2008 320633550
23 Arkansas 2009 235412655
24 Arkansas 2010 335601404
25 Arkansas 2011 413997218
26 Arkansas 2012 718603427
27 Arkansas 2013 683491341
28 Arkansas 2014 437354557
29 California 2008 10981739113
30 California 2009 9744452187
31 California 2010 12474252241
32 California 2011 14216541966
33 California 2012 13969451382
34 California 2013 16281909460
35 California 2014 16050010176
36 Colorado 2008 508226927
37 Colorado 2009 439544519
38 Colorado 2010 558431283
39 Colorado 2011 636813755
40 Colorado 2012 675889454
41 Colorado 2013 658606980
42 Colorado 2014 654843016
43 Connecticut 2008 676097188
44 Connecticut 2009 752832457
45 Connecticut 2010 1024125764
46 Connecticut 2011 983013254
47 Connecticut 2012 1008860346
48 Connecticut 2013 910991456
49 Connecticut 2014 907301045
50 Delaware 2008 284124987
51 Delaware 2009 297795069
52 Delaware 2010 362325925
53 Delaware 2011 466709965
54 Delaware 2012 413252059
55 Delaware 2013 449405605
56 Delaware 2014 456012439
57 Florida 2008 871583088
58 Florida 2009 1029044285
59 Florida 2010 1134717363
60 Florida 2011 1341422070
61 Florida 2012 1267061969
62 Florida 2013 1236481651
63 Florida 2014 1160026482
64 Georgia 2008 2002011318
65 Georgia 2009 1768755084
66 Georgia 2010 2386703201
67 Georgia 2011 3185182201
68 Georgia 2012 3684078246
69 Georgia 2013 3728243504
70 Georgia 2014 3082051554
71 Hawaii 2008 75368049
72 Hawaii 2009 45312554
73 Hawaii 2010 63236591
74 Hawaii 2011 100205849
75 Hawaii 2012 71459792
76 Hawaii 2013 88890794
77 Hawaii 2014 221174936
78 Idaho 2008 393997609
79 Idaho 2009 386085657
80 Idaho 2010 445277216
81 Idaho 2011 401688863
82 Idaho 2012 467884082
83 Idaho 2013 468120596
84 Idaho 2014 481655801
85 Illinois 2008 2512807774
86 Illinois 2009 2470309137
87 Illinois 2010 3177002182
88 Illinois 2011 3895848528
89 Illinois 2012 4142319873
90 Illinois 2013 5694544850
91 Illinois 2014 4714008061
92 Indiana 2008 929503424
93 Indiana 2009 868952445
94 Indiana 2010 1089652857
95 Indiana 2011 1173094766
96 Indiana 2012 1309127103
97 Indiana 2013 1345801521
98 Indiana 2014 1436395708
99 Iowa 2008 369559312
100 Iowa 2009 367239553
101 Iowa 2010 598935997
102 Iowa 2011 574476981
103 Iowa 2012 751430582
104 Iowa 2013 611376937
105 Iowa 2014 946360620
106 Kansas 2008 510983871
107 Kansas 2009 353008506
108 Kansas 2010 526936040
109 Kansas 2011 668948637
110 Kansas 2012 1137751725
111 Kansas 2013 1703333091
112 Kansas 2014 1183713509
113 Kentucky 2008 604183001
114 Kentucky 2009 736882391
115 Kentucky 2010 838611140
116 Kentucky 2011 911380412
117 Kentucky 2012 1054655052
118 Kentucky 2013 1350861018
119 Kentucky 2014 1653540616
120 Louisiana 2008 3480214089
121 Louisiana 2009 5395014975
122 Louisiana 2010 6508968035
123 Louisiana 2011 7281308476
124 Louisiana 2012 9310706978
125 Louisiana 2013 7949040103
126 Louisiana 2014 8438883476
127 Maine 2008 121675097
128 Maine 2009 175470108
129 Maine 2010 333297127
130 Maine 2011 274709904
131 Maine 2012 247438602
132 Maine 2013 222994195
133 Maine 2014 183872121
134 Maryland 2008 569845426
135 Maryland 2009 566053771
136 Maryland 2010 573616659
137 Maryland 2011 666940164
138 Maryland 2012 559037631
139 Maryland 2013 562629646
140 Maryland 2014 731811906
141 Massachusetts 2008 1563296229
142 Massachusetts 2009 1371731805
143 Massachusetts 2010 2195196151
144 Massachusetts 2011 2088010546
145 Massachusetts 2012 1876540569
146 Massachusetts 2013 1976778713
147 Massachusetts 2014 2290935906
148 Michigan 2008 1287601558
149 Michigan 2009 1333294229
150 Michigan 2010 2181214229
151 Michigan 2011 2691414355
152 Michigan 2012 3266990775
153 Michigan 2013 4135721209
154 Michigan 2014 3403937136
155 Minnesota 2008 1022253118
156 Minnesota 2009 1037147501
157 Minnesota 2010 1571464972
158 Minnesota 2011 1940438985
159 Minnesota 2012 2027711588
160 Minnesota 2013 1964143851
161 Minnesota 2014 1801259896
162 Mississippi 2008 379396192
163 Mississippi 2009 292873807
164 Mississippi 2010 405432444
165 Mississippi 2011 502151730
166 Mississippi 2012 862775597
167 Mississippi 2013 669682127
168 Mississippi 2014 644183631
169 Missouri 2008 944414496
170 Missouri 2009 688178778
171 Missouri 2010 986460144
172 Missouri 2011 1161374650
173 Missouri 2012 1141199463
174 Missouri 2013 849747626
175 Missouri 2014 872445283
176 Montana 2008 61270469
177 Montana 2009 60468383
178 Montana 2010 122879496
179 Montana 2011 119166398
180 Montana 2012 105432476
181 Montana 2013 93273360
182 Montana 2014 106274493
183 Nebraska 2008 198612583
184 Nebraska 2009 209289378
185 Nebraska 2010 279218755
186 Nebraska 2011 380570572
187 Nebraska 2012 487323213
188 Nebraska 2013 588233803
189 Nebraska 2014 610290257
190 Nevada 2008 372211865
191 Nevada 2009 210822821
192 Nevada 2010 455826952
193 Nevada 2011 424768272
194 Nevada 2012 560788308
195 Nevada 2013 592805790
196 Nevada 2014 584252675
197 New Hampshire 2008 328722863
198 New Hampshire 2009 211501939
199 New Hampshire 2010 411924621
200 New Hampshire 2011 338879444
201 New Hampshire 2012 273078242
202 New Hampshire 2013 265908307
203 New Hampshire 2014 298542781
204 New Jersey 2008 980954676
205 New Jersey 2009 1058391236
206 New Jersey 2010 1389710993
207 New Jersey 2011 1858384270
208 New Jersey 2012 1424498307
209 New Jersey 2013 1579925023
210 New Jersey 2014 1425370024
211 New Mexico 2008 650220213
212 New Mexico 2009 103314768
213 New Mexico 2010 73372788
214 New Mexico 2011 89723261
215 New Mexico 2012 76996815
216 New Mexico 2013 96456470
217 New Mexico 2014 105893888
218 New York 2008 2815127627
219 New York 2009 2440783550
220 New York 2010 3366674731
221 New York 2011 4458937245
222 New York 2012 4286009432
223 New York 2013 5032947734
224 New York 2014 4290507924
225 North Carolina 2008 1942944385
226 North Carolina 2009 1785305639
227 North Carolina 2010 2238213926
228 North Carolina 2011 2631468883
229 North Carolina 2012 2539305083
230 North Carolina 2013 2693642638
231 North Carolina 2014 2661378529
232 North Dakota 2008 15229372
233 North Dakota 2009 18840418
234 North Dakota 2010 23938500
235 North Dakota 2011 21660071
236 North Dakota 2012 19133742
237 North Dakota 2013 23530070
238 North Dakota 2014 49960606
239 Ohio 2008 1818908552
240 Ohio 2009 1886249748
241 Ohio 2010 2287833088
242 Ohio 2011 2741847946
243 Ohio 2012 2839269186
244 Ohio 2013 3373644894
245 Ohio 2014 3881651849
246 Oklahoma 2008 198234691
247 Oklahoma 2009 136568454
248 Oklahoma 2010 243287901
249 Oklahoma 2011 368069337
250 Oklahoma 2012 332803605
251 Oklahoma 2013 428223386
252 Oklahoma 2014 273496793
253 Pennsylvania 2008 2468784349
254 Pennsylvania 2009 2969546938
255 Pennsylvania 2010 4060763303
256 Pennsylvania 2011 3177213385
257 Pennsylvania 2012 2661707216
258 Pennsylvania 2013 3380678723
259 Pennsylvania 2014 4264840885
260 Puerto Rico 2008 1630498524
261 Puerto Rico 2009 1540207933
262 Puerto Rico 2010 2679595865
263 Puerto Rico 2011 3575908299
264 Puerto Rico 2012 2858044693
265 Puerto Rico 2013 2926300637
266 Puerto Rico 2014 2398383171
267 Rhode Island 2008 67870315
268 Rhode Island 2009 69314081
269 Rhode Island 2010 77828418
270 Rhode Island 2011 76482593
271 Rhode Island 2012 89754581
272 Rhode Island 2013 97751917
273 Rhode Island 2014 115841904
274 South Carolina 2008 790227383
275 South Carolina 2009 867201660
276 South Carolina 2010 2156854999
277 South Carolina 2011 3004731641
278 South Carolina 2012 3250160210
279 South Carolina 2013 4878450149
280 South Carolina 2014 4228389229
281 South Dakota 2008 32760444
282 South Dakota 2009 19623949
283 South Dakota 2010 42844096
284 South Dakota 2011 70789304
285 South Dakota 2012 77500274
286 South Dakota 2013 48539157
287 South Dakota 2014 39281446
288 Tennessee 2008 1363939489
289 Tennessee 2009 1293857643
290 Tennessee 2010 1846248488
291 Tennessee 2011 1993070919
292 Tennessee 2012 2179584240
293 Tennessee 2013 2225039746
294 Tennessee 2014 2333992810
295 Texas 2008 8421576434
296 Texas 2009 8906958887
297 Texas 2010 10274197566
298 Texas 2011 10954394475
299 Texas 2012 10305009328
300 Texas 2013 10847287608
301 Texas 2014 10947592596
302 Utah 2008 527021469
303 Utah 2009 542291070
304 Utah 2010 577591853
305 Utah 2011 523920842
306 Utah 2012 607561898
307 Utah 2013 1412675755
308 Utah 2014 891716624
309 Vermont 2008 194116859
310 Vermont 2009 220958315
311 Vermont 2010 584644945
312 Vermont 2011 787198672
313 Vermont 2012 583966804
314 Vermont 2013 491036877
315 Vermont 2014 274869724
316 Virginia 2008 1163778322
317 Virginia 2009 1175110197
318 Virginia 2010 1273739654
319 Virginia 2011 1756505988
320 Virginia 2012 2003573283
321 Virginia 2013 1871475213
322 Virginia 2014 2000142373
323 Washington 2008 8309842343
324 Washington 2009 9113475809
325 Washington 2010 10305016874
326 Washington 2011 11238767551
327 Washington 2012 14156985285
328 Washington 2013 16710678713
329 Washington 2014 20689637743
330 West Virginia 2008 251832539
331 West Virginia 2009 296107231
332 West Virginia 2010 357043569
333 West Virginia 2011 420173025
334 West Virginia 2012 887286692
335 West Virginia 2013 613327918
336 West Virginia 2014 549490885
337 Wisconsin 2008 1230797313
338 Wisconsin 2009 1097618968
339 Wisconsin 2010 1333419496
340 Wisconsin 2011 1383400575
341 Wisconsin 2012 1547348491
342 Wisconsin 2013 1658711119
343 Wisconsin 2014 1560985127
344 Wyoming 2008 5826076
345 Wyoming 2009 6333546
346 Wyoming 2010 4403383
347 Wyoming 2011 3673154
348 Wyoming 2012 12550082
349 Wyoming 2013 15152891
350 Wyoming 2014 19014795
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment