Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Week 9: Grouped Bars
Country Year Age Any method Any modern method Female Sterilization Male Sterilization Pill Injectable IUD Male condom Vaginal barrier methods Implant Other modern methods Any traditional method Rhythm Withdrawal Other traditional methods
Burkina Faso 2014 15-49 17 17 0 0 2 7 0.1 0 0 7.8 0.1 0 0 0 0
Democratic Republic of the Congo 2013-2014 15-49 20.4 7.5 0.7 0.1 0.7 1.2 0.2 3.4 0.4 0.7 0 12.9 7.5 4.5 0.9
Ethiopia 2014 15-49 35 33.8 0.3 0 1.6 23.8 0.7 0.2 0 7.2 0 1.2 1.2
Gambia 2013 15-49 9 8.1 0.6 2.1 3.9 0.3 0.6 0.6 0.9 0.2 0.3 0.4
Ghana 2014 15-49 19.5 17.7 0 0 4.3 7.3 0.4 0.8 0 3.2 1.7 1.8 0 0 1.8
Kenya 2014 15-49 55.7 55.4 1.6 7.3 29.1 3.4 1.8 11.1 0.8 0.2 0.2
Lesotho 2014 15-49 60.2 59.8 1.7 0.1 14.2 24 1.3 16.9 1.4 0.2 0.4 0.2 0.2
Liberia 2013 15-49 20.2 19.1 0.3 5 11.2 0.4 2.1 0.2 1.1 1.1 0 0
Malawi 2013-2014 15-49 58.6 57.4 10.2 0.1 2.2 32.2 1 2 9.4 0.3 1.2 0.5 0.3 0.5
Namibia 2013 15-49 56.1 55.2 6.4 0.3 7 26.8 1.2 12 0 0.2 1.3 0.9 0.2 0.3 0.5
Nigeria 2013 15-49 15.1 9.4 0.3 0 1.8 3.2 1.1 2.1 0 0.4 0.3 5.8 2.3 2.5 1.1
Sierra Leone 2013 15-49 16.6 14.6 0.5 3.9 7.5 0.1 0.2 2.4 0 2 0.1 0.1 1.8
Togo 2013-2014 15-49 19.9 17.3 0.3 2.2 7.1 0.8 2.1 4.7 0 2.6 2.2 0.3 0.1
Uganda 2014 15-49 27.2 25.5 1.9 0 2.1 15 0.8 1.9 0 3.3 0.6 1.6 0 0 1.6
Zambia 2013-2014 15-49 49 43.9 1.9 11.8 19.3 1.2 4 5.5 0.2 5.2 0.8 3.2 1.2
Zimbabwe 2014 15-49 66.9 66.3 0.9 0 43.9 9 0.4 3.3 0.2 8.4 0.2 0.6 0.1 0.3 0.2
var margin = {
top: 20,
right: 150,
bottom: 100,
left: 40
},
width = 1150 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .2);
var x1 = d3.scale.ordinal(); // the actual bars inside each group
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20c();
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.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 myTooltip = d3.select("body")
.append("div")
.attr("class", "myTooltip");
d3.csv("Contraceptive-Types-select-sub-saharan-countries-2013-2014.csv", function (error, data) {
if (error) {
console.log(error);
}
var methodNames = d3.keys(data[0]).filter(function (d) {
return (d !== "Country" && d !== "Year" && d !== "Age" && d !== "Any method" && d !== "Any modern method" && d !== "Any traditional method");
});
data.sort(function (a, b) {
return b["Any method"] - a["Any method"];
});
data.forEach(function (d) {
d.methods = methodNames.map(function (name) {
return {
name: name,
value: +d[name],
};
});
});
x0.domain(data.map(function (d) {
return d.Country;
}));
x1.domain(methodNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function (d) {
return d3.max(d.methods, function (d) {
return d.value;
});
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("dy", ".5em")
.attr("transform", "rotate(-30)")
.style("text-anchor", "end");
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("% Used");
var state = svg.selectAll(".country")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function (d) {
return "translate(" + x0(d.Country) + ",0)";
});
var rectangles = state.selectAll("rect")
.data(function (d) {
return d.methods;
})
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function (d) {
return x1(d.name);
})
.attr("y", function (d) {
return y(d.value);
})
.attr("height", function (d) {
return height - y(d.value);
})
.style("fill", function (d) {
return color(d.name);
});
var legend = svg.selectAll(".legend")
.data(methodNames.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function (d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function (d) {
return d;
});
/*======================================================================
Mouse Events
======================================================================*/
rectangles
.on("mouseover", mouseoverFunc)
.on("mousemove", mousemoveFunc)
.on("mouseout", mouseoutFunc);
function mouseoverFunc(d) {
console.log(d);
console.log("moused over", d.x);
console.log("method", d.method, "percent", d.y);
myTooltip
.style("display", null)
.html("<p>" + d.name + ": " + d.value + "%</p>");
}
function mousemoveFunc(d) {
myTooltip
.style("top", (d3.event.pageY - 5) + "px")
.style("left", (d3.event.pageX + 10) + "px");
}
function mouseoutFunc(d) {
return myTooltip.style("display", "none"); // this sets it to invisible!
}
/*======================================================================
======================================================================*/
});
<!DOCTYPE html>
<!-- Modification of an example by Scott Murray from Knight D3 course -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grouped Bars</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
<h1 class="header">Types of Contraception Used in Sub Saharan Africa</h1>
<h2 class="header"></h2>
<p id="sources" class="header">Source: <a href="http://www.un.org/en/development/desa/population/publications/dataset/contraception/wcu2015.shtml">United Nations, Department of Economic and Social Affairs</a>. Only countries with complete data from the years 2013-2014 are represented.</p>
<div id="chart"></div>
<script type="text/javascript" src="grouped-bars.js"></script>
</body>
</html>
body {
box-sizing: border-box;
}
svg {
/* padding: 1em;*/
background-color: rgb(255, 255, 255);
}
svg rect:hover {
opacity: .3;
}
svg circle:hover {
opacity: .3;
}
svg g {
fill: #ACACAC;
}
svg g text.label,
svg g text.ylabel {
fill: #2A2A2A;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: #D3D3D3;
stroke-width: 1px;
}
.line {
stroke: #FF9900;
fill: none;
stroke-opacity: 25%;
stroke-width: 1px;
}
.unfocused {
stroke-opacity: 25%;
}
.focused {
stroke-width: 2px;
stroke-opacity: 100%;
}
.MDG {
stroke: #2A2A2A;
fill: none;
stroke-opacity: 100%;
stroke-width: 1px;
}
.axis text, .legend text,
.aside {
font-family: sans-serif;
font-size: 11px;
}
.header {
width: 70%;
margin-left: 16px;
}
h1 {
font-family: 'Roboto', sans-serif;
font-size: 1.75em;
margin-top: 1em;
font-weight: 700;
color: #0099FF;
text-transform: uppercase;
}
h2 {
font-family: 'Roboto', sans-serif;
text-align: justify;
line-height: 1.25em;
font-weight: 700;
font-size: 1em;
}
p {
font-family: 'Lora', serif;
font-size: 15px;
line-height: 1.25em;
text-align: justify;
}
#sources {
font-size: 12px;
font-style: italic;
color: rgb(0, 0, 0);
font-style: italic;
}
a {
color: #0099FF;
text-decoration: none;
}
a:hover {
color: rgb(255, 0, 153);
}
.sans {
font-family: sans-serif;
}
.orange {
color: #FF9900;
}
.blue {
color: #0099FF;
}
.red {
color: red;
}
.myTooltip {
position: absolute;
z-index: 10;
}
.myTooltip p {
font-family: 'Roboto', sans-serif;
background-color: rgba(255, 255, 255, .8);
padding: .5em 1em;
font-size: 12px;
line-height: 17px;
color: black;
}
.tooltipHeader {
font-weight: 700;
font-size: 12.5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.