<!DOCTYPE html>
<html>
<head>
<title>Afghanistan Troops</title>
<script type="text/javascript" src="//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>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