Created
April 27, 2015 00:58
-
-
Save etachov/b8359ddb18dca7dbf914 to your computer and use it in GitHub Desktop.
CT aid dot plot
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| country | objective | disbursed | |
|---|---|---|---|
| Kenya | Counterterrorism | 5297145.2 | |
| Mali | Counterterrorism | 4920931.2 | |
| Egypt | Counterterrorism | 2628123 | |
| Morocco | Counterterrorism | 1500857 | |
| Pakistan | Counterterrorism | 1493790 | |
| Colombia | Counterterrorism | 1287168 | |
| Uganda | Counterterrorism | 1094019 | |
| Yemen | Counterterrorism | 1005153 | |
| Afghanistan | Counterterrorism | 869230 | |
| Jordan | Counterterrorism | 801724 | |
| Hungary | Counterterrorism | 785354 | |
| Indonesia | Counterterrorism | 772915 | |
| Lebanon | Counterterrorism | 767163 | |
| Nigeria | Counterterrorism | 759686 | |
| Turkey | Counterterrorism | 692781 | |
| Philippines | Counterterrorism | 681213.8 | |
| Mexico | Counterterrorism | 613661 | |
| Bulgaria | Counterterrorism | 544967 | |
| India | Counterterrorism | 529612 | |
| Brazil | Counterterrorism | 514855 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset = "utf-8"> | |
| <title>US Counterterrorism Assistance</title> | |
| <script type = "text/javascript" src = "http://d3js.org/d3.v3.js"></script> | |
| <style type = "text/css"> | |
| body { | |
| background-color: #fff; | |
| font-family: sans-serif, Helvetica, Arial; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| margin: 20px 0 0 85px; | |
| } | |
| p { | |
| font-size: 14px; | |
| margin: 10px 0 0 85px; | |
| } | |
| a:link{ | |
| color: #4086AA; | |
| } | |
| svg{ | |
| background-color: #fff; | |
| } | |
| circle:hover { | |
| fill: #4086AA; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| } | |
| .y.axis path, | |
| .y.axis line { | |
| opacity: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> Top 20 Recipients of U.S. Counterterrorism Assistance </h1> | |
| <p>Source: <a href="http://catalog.data.gov/dataset/foreign-assistance-dashboard/resource/e2affc25-ddba-4d93-8453-4c1f48b25ecc" target="_blank">data.gov</a>, 2013 </p> | |
| <script type = "text/javascript"> | |
| //To do: | |
| //-redo the padding so there's actual var names | |
| var w = 750; | |
| var h = 425; | |
| var padding = [ 10, 10, 20, 85]; | |
| var xScale = d3.scale.linear() | |
| .range([ 0, w - padding[1] - padding[3] ]); | |
| var yScale = d3.scale.ordinal() | |
| .rangeRoundBands([ padding[0], h - padding[2] ], 1); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(6) | |
| .outerTickSize(0); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left"); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| d3.csv("ct_aid.csv", function(data) { | |
| data.sort(function(a, b) { | |
| return d3.descending(+a.disbursed, +b.disbursed); | |
| }); | |
| xScale.domain([ 0, d3.max(data, function(d) { | |
| return +d.disbursed; | |
| }) ]); | |
| yScale.domain(data.map(function(d) { | |
| return d.country; })); | |
| //narrow rects as lines | |
| var rects_1 = svg.selectAll("rect") | |
| .data(data) | |
| .enter() | |
| .append("rect"); | |
| rects_1 | |
| .attr("x", padding[3]) | |
| .attr("y", function(d) { | |
| return yScale(d.country); | |
| }) | |
| .attr("width", 0) | |
| .attr("height", 1) | |
| .attr("fill", "#292E37"); | |
| var rects_2 = svg.selectAll("rect") | |
| .data(data) | |
| .enter() | |
| .append("rect"); | |
| rects_2 | |
| .attr("x",function(d) { | |
| return xScale(+d.disbursed); | |
| }) | |
| .attr("y", padding[2]) | |
| .attr("width", 1) | |
| .attr("height", 0) | |
| .attr("fill", "#292E37"); | |
| // circle for end point | |
| var circles = svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle"); | |
| circles | |
| .attr("cx", 85) | |
| .attr("cy", function(d) { | |
| return yScale(d.country); | |
| }) | |
| .attr("r", 1) | |
| .attr("fill", "#292E37"); | |
| //transitions | |
| var transTime = 4000 | |
| rects_1 | |
| .transition(transTime) | |
| .attr("width", function(d) { | |
| return xScale(+d.disbursed); | |
| }); | |
| rects_2 | |
| .transition(transTime) | |
| .attr("height", function(d) { | |
| return yScale(d.country); | |
| }); | |
| circles | |
| .transition(transTime) | |
| .attr("cx", function(d) { | |
| return 85 + xScale(+d.disbursed); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d.country); | |
| }) | |
| .attr("r", 5) | |
| .attr("fill", "#292E37"); | |
| // | |
| svg | |
| .append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") | |
| .call(xAxis); | |
| svg | |
| .append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (padding[3] - 5) + ",0)") | |
| .call(yAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment