cbgaindia · shreyaagrawal0809 · Dec 7, 2018 · Dec 7, 2018 · Dec 7, 2018 · Dec 7, 2018
diff --git a/visualisations/assam-budget-board/3---administration-of-justice.csv b/visualisations/assam-budget-board/3---administration-of-justice.csv
diff --git a/visualisations/assam-budget-board/Administration of justice.csv b/visualisations/assam-budget-board/Administration of justice.csv
@@ -0,0 +1,3 @@
+Voted_Charged,BUDGET_2018_19
+"Charged",5991.87
+"Voted",56823.5403
diff --git a/visualisations/assam-budget-board/Grouped.csv b/visualisations/assam-budget-board/Grouped.csv
@@ -0,0 +1,3 @@
+"Voted_Charged","ACTUALS 2016-17","BUDGET 2017-18","REVISED 2017-18","BUDGET 2018-19"
+"Charged",5236.4,5963.30882,6246.30882,5991.87
+"Voted",16775.55,55598.3101699999,57161.4181399999,56823.5403
diff --git a/visualisations/assam-budget-board/Voted_Charged_grouped.html b/visualisations/assam-budget-board/Voted_Charged_grouped.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<style>
+
+.axis .domain {
+  display: none;
+}
+body {
+  font: 10px sans-serif;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.bar {
+  fill: orange;
+}
+
+.bar:hover {
+  fill: orangered ;
+}
+
+.x.axis path {
+  display: none;
+}
+
+.d3-tip {
+  line-height: 1;
+  font-weight: bold;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  width: 100%;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.8);
+  content: "\25BC";
+  position: absolute;
+  text-align: center;
+}
+
+/* Style northward tooltips differently */
+.d3-tip.n:after {
+  margin: -1px 0 0 0;
+  top: 100%;
+  left: 0;
+}
+
+</style>
+<svg width="960" height="500"></svg>
+<script src="https://d3js.org/d3.v4.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
+<script>
+
+var svg = d3.select("svg"),
+    margin = {top: 100, right: 200, bottom: 100, left: 200},
+    width = +svg.attr("width") - margin.left - margin.right,
+    height = +svg.attr("height") - margin.top - margin.bottom,
+    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+var x0 = d3.scaleBand()
+    .rangeRound([0, width])
+    .paddingInner(0.1);
+
+var x1 = d3.scaleBand()
+    .padding(0.05);
+
+var y = d3.scaleLinear()
+    .rangeRound([height, 0]);
+
+var z = d3.scaleOrdinal()
+        .range(["#FF0000", "#3B05FF", "#FF0087", "#034C00"]);
+
+var tip = d3.tip()
+  .attr('class', 'd3-tip')
+  .offset([-10, 0])
+  .html(function(d) {
+    console.log(d)
+    return "<strong>Name:</strong>" + d.key + "<br><strong>Value:</strong>" + d.value;
+  });
+
+  svg.call(tip);
+
+d3.csv("Grouped.csv", function(d, i, columns) {
+  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
+  return d;
+}, function(error, data) {
+  if (error) throw error;
+
+  var keys = data.columns.slice(1);
+
+  x0.domain(data.map(function(d) { return d.Voted_Charged; }));
+  x1.domain(keys).rangeRound([0, x0.bandwidth()]);
+  y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();
+
+  g.append("g")
+    .selectAll("g")
+    .data(data)
+    .enter().append("g")
+      .attr("transform", function(d) { return "translate(" + x0(d.Voted_Charged) + ",0)"; })
+    .selectAll("rect")
+    .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
+    .enter().append("rect")
+      .attr("x", function(d) { return x1(d.key); })
+      .attr("y", function(d) { return y(d.value); })
+      .attr("width", x1.bandwidth())
+      .attr("height", function(d) { return height - y(d.value); })
+      .attr("fill", function(d) { return z(d.key); })
+      .on('mouseover', tip.show)
+      .on('mouseout', tip.hide);
+
+  g.append("g")
+      .attr("class", "axis")
+      .attr("transform", "translate(0," + height + ")")
+      .call(d3.axisBottom(x0))
+      .append("text")
+
+   .attr("x",width/2 )
+   .attr("y", 50)
+   .attr("dy", "0.32em")
+   .attr("fill", "#000")
+   .attr("font-weight", "bold")
+   .attr("text-anchor", "start")
+   .text("Voted/Charged");
+
+
+  g.append("g")
+      .attr("class", "axis")
+      .call(d3.axisLeft(y).ticks(null, "s"))
+      .append("text")
+    .attr("transform", "rotate(-90)")
+      .attr("x",-height/2 )
+      .attr("y", -45)
+      .attr("dy", "0.32em")
+      .attr("fill", "#000")
+      .attr("font-weight", "bold")
+      .attr("text-anchor", "start")
+      .text("Total Expenditure");
+
+  g.append("text")
+       .attr("x", (width / 2))             
+       .attr("y", 0 - (margin.top / 2))
+       .attr("text-anchor", "middle")  
+       .style("font-size", "16px") 
+       .style("text-decoration", "bold")  
+       .text("Total expenditure on voted and charged(2018-19)");
+
+  var legend = g.append("g")
+      .attr("font-family", "sans-serif")
+      .attr("font-size", 10)
+      .attr("text-anchor", "end")
+    .selectAll("g")
+    .data(keys.slice().reverse())
+    .enter().append("g")
+      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+  legend.append("rect")
+      .attr("x", width + 19)
+      .attr("width", 19)
+      .attr("height", 19)
+      .attr("fill", z);
+
+  legend.append("text")
+      .attr("x", width+ 135)
+      .attr("y", 9.5)
+      .attr("dy", "0.32em")
+      .text(function(d) { return d; });
+});
+
+</script>
diff --git a/visualisations/assam-budget-board/Voted_charged.html b/visualisations/assam-budget-board/Voted_charged.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+body {
+  font: 10px sans-serif;
+
+}
+
+.vertical-text {
+	transform: rotate(-90.0deg);
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.bar {
+  fill: orange;
+}
+
+.bar:hover {
+  fill: orangered ;
+}
+
+
+.d3-tip {
+  line-height: 1;
+  font-weight: bold;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  width: 100%;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.8);
+  content: "\25BC";
+  position: absolute;
+  text-align: center;
+}
+
+/* Style northward tooltips differently */
+.d3-tip.n:after {
+  margin: -1px 0 0 0;
+  top: 100%;
+  left: 0;
+}
+</style>
+<body>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
+
+<script>
+
+var margin = {top: 40, right: 20, bottom: 30, left: 200},
+    width = 600 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+var formatPercent = d3.format(".0%");
+
+var x = d3.scale.ordinal()
+    .rangeRoundBands([0, width], .1);
+
+var y = d3.scale.linear()
+    .range([height, 0]);
+
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient("bottom");
+
+var yAxis = d3.svg.axis()
+    .scale(y)
+    .orient("left")
+
+
+var tip = d3.tip()
+  .attr('class', 'd3-tip')
+  .offset([-10, 0])
+  .html(function(d) {
+    return "<strong>"+d.Voted_Charged+":</strong> <span style='color:red'>" + d.BUDGET_2018_19 + "</span>";
+  })
+
+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 + ")");
+
+svg.call(tip);
+
+d3.csv("Administration of justice.csv", type, function(error, data) {
+  x.domain(data.map(function(d) { return d.Voted_Charged; }));
+  y.domain([0, d3.max(data, function(d) { return d.BUDGET_2018_19; })]);
+
+  svg.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis)
+      .append('text')
+      .text('Voted/Charged')
+      .attr('x',(width/2))
+      .attr('y', margin.bottom)
+
+  svg.append("g")
+      .attr("class", "y axis")
+      .call(yAxis)
+      .append('text')
+      .attr("transform", "rotate(-90)")
+        .attr("y", -75)
+        .attr("x",0 - (height / 2))
+        .attr("dy", "1em")
+        .style("text-anchor", "middle")
+        .text("Expenditure Budget 2018-19");
+
+svg.append("text")      // text label for the x axis
+        .attr("x", 265 )
+        .attr("y", 240 )
+        .style("text-anchor", "middle")
+        .text("Date");
+
+
+  svg.selectAll(".bar")
+      .data(data)
+    .enter().append("rect")
+      .attr("class", "bar")
+      .attr("x", function(d) { return x(d.Voted_Charged); })
+      .attr("width", x.rangeBand())
+      .attr("y", function(d) { return y(d.BUDGET_2018_19); })
+      .attr("height", function(d) { return height - y(d.BUDGET_2018_19); })
+
+      .on('mouseover', tip.show)
+      .on('mouseout', tip.hide)
+
+});
+
+function type(d) {
+  d.BUDGET_2018_19 = +d.BUDGET_2018_19;
+  return d;
+}
+
+</script>