Skip to content

Instantly share code, notes, and snippets.

@jchaskell

jchaskell/index.html

Created September 21, 2015 04:41
Show Gist options
  • Save jchaskell/ee9b384f2e534a05b5e7 to your computer and use it in GitHub Desktop.
Save jchaskell/ee9b384f2e534a05b5e7 to your computer and use it in GitHub Desktop.
Download ZIP
US States' Trade Relationship with China
Raw
index.html
<!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.min.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;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
.label text{
font-family: sans-serif;
font-size: 8px;
}
</style>
</head>
<body>
<h1>US Trade with China in 2014 </h1>
<p>This graph plots states' trade relationships with China. The x axis is the percent of imports that come from China, while the y axis is percent of exports that go to China. The closer a state is to the upper right hand corner, the more interconnected it is with China when it comes to trade.</p>
<script type="text/javascript">
var w = 700;
var h = 550;
var padding = [ 20, 10, 50, 70];
//Top, right, bottom, left
var xScale = d3.scale.linear()
.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 d + "%";
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return d + "%";
});
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_wk5.csv", function(data) {
xScale.domain([ d3.min(data, function(d) {
return +(d.imports_china * 100)/d.imports_total;
}),
d3.max(data, function(d) {
return +(d.imports_china * 100)/d.imports_total;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +(d.exports_china * 100)/d.exports_total;
}),
d3.min(data, function(d) {
return +(d.exports_china * 100)/d.exports_total;
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle"); //initializes rectangles - use select for 1 element, selectAll for more
circles.attr("cx", function(d) {
return xScale((d.imports_china * 100)/d.imports_total);
})
.attr("cy", function(d) {
return yScale((d.exports_china * 100)/d.exports_total);
})
.attr("r", 0.5)
.attr("fill", "crimson")
.append("title")
.text(function(d) {
return d.state;
});
svg.selectAll("text")
.data(data)
.enter().append("text")
.text(function(d) {
return d.state;
})
.filter(function(d) {
return d.state == "Washington" || d.state == "California" || d.state == "Nevada" || d.state == "New Mexico" || d.state == "Alaska" || d.state == "Alabama" || d.state == "Louisiana" || d.state == "Wyoming";
})
.attr("x", function(d) {
return xScale((d.imports_china * 100)/d.imports_total ) + 3;
})
.attr("y", function(d) {
return yScale((d.exports_china * 100)/d.exports_total ) - 3;
})
.style("fill", "black")
.style("font-size", "10px");
circles.sort(function(a, b) {
return d3.ascending(+(a.imports_china * 100)/a.imports_total, +(b.imports_china * 100)/b.imports_total);
})
.transition()
.delay(function(d, i) {
return i*50;
})
.duration(2000)
.attr("r", 3);
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);
//x axis label
svg.append("text")
.attr("class", "x label")
.attr("x", w/2 + 2*padding[3])
.attr("y", h - 15)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style("font-size", "13px")
.text("Percent of imports that come from China");
//y axis label
svg.append("text")
.attr("class", "y label")
.attr("transform", "rotate(-90)")
.attr("x", -h/2 + 3*padding[2])
.attr("y", padding[1])
.attr("dy", ".71em")
.style("text-anchor", "end")
.style("font-size", "13px")
.text("Percent of exports that go to China");
});
</script>
</body>
</html>
Raw
trade_with_china_by_state_wk5.csv
state year exports_total imports_total exports_china imports_china GDP_millions size
1 Alabama 2014 19439656976 22210087795 3126670408 2033874199 199440 0.83299489542
2 Alaska 2014 5110729449 2007526150 1466861476 333486222 57080 0.14236511198
3 Arizona 2014 21247546752 19715930777 1019115907 2707933025 284156 0.81926955058
4 Arkansas 2014 6860016662 7602779486 437354557 2529941697 121395 0.28925592296
5 California 2014 1.73812e+11 4.03369e+11 16050010176 1.37676e+11 2311616 11.54362
6 Colorado 2014 8337260753 14237309353 654843016 2267265446 306663 0.45149140212
7 Connecticut 2014 15930667663 23892040733 907301045 2977077366 253036 0.79645416792
8 Delaware 2014 5266627084 10689561394 456012439 504261209 62756 0.31912376956
9 Florida 2014 58506528733 71782152022 1160026482 12255662076 839944 2.6057736151
10 Georgia 2014 39376825754 83764608277 3082051554 18650879121 476483 2.46282868062
11 Hawaii 2014 1447123737 5329853601 221174936 262138112 77389 0.13553954676
12 Idaho 2014 5137445142 5691784235 481655801 1499221201 63952 0.21658458754
13 Illinois 2014 68246837088 1.40123e+11 4714008061 29463893632 745875 4.16739674176
14 Indiana 2014 35467036651 48793539329 1436395708 7721090230 317840 1.6852115196
15 Iowa 2014 15092200558 10080923399 946360620 1411724898 170613 0.50346247914
16 Kansas 2014 12045822292 11805856621 1183713509 2347659479 147075 0.47703357826
17 Kentucky 2014 27650690098 39266108135 1653540616 6860910997 188602 1.33833596466
18 Louisiana 2014 64813659468 57605434176 8438883476 1309776857 251397 2.44838187288
19 Maine 2014 2711573626 3860606350 183872121 357390874 55838 0.13144359952
20 Maryland 2014 12233389310 30071548917 731811906 3127411395 348631 0.84609876454
21 Massachusetts 2014 27382732078 34435514986 2290935906 4405605701 459937 1.23636494128
22 Michigan 2014 55928500991 1.22739e+11 3403937136 8140420830 451516 3.57335001982
23 Minnesota 2014 21408254499 34692897614 1801259896 10384894557 316204 1.12202304226
24 Mississippi 2014 11450139890 17254303213 644183631 3225379650 104851 0.57408886206
25 Missouri 2014 14140665981 18283923179 872445283 4554164578 284462 0.6484917832
26 Montana 2014 1545427741 6237281938 106274493 135777998 44269 0.15565419358
27 Nebraska 2014 7863497581 4050191701 610290257 927640238 112159 0.23827378564
28 Nevada 2014 7691517557 7849656312 584252675 3258993947 132064 0.31082347738
29 New Hampshire 2014 4226842551 11215615947 298542781 1105985121 71552 0.30884916996
30 New Jersey 2014 36616205166 1.26365e+11 1425370024 18111852950 549099 3.25962410332
31 New Mexico 2014 3800450987 2237304630 105893888 781283409 92959 0.12075511234
32 New York 2014 88433809412 1.3458e+11 4290507924 23074327027 1404518 4.46027618824
33 North Carolina 2014 31376674756 52863883680 2661378529 12486268679 483126 1.68481116872
34 North Dakota 2014 5492795154 3829392074 49960606 152513068 55136 0.18644374456
35 Ohio 2014 52240104252 70268895120 3881651849 12670668757 583261 2.45017998744
36 Oklahoma 2014 6308690348 13588520904 273496793 2649791970 183501 0.39794422504
37 Pennsylvania 2014 40354943154 13787777664 4264840885 2631653191 215677 1.08285441636
38 Puerto Rico 2014 20238018075 83086063845 2398383171 18097788090 662890 2.0664816384
39 Rhode Island 2014 2388748799 8353607988 115841904 1135537256 54960 0.21484713574
40 South Carolina 2014 29624187799 37728697389 4228389229 5538523165 190304 1.34705770376
41 South Dakota 2014 1593697270 1041924500 39281446 143404248 45867 0.0527124354
42 Tennessee 2014 32940171718 69754014293 2333992810 25333886659 300604 2.05388372022
43 Texas 2014 2.88049e+11 3.02277e+11 10947592596 45446796290 1648036 11.80652
44 Utah 2014 12305529420 11118424611 891716624 2007287296 141410 0.46847908062
45 Vermont 2014 3669277804 4759797794 274869724 226113141 29613 0.16858151196
46 Virginia 2014 19255244148 24286941582 2000142373 5855261491 463613 0.8708437146
47 Washington 2014 90547036334 52378630833 20689637743 8302348527 427052 2.85851334334
48 West Virginia 2014 7486181404 3811090386 549490885 278680173 75337 0.2259454358
49 Wisconsin 2014 23428059266 23524598717 1560985127 6063467237 292891 0.93905315966
50 Wyoming 2014 1757198477 1901836758 19014795 128846273 44190 0.0731807047
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment