Skip to content

Instantly share code, notes, and snippets.

@Cosxin

Cosxin/index.html

Created February 16, 2016 00:10
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 Cosxin/43513a44e620a7e245ac to your computer and use it in GitHub Desktop.
Save Cosxin/43513a44e620a7e245ac to your computer and use it in GitHub Desktop.
Download ZIP
stackbar transition1
Raw
index.html
<meta charset="utf-8">
<html>
<head>
</head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis {
shape-rendering: crispEdges;
}
.x.axis line,
.x.axis path {
fill: none;
stroke: #000;
}
.y.axis line,
.y.axis path {
fill: none;
stroke-width:2;
stroke: #000;
}
rect{
fill:#FFF;
}
</style>
<body>
</body>
<script type="text/javascript" src="../lib/d3/d3.v3.min.js"></script>
<script type="text/javascript">
var margin = {top: 20, right: 80, bottom: 80, left: 40},
width = 1024 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal().range(['#ffffcc','#a1dab4','#41b6c4','#2c7fb8','#253494']);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(10);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(8)
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dataset;
d3.csv('nepal_new.csv',function(error,data){
if(error) throw error;
data = data.slice(0,9);
color.domain(d3.keys(data[0]).filter(function(d){return d !== "District";}));
data.forEach(function(d){
var y0 = 0;
d.cumsum = color.domain().map(function(year){return {year:year, y0: y0, y1:y0 += +d[year]};});
d.total = d.cumsum[d.cumsum.length - 1].y1;
});
data.sort(function(a,b){return b.total - a.total;});
y.domain([0,1.10 * d3.max(data,function(d){return d.total;})]);
x.domain(data.map(function(d){return d.District;}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// .selectAll("text")
// .attr("y", 6)
// .attr("dy", ".71em")
// .style("text-anchor", "end")
// .attr("transform","rotate(-90)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Total");
var District = svg.selectAll(".District")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.District) + ",0)"; });
District.selectAll("rect")
.data(function(d) { return d.cumsum; })
.enter().append("rect")
.attr("y",0)
.transition()
.duration(2000)
.delay(function(d,i){return 300 * i;})
.attr("y", function(d) { return y(d.y1); })
.attr("width", x.rangeBand())
.style("fill", function(d) { return color(d.year); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); });
drawLegend();
});
function drawLegend(){
var legendRectSize = 18;
var legendSpacing = 4;
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter()
.append("g")
.attr("class","legend")
.attr('transform',function(d,i){
var height = legendRectSize + legendSpacing;
//var offset = height * colors.length / 2;
var horz = - legendRectSize;
var vert = i * height; //- offset;
return 'translate(' + (width + horz) + ',' + vert + ')';
});
legend.append("rect")
.attr('width', legendRectSize)
.attr('height',legendRectSize)
.style('fill', function(d){return color(d);});
legend.append("text")
.attr('x',legendRectSize + legendSpacing)
.attr('y',legendRectSize - legendSpacing)
//.style('stroke', function(d){return cs(d);})
.text(function(d){return d;});
}
</script>
</html>
Raw
nepal_new.csv
District 2007 2008 2009 2010 2011
Bajhang 1875 2011 2284 3066 3104
Dadeldhura 1261 1419 1702 2021 2061
Arghakhanchi 2063 1859 2284 2365 2535
Darchula 1382 1483 1505 1838 1957
Chitwan 1527 4468 4634 6488 6488
Panchthar 2096 2063 2173 3177 3184
Sindhupalchok 1802 2699 2699 3201 3460
Udayapur 1924 2230 2230 2908 2988
Mugu 468 486 486 589 682
Khotang 902 2164 2257 2294 2763
Kathmandu 10894 18501 18501 18018 18018
Banke 2114 2900 3200 3535 3845
Gorkha 2185 3156 3319 3483 3485
Baitadi 2016 2276 2525 3073 3080
Jajarkot 909 1477 1479 1647 1655
Taplejung 1669 1733 1824 2255 2321
Dolpa 480 523 523 533 635
Kavrepalanchok 4416 6504 6504 6989 7136
Ilam 2601 2974 3054 3421 3482
Saptari 660 2292 2295 2570 2847
Rolpa 1471 1571 1805 2157 2248
Pyuthan 1523 1713 2073 2031 2381
Solukhumbu 1306 1228 1228 1557 1557
Sunsari 4116 4216 4221 4527 4832
Myagdi 1382 1252 1252 1562 1570
Rasuwa 506 540 598 607 679
Kalikot 899 986 1272 1885 1885
Parbat 2131 2287 2351 2702 2702
Gulmi 2497 3246 3863 4040 4238
Lamjung 2361 2656 2731 3074 3160
Doti 1625 1738 2185 2511 2511
Okhaldhunga 1527 1509 1719 2114 2206
Achham 1754 2281 2283 3295 3295
Dolakha 2030 2342 2405 2740 2962
Rukum 161 1377 1377 1540 1596
Dhading 1078 3462 3727 3985 4381
Kaski 6387 6308 6469 7068 7476
Humla 402 459 461 617 622
Bhaktapur 2184 4739 4739 5141 5141
Sindhuli 1523 2492 2934 3558 3660
Jhapa 5719 6153 7086 9748 9767
Dhankuta 1614 1743 1930 2132 2159
Manang 198 212 213 206 207
Bardiya 2222 2541 2843 3140 3140
Nuwakot 2269 2551 2758 2532 2599
Ramechhap 1930 2112 2455 2891 2915
Terhathum 1384 1423 1489 1598 1624
Rautahat 1723 2061 2063 2287 2387
Kapilbastu 2058 3447 3447 3807 3973
Jumla 550 804 805 1089 1089
Bara 1483 2291 2291 2893 2893
Bajura 1003 1114 1293 1449 2159
Dhanusha 1666 2347 2434 2540 2589
Kanchanpur 2034 2756 3117 3120 3120
Palpa 3330 3407 3859 4316 4423
Dailekh 1597 1929 1929 2327 2327
Sankhuwasabha 1778 1937 2065 2226 2502
Tanahu 2603 3887 4525 4547 4573
Nawalparasi 4048 4435 5668 5023 5958
Surkhet 2711 2904 2907 3183 3309
Mahottari 1658 2157 2157 2300 2466
Bhojpur 1713 1901 2193 2360 2368
Kailali 4349 5055 5388 5099 5116
Makwanpur 3061 3660 3837 4738 4792
Siraha 1988 2383 2383 2715 2797
Salyan 1703 1683 1702 1749 1833
Parsa 2094 2358 2358 2757 2757
Lalitpur 5403 6374 6374 6331 6331
Morang 5345 4755 4962 4923 5133
Sarlahi 1631 2155 2369 2344 2823
Mustang 330 395 470 449 480
Dang 3700 3450 4607 4606 4615
Baglung 2970 3232 3729 4087 4087
Syangja 3785 4156 4716 5291 5318
Rupandehi 3666 4179 5311 6098 8780
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment