Skip to content

Instantly share code, notes, and snippets.

@mccannf

mccannf/index.csv

Forked from anonymous/index.csv
Last active December 12, 2015 02:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mccannf/4703854 to your computer and use it in GitHub Desktop.
Save mccannf/4703854 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.csv
mydate Afghan Security Forces afghaninterpolated U.S. Troops usinterpolated Other Foreign Troops otherinterpolated
November-01 0 0 1300 0 0 0
December-01 240 1 2500 0 1667 1
January-02 480 1 4067 0 3333 1
February-02 720 1 5633 0 5000 0
March-02 960 1 7200 0 5000 0
April-02 1200 1 7425 0 5000 0
May-02 1440 1 7650 0 4500 0
June-02 1680 1 7875 0 5000 0
July-02 1920 1 8100 0 4900 1
August-02 2160 1 8567 0 4800 1
September-02 2400 1 9033 0 4700 0
October-02 2640 1 9500 0 4743 1
November-02 2880 1 9500 0 4786 1
December-02 3120 1 9700 0 4829 1
January-03 3360 1 9600 0 4871 1
February-03 3600 1 9600 0 4913 1
March-03 3840 1 9500 0 4957 1
April-03 4080 1 9300 0 5000 0
May-03 4320 1 9800 0 5000 1
June-03 4560 1 9900 0 5000 1
July-03 4800 1 9800 0 5000 1
August-03 5040 1 10100 0 5000 1
September-03 5280 1 9700 0 5000 0
October-03 5520 1 10400 0 5071 1
November-03 5760 1 12000 0 5142 1
December-03 6000 0 13100 0 5213 1
January-04 10250 1 13600 0 5284 1
February-04 14500 1 12300 0 5355 1
March-04 18750 1 14000 0 5426 1
April-04 23000 1 20300 0 5500 0
May-04 27250 1 17700 0 5750 1
June-04 31500 1 17800 0 6000 0
July-04 35750 1 17300 0 6250 1
August-04 40000 1 15800 0 6500 0
September-04 44250 1 16600 0 8000 0
October-04 48500 1 16100 0 10000 0
November-04 52750 1 15800 0 9400 0
December-04 57000 0 16700 0 8500 0
January-05 57750 1 17200 0 9000 0
February-05 58500 1 17300 0 8000 0
March-05 59250 1 19000 0 8000 1
April-05 60000 1 19500 0 8000 1
May-05 60750 1 18000 0 8000 1
June-05 61500 1 18200 0 8000 0
July-05 62250 1 17900 0 9250 1
August-05 63000 1 17900 0 10500 0
September-05 63750 1 17500 0 10125 1
October-05 64500 1 17800 0 9750 1
November-05 65250 1 17400 0 9375 1
December-05 66000 0 17800 0 9000 0
January-06 67667 1 19700 0 9000 1
February-06 69334 1 22600 0 9000 1
March-06 71001 1 22900 0 9000 1
April-06 72668 1 23300 0 9000 1
May-06 74335 1 22000 0 9000 0
June-06 76000 0 22000 0 9700 0
July-06 77667 1 21000 0 12350 1
August-06 79334 1 19700 0 15000 0
September-06 81001 1 20400 0 18000 0
October-06 82668 1 20800 0 20000 0
November-06 84335 1 20400 0 21000 0
December-06 86000 0 22100 0 21000 0
January-07 89250 1 26000 0 21460 0
February-07 92500 1 25200 0 21605 1
March-07 95750 1 24300 0 21750 0
April-07 99000 1 24100 0 21750 0
May-07 102250 1 26500 0 24000 0
June-07 105500 1 23700 0 24125 1
July-07 108750 1 23800 0 24250 0
August-07 112000 1 24000 0 25146.5 1
September-07 115250 1 24500 0 26043 0
October-07 118500 1 24800 0 30177 0
November-07 121750 1 24700 0 28440 1
December-07 125000 0 24700 0 26703 0
January-08 128178 1 27500 0 27476.5 1
February-08 131355 1 27000 0 28250 0
March-08 134533 1 30500 0 28125 1
April-08 137710 0 32500 0 28000 0
May-08 139410 1 31300 0 28675 1
June-08 141100 1 30700 0 29350 0
July-08 142810 1 33700 0 29503 1
August-08 144510 1 31700 0 29656 1
September-08 146210 1 32400 0 29810 0
October-08 147910 0 32400 0 30100 0
November-08 150866 1 30858 0 31150 0
December-08 153822 1 31800 0 31400 0
January-09 156778 1 34400 0 31880 0
February-09 159734 1 36600 0 31520 0
March-09 162690 0 38800 0 32140 0
April-09 165247.5 1 41500 0 32175 0
May-09 167805 1 52100 0 32227.5 1
June-09 170362.5 1 57600 0 32280 0
July-09 172920 0 62800 0 34550 0
August-09 177190 1 62200 0 35110 1
September-09 181460 1 65200 0 35670 1
October-09 185730 1 67100 0 36230 0
November-09 190000 0 67300 0 37300 1
December-09 195089 0 67400 0 38370 0
January-10 201726 1 71700 0 38540 1
February-10 207863 1 76500 0 38710 0
March-10 215000 0 84700 0 38890 0
April-10 219423.5 1 83000 0 40139 0
May-10 223847 0 87000 0 40604.5 1
June-10 230231 1 93000 0 41070 0
July-10 236615 1 96000 0 41315 0
August-10 243000 0 100000 0 41389 0
September-10 258668 0 95000 0 40910.5 1
October-10 261005 0 95000 0 40432 0
November-10 263697 1 95000 0 40930 0
December-10 266389 0 97000 0 41730 0
January-11 270800 0 97000 0 41811.5 1
February-11 275868 1 97000 0 41893 0
March-11 280935 1 100000 0 42203 0
April-11 286003 0 100000 0 42301.5 1
May-11 290488 1 100000 0 42400 0
June-11 294971 1 99000 0 42457 0
July-11 299455 1 99000 0 41568 1
August-11 303941 0 98000 0 40679 0
September-11 306903 0 98000 0 40670 0
October-11 306903 1 97000 0 40638 0
November-11 306903 0 94000 0 40476 0
December-11 306903 0 91000 0 40313 0
January-12 312680 1 89000 0 40386 0
February-12 318459 1 89000 0 39911 1
March-12 324236 1 89000 0 39436 1
April-12 330014 0 89000 0 38961 0
May-12 336806 0 88000 0 39469 0
June-12 344108 0 88000 0 39146 1
July-12 342378 1 86000 0 38824 1
August-12 340648 1 84000 0 38502 1
September-12 338917 1 68000 0 38179 0
October-12 337187 0 68000 0 36905 0
November-12 337187 1 68000 0 36905 1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Afghanistan Troops</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
.title{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: #073E71;
}
svg {
width: 960px;
height: 500px;
border: solid 1px #ccc;
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.Afghan rect:hover {
fill: green;
}
rect:hover {
fill: purple;
}
.Other Foreign rect:hover {
fill: purple;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
opacity:1;
}
.nonopaque {
opacity: 1;
}
.semiopaque {
opacity: 0.5;
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p><strong><span id="tipdate">Month and year go here</span></strong></p>
<p><span id="tipcat">Heading</span></p>
<p><span id="tipval">100</span></p>
</div>
<div>
<span class="title">Troops and Security forces in Afghanistan 2001-2012</span>
</div>
<script type="text/javascript">
var w = 960,
h = 500,
p = [20, 50, 30, 20],
x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]),
y = d3.scale.linear().range([0, h - p[0] - p[2]]),
z = d3.scale.ordinal().range(["darkblue", "blue", "lightblue"]),
cats = d3.scale.ordinal().range(["Afghan","US", "OtherForeign"]),
interpolated = d3.scale.ordinal().range(["nonopaque","semiopaque"]),
parse = d3.time.format("%B-%y").parse,
format = d3.time.format("%y")
tipformat = d3.time.format("%B-%y");
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");
var gmouseover = function() {
var troopCat = String(d3.select(this).attr("data-measure"));
d3.select("#tooltip")
.select("#tipcat")
.text(function(d){ return troopCat});
//Show the tooltip
// d3.select("#tooltip").classed("hidden", false);
};
/*var gmouseout= function(d) {
var rect=d3.select(this);
Hide the tooltip
d3.select("#tooltip").classed("hidden", true)
};*/
var rectmouseover = function() {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + 100;
var yPosition = parseFloat(d3.select(this).attr("y")) + h;
var theDate = (d3.select(this).attr("title"));
var numTroops = d3.format(",.0f")(d3.select(this).attr("class"));
//
//Update the tooltip position and value
d3.select("#tooltip")
.select("#tipdate")
.text(function(d){ return theDate});
/*d3.select("#tooltip")
.select("#tipcat")
.text(function(d){ return troopCat});*/
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#tipval")
.text(function(d){ return numTroops});
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
};
var rectmouseout= function(d) {
var rect=d3.select(this);
rect.transition().duration(100)
.style("fill", function(d) { return color(d.name); })
.style("stroke", "none");
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true)
};
var data= d3.csv("index.csv", function(afghan) {
/* var troopNames= d3.keys(data[0]).filter(function(key) { return key !==mydate; });
console.log(troopNames);*/
// Transpose the data into layers by tnum.
var trooptypes = d3.layout.stack()(["Afghan Security Forces","U.S. Troops", "Other Foreign Troops" ].map(function(tnum) {
return afghan.map(function(d) {
return {x: parse(d.mydate), y: +d[tnum]};
});
}))
//.attr("class", function(troopNames, i){return d(i);});
// .values(function(d) { return d.tnum; });
console.log(trooptypes);
var interp = d3.layout.stack()(["afghaninterpolated","usinterpolated", "otherinterpolated" ].map(function(tinterp) {
return afghan.map(function(d) {
return {inter: +d[tinterp]};
});
}))
console.log(interp);
var thedata = data;
// Compute the x-domain (by date) and y-domain (by top).
x.domain(trooptypes[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(trooptypes[trooptypes.length - 1], function(d) { return d.y0 + d.y; })]);
// Add a group for each tnum.
var tnum = svg.selectAll("g.tnum")
.data(trooptypes)
.enter().append("svg:g")
//.attr("class", (function(thedata) { return d[0]; }))
.style("fill", function(d, i) { return z(i); })
.attr("data-measure", function(d, i) { return cats(i); })
.on("mouseover", gmouseover);
// .on("mouseout", gmouseout);
// Add a rect for each date.
var rect = tnum.selectAll("rect")
.data(Object)
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return -y(d.y0) - y(d.y); })
.attr("height", function(d) { return y(d.y); })
.attr("width", x.rangeBand())
.attr("title", function(d) { return d.x; })
.attr("data-measure", function(d) { return d.y; })
/*.style("fill", function(d, i) { if (d.int == 1) {return "red"} // if close is less than 400 fill = red
else { return ;}})*/
// .text(function(d){return d.parentNode.attr("class")})
.on("mouseover", rectmouseover)
.on("mouseout", rectmouseout);
var interp = rect.selectAll("rect")
.data(interp)
.enter().append("svg:g")
.style("fill", "white")
.attr("class", function(d) {return interpolated(d.inter); });
//
// Add a label per date.
var label = svg.selectAll("text")
.data(x.domain())
.enter().append("svg:text")
.attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
.attr("y", 6)
.attr("text-anchor", "middle")
.attr("dy", ".71em")
.text(format);
// Add y-axis rules.
var rule = svg.selectAll("g.rule")
.data(y.ticks(5))
.enter().append("svg:g")
.attr("class", "rule")
.attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });
rule.append("svg:line")
.attr("x2", w - p[1] - p[3])
.style("stroke", function(d) { return d ? "#fff" : "#000"; })
.style("stroke-opacity", function(d) { return d ? .7 : null; });
rule.append("svg:text")
.attr("x", w - p[1] - p[3] + 6)
.attr("dy", ".35em")
.text(d3.format(",d"));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment