Skip to content

Instantly share code, notes, and snippets.

@bkamapantula

bkamapantula/colorbrewer.css

Last active August 29, 2015 14:28
Show Gist options
  • Save bkamapantula/b2f7a900ebd559a9e6a5 to your computer and use it in GitHub Desktop.
Save bkamapantula/b2f7a900ebd559a9e6a5 to your computer and use it in GitHub Desktop.
Download ZIP
Women MPs - India 2015 | State-wise
Raw
colorbrewer.css
.Blues .q0-3{fill:rgb(222,235,247)}
.Blues .q1-3{fill:rgb(158,202,225)}
.Blues .q2-3{fill:rgb(49,130,189)}
.Blues .q0-4{fill:rgb(239,243,255)}
.Blues .q1-4{fill:rgb(189,215,231)}
.Blues .q2-4{fill:rgb(107,174,214)}
.Blues .q3-4{fill:rgb(33,113,181)}
.Blues .q0-5{fill:rgb(239,243,255)}
.Blues .q1-5{fill:rgb(189,215,231)}
.Blues .q2-5{fill:rgb(107,174,214)}
.Blues .q3-5{fill:rgb(49,130,189)}
.Blues .q4-5{fill:rgb(8,81,156)}
.Blues .q0-6{fill:rgb(239,243,255)}
.Blues .q1-6{fill:rgb(198,219,239)}
.Blues .q2-6{fill:rgb(158,202,225)}
.Blues .q3-6{fill:rgb(107,174,214)}
.Blues .q4-6{fill:rgb(49,130,189)}
.Blues .q5-6{fill:rgb(8,81,156)}
.Blues .q0-7{fill:rgb(239,243,255)}
.Blues .q1-7{fill:rgb(198,219,239)}
.Blues .q2-7{fill:rgb(158,202,225)}
.Blues .q3-7{fill:rgb(107,174,214)}
.Blues .q4-7{fill:rgb(66,146,198)}
.Blues .q5-7{fill:rgb(33,113,181)}
.Blues .q6-7{fill:rgb(8,69,148)}
.Blues .q0-8{fill:rgb(247,251,255)}
.Blues .q1-8{fill:rgb(222,235,247)}
.Blues .q2-8{fill:rgb(198,219,239)}
.Blues .q3-8{fill:rgb(158,202,225)}
.Blues .q4-8{fill:rgb(107,174,214)}
.Blues .q5-8{fill:rgb(66,146,198)}
.Blues .q6-8{fill:rgb(33,113,181)}
.Blues .q7-8{fill:rgb(8,69,148)}
.Blues .q0-9{fill:rgb(247,251,255)}
.Blues .q1-9{fill:rgb(222,235,247)}
.Blues .q2-9{fill:rgb(198,219,239)}
.Blues .q3-9{fill:rgb(158,202,225)}
.Blues .q4-9{fill:rgb(107,174,214)}
.Blues .q5-9{fill:rgb(66,146,198)}
.Blues .q6-9{fill:rgb(33,113,181)}
.Blues .q7-9{fill:rgb(8,81,156)}
.Blues .q8-9{fill:rgb(8,48,107)}
Raw
colorbrewer.js
// This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/).
var colorbrewer = {
Blues: {
3: ["#deebf7","#9ecae1","#3182bd"],
4: ["#eff3ff","#bdd7e7","#6baed6","#2171b5"],
5: ["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"],
6: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"],
7: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
8: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
9: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]
}};
Raw
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="colorbrewer.css" rel="stylesheet">
<script src="colorbrewer.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<style>
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.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;
}
.info-head:hover .info {
display: block;
}
.info {
display: none;
background: #C8C8C8;
margin-left: 28px;
padding: 10px;
position: absolute;
z-index: 1000;
width: 150px;
height: 30px;
}
.info-head {
margin: 10px;
cursor: default;
}
h4 {
text-align: center;
}
.floating-legend {
margin-top: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h4>National 1.2</h4>
<div class="svg col-md-9"></div>
<div class="floating-legend-wrapper col-md-3">
<div class="floating-legend"></div>
</div>
</div>
</div>
<script>
var margin = {
top: 70,
right: 30, // 80,
bottom: 100,
left: 150
};
var width = $(window).width()*0.7 - margin.left - margin.right;
var height = window.innerHeight - margin.top - margin.bottom;
//var height = document.documentElement.clientHeight - margin.top - margin.bottom;
var y0 = d3.scale.ordinal()
.rangeRoundBands([height, 0], .2);
// set women MPs % scale as 0% to 100%
var x = d3.scale.linear();
// x axis - women MP %
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.tickSize(0);
// y axis - states
var yAxis = d3.svg.axis()
.scale(y0)
.orient("left")
.ticks(20);
var colorScale = d3.scale.linear()
.domain([0, 5, 10, 40, 80])
.range(colorbrewer.Blues[5]);
var svg = d3.select(".svg").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 tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<p>State: " + d['State'] + "</p><p>Total seats: " + d['Seats'] + "</p>" + "<p>Women MPs: " + d['Wseats'] + ", " + d[2014] + "%</p>";
});
svg.call(tip);
d3.csv("national-mps-2015.csv", function(error, data) {
// set domain for x and y axes
x.domain([0, 100])
.range([0, width]);
y0.domain(data.map(function(d) {
return d.State;
}));
// adds x axis
svg.append("g")
.attr("id", "xAxisYa")
.attr("class", "x axis")
.attr("transform", "translate(0, 0)") //+ height + ")")
.call(xAxis)
.selectAll("text")
.attr("class", "xAxisLabels")
.style("text-anchor", "end")
.attr("dx", "-.55em")
.attr("dy", ".21em")
.attr("x", "0.7em")
.attr("y","-.5em")
//.attr("transform", "rotate(90)")
svg.select(".x.axis")
.append("text")
.attr("class", "xaxislabel")
.attr("x", '65%')
.attr("y", -25)
.style("text-anchor", "end")
.text("Women MPs %");
svg.select(".x.axis")
.append("text")
.attr("class", "xaxislabel")
.attr("x", '16%')
.attr("y", -25)
.style("text-anchor", "end")
.text("mouseover blue bars for more information");
console.log( $("#xAxisYa").width() );
// adds y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// add bars
var updateChart = function() {
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.style("fill", function(d) {
if(d.Seats) {
return colorScale(d.Seats);
}
})
.attr("x", function(d) {
5;
})
.attr("y", function(d) {
return y0(d.State);
})
.attr("height", 12)
.attr("width", function(d) {
return x(d[2014]);
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
}
updateChart();
var xAxisWidth = width/2; //$(".xAxisLabels")[5].getBoundingClientRect().left-175;
// draw parity line
svg.append("line")
.attr("class", "genderLines")
.attr("x1", xAxisWidth)
.attr("y1", 5)
.attr("x2", xAxisWidth)
.attr("y2", height)
.style("stroke-dasharray", "2,2")
.style("stroke", "black")
.style("stroke-width", 2);
d3.select("svg")
.append("text")
.attr("transform", "translate(" + width*0.645 + ", " + height/2 + ") rotate(90)")
.text("50% seats")
// 33% line
svg.append("line")
.attr("x1", width/3)
.attr("y1", 5)
.attr("x2", width/3)
.attr("y2", height)
.style("stroke-dasharray", "2,2")
.style("stroke", "black")
.style("stroke-width", 2);
d3.select("svg")
.append("text")
.attr("transform", "translate(" + width*0.48 + ", " + height/2 + ") rotate(90)")
.text("Proposed 33% reservation");
// add legend
var legend = d3.select(".floating-legend")
.append("svg")
.selectAll("legend")
.data(colorScale.domain(), function(d) {
return d;
})
.enter().append("g")
.attr("class", "legend");
legend.append("rect")
.attr("x", function(d,i) {
return 50*i;
})
.attr("y", 100)
.attr("width", 50)
.attr("height", 20)
.style("fill", function(d) {
return colorScale(d);
});
legend.append("text")
.text(function(d) { return "≥ " + Math.round(d); })
.attr("x", function(d, i) { return 50 * i; })
.attr("y", 100 + 100/3)
//.style("fill", "black")
.style("font-size", "10px");
legend.append("text")
.text("States with parliament seats")
.attr("x", 40)
.attr("y", 90);
svg.selectAll(".legend")
.attr("transform", "translate(" + $(window).width()*0.8 + "," + $(window).height()*0.5 + ")");
}); // end of d3.csv function
//}); // end of csv call
</script>
</body>
</html>
Raw
national-mps-2015.csv
State Wseats Seats 2014
Arunachal Pradesh 0 2 0
Goa 0 2 0
Haryana 0 10 0
Himachal Pradesh 0 4 0
Jharkhand 0 14 0
Manipur 0 2 0
Meghalaya 0 2 0
Mizoram 0 1 0
Nagaland 0 1 0
Sikkim 0 1 0
Tripura 0 2 0
Dadra &Nagar Haveli 0 1 0
Pondicherry 0 1 0
Andaman and Nicobar 0 1 0
Karnataka 1 28 3.6
Rajasthan 1 25 4
Kerala 1 20 5
Telangana 1 17 5.9
Bihar 3 40 7.5
Punjab 1 13 7.7
Andhra Pradesh 2 25 8
Chhattisgarh 1 11 9.1
Orissa 2 21 9.5
Tamil Nadu 4 39 10.3
Maharashtra 5 48 10.4
Assam 2 15 13.3
Delhi 1 7 14.3
Gujarat 4 26 15.4
Uttar Pradesh 13 80 16.3
Jammu Kashmir 1 6 16.7
Madhya Pradesh 5 29 17.2
Uttarakhand 1 5 20
West Bengal 12 42 28.6
Chandigarh 1 1 100
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment