Last active
September 28, 2015 15:40
-
-
Save hmader/04952dfc17572734e5df to your computer and use it in GitHub Desktop.
Week 5: Bar Chart with Axis
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
box-sizing: border-box; | |
font-family: "Roboto", sans-serif; | |
} | |
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; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #D3D3D3; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
.header { | |
width: 70%; | |
margin-left: 16px; | |
} | |
h1 { | |
font-size: 1.75em; | |
margin-top: 1em; | |
font-weight: 700; | |
color: #0099FF; | |
text-transform: uppercase; | |
} | |
p { | |
text-align: justify; | |
line-height: 1.25em; | |
} | |
#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); | |
} | |
.orange { | |
color: #FF9900; | |
} | |
.blue { | |
color: #0099FF; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var margin = { | |
top: 45, | |
right: 50, | |
bottom: 55, | |
left: 175 | |
}; | |
var height = 1500 + margin.top + margin.bottom; | |
var width = $(window).width() * .75 + margin.left; | |
console.log("width = " + width); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
// fill in the margin values here. | |
var xScale = d3.scale.linear() | |
.range([margin.left, width - margin.right]); //--- range is what we are mapping TO, so we want it to be the chart area | |
// top to bottom: | |
var yScale = d3.scale.linear() | |
.range([height - margin.bottom, margin.top]); //--- range is what we are mapping TO, so we want it to be the chart area | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(10); // fix this to a good number of ticks for your scale later. | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left"); | |
d3.csv("contraceptive-mortality-select-countries-chart.csv", function (error, data) { | |
if (error) { | |
console.log(error); | |
} | |
var avgMean = d3.mean(data, function(d) { | |
return +d.Average; | |
}); | |
console.log(avgMean); | |
data.sort(function (a, b) { | |
return +d3.format(".2f")(a.Average - b.Average); | |
}); | |
xScale.domain([0, d3.max(data, function (d) { | |
return +d.Average + 5; | |
})]); | |
yScale.domain(data.map(function(d) { return d.Country; } )); | |
/*======================================================================*/ | |
var rects = svg.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect"); | |
rects.attr("x", margin.left) | |
.attr("y", function (d, i) { | |
return i * 20 + margin.bottom; // just spacing the bars - notice from the top | |
}) | |
.attr("width", function (d) { | |
return xScale(+d.Average) - margin.left; | |
}) | |
.attr("height", 10) | |
.attr("fill", function(d) { | |
if (d.Average >= avgMean) { | |
return "#0099FF";} | |
else { | |
return "#FF9900"; | |
} | |
}); | |
var percent = svg.selectAll("text") | |
.data(data) | |
.enter() | |
.append("text") | |
.attr("class", "avg"); | |
percent.attr("x", function (d) { | |
console.log("in text: " + d); | |
return (xScale(+d.Average) + 10); | |
}) | |
.attr("y", function (d, i) { | |
return i * 20 + 8 + margin.bottom; | |
}) | |
.text(function (d) { | |
return d3.format(".2f")(d.Average) + "%"; | |
}) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px") | |
.attr("fill", function(d) { | |
if (d.Average >= avgMean) { | |
return "#0099FF";} | |
else { | |
return "#FF9900"; | |
} | |
}); | |
svg.selectAll("text.ylabel") | |
.data(data) | |
.enter() | |
.append("text") | |
.attr("class", "ylabel") | |
.attr("x", margin.left - 10) | |
.attr("y", function (d, i) { | |
return i * 20 + 8 + margin.bottom; | |
}) | |
.text(function (d) { | |
return d.Country; | |
}) | |
.style("text-anchor", "end") | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px"); | |
console.log(percent); | |
console.log(rects); | |
/*======================================================================*/ | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height - margin.bottom) + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (margin.left) + ",0)") | |
.call(yAxis); | |
svg.append("text") | |
.attr("class", "label") | |
.attr("transform", "translate(" + (margin.right + width / 2) + " ," + | |
(height) + ")") | |
.style("text-anchor", "middle") | |
.attr("dy", "-12") | |
.text("Average % Use of Birth Control") | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px"); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Country | None | Primary | Secondary or higher | Average | U5MR | |
---|---|---|---|---|---|---|
Afghanistan | 19.9 | 27.2 | 37.7 | 28.2666666666667 | 97.3 | |
Azerbaijan | 51.4 | 25 | 51.4 | 42.6 | 34.2 | |
Bangladesh | 61.4 | 62.4 | 60.3 | 61.3666666666667 | 41.1 | |
Benin | 11.2 | 14.9 | 20.9 | 15.6666666666667 | 85.3 | |
Bhutan | 67.5 | 66.2 | 57.7 | 63.8 | 36.2 | |
Bolivia | 42 | 56.1 | 68.9 | 55.6666666666667 | 39.1 | |
Brazil | 64.1 | 71.9 | 81.8 | 72.6 | 13.7 | |
Burkina-Faso | 11.8 | 27 | 50.5 | 29.7666666666667 | 97.6 | |
Burundi | 17.5 | 24.7 | 41.1 | 27.7666666666667 | 82.9 | |
Cambodia | 42.5 | 50.2 | 57.3 | 50 | 37.9 | |
Cameroon | 4.1 | 21.6 | 40.2 | 21.9666666666667 | 94.5 | |
Central African Republic | 7.1 | 15.4 | 32.8 | 18.4333333333333 | 139.2 | |
Chad | 1.1 | 5 | 25.1 | 10.4 | 147.5 | |
Colombia | 71.8 | 80.3 | 78.7 | 76.9333333333333 | 16.9 | |
Comoros | 12.9 | 19.1 | 26.8 | 19.6 | 77.9 | |
Congo Democratic Republic | 11.1 | 15.7 | 30.2 | 19 | 118.5 | |
Congo Republic | 33.6 | 43.1 | 46.6 | 41.1 | 49.1 | |
Costa Rica | 58.5 | 76.2 | 76.7 | 70.4666666666667 | 9.6 | |
Côte-d’Ivoire | 13 | 25.8 | 30.3 | 23.0333333333333 | 100 | |
Djibouti | 12.6 | 20.8 | 33 | 22.1333333333333 | 69.6 | |
Dominican Republic | 69.8 | 75.2 | 71.2 | 72.0666666666667 | 28.1 | |
Egypt | 57.7 | 61.8 | 61.4 | 60.3 | 21.8 | |
Ethiopia | 22.2 | 35.7 | 62.2 | 40.0333333333333 | 64.4 | |
Gabon | 14 | 21.8 | 36.3 | 24.0333333333333 | 56.1 | |
Ghana | 26.1 | 34.3 | 39.6 | 33.3333333333333 | 78.4 | |
Guatemala | 19.4 | 38.4 | 68 | 41.9333333333333 | 31 | |
Guinea | 4.7 | 7.6 | 10.5 | 7.6 | 100.7 | |
Guinea-Bissau | 6.2 | 17.2 | 30.6 | 18 | 123.9 | |
Guyana | 21.9 | 40.4 | 43.8 | 35.3666666666667 | 36.6 | |
Haiti | 29.7 | 34.5 | 37.2 | 33.8 | 72.8 | |
Honduras | 64.2 | 73.2 | 74.5 | 70.6333333333333 | 22.2 | |
India | 52.1 | 60.1 | 60.2 | 57.4666666666667 | 52.7 | |
Indonesia | 43.4 | 61.8 | 63.1 | 56.1 | 29.3 | |
Iraq | 46.1 | 51.3 | 57.2 | 51.5333333333333 | 34 | |
Jordan | 45.6 | 53.4 | 62.2 | 53.7333333333333 | 18.7 | |
Kenya | 14.1 | 44.2 | 59.8 | 39.3666666666667 | 70.7 | |
Lao PDR | 38 | 54.3 | 52.1 | 48.1333333333333 | 71.4 | |
Lesotho | 32.1 | 40.2 | 55.7 | 42.6666666666667 | 98 | |
Liberia | 15.3 | 19.7 | 28.6 | 21.2 | 71.1 | |
Madagascar | 20.5 | 38.9 | 55.8 | 38.4 | 56 | |
Malawi | 40.3 | 46 | 53.2 | 46.5 | 67.9 | |
Maldives | 43.6 | 36.9 | 27.9 | 36.1333333333333 | 9.9 | |
Mali | 8.1 | 13.4 | 27.5 | 16.3333333333333 | 122.7 | |
Mauritania | 4.4 | 11.5 | 21.9 | 12.6 | 90.1 | |
Mongolia | 47 | 57.8 | 55 | 53.2666666666667 | 31.8 | |
Morocco | 61.2 | 62.9 | 68.8 | 64.3 | 30.4 | |
Mozambique | 5.5 | 11.6 | 31.7 | 16.2666666666667 | 87.2 | |
Namibia | 33.7 | 46.1 | 64.1 | 47.9666666666667 | 49.8 | |
Nepal | 52.8 | 47 | 46.8 | 48.8666666666667 | 39.7 | |
Nicaragua | 52.1 | 71.7 | 73 | 65.6 | 23.5 | |
Niger | 12 | 20.5 | 32.3 | 21.6 | 104.2 | |
Nigeria | 2.7 | 19.9 | 30.9 | 17.8333333333333 | 117.4 | |
Pakistan | 30.2 | 40.8 | 43 | 38 | 85.5 | |
Peru | 65.6 | 75.1 | 76.2 | 72.3 | 16.7 | |
Philippines | 29.3 | 52.9 | 56.2 | 46.1333333333333 | 29.9 | |
Rwanda | 43.3 | 52.6 | 60.3 | 52.0666666666667 | 52 | |
Sao Tome and Principe | 18.3 | 40.7 | 38 | 32.3333333333333 | 51 | |
Senegal | 12.8 | 26.9 | 32.8 | 24.1666666666667 | 55.3 | |
Sierra Leone | 14.3 | 19.3 | 26 | 19.8666666666667 | 160.6 | |
Somalia | 13.6 | 15.7 | 22.6 | 17.3 | 145.6 | |
South Africa | 33.2 | 47.2 | 64.6 | 48.3333333333333 | 43.9 | |
Suriname | 19.2 | 42.4 | 52 | 37.8666666666667 | 22.8 | |
Swaziland | 54.5 | 59.1 | 69.5 | 61.0333333333333 | 80 | |
Syrian Arab Republic | 45.2 | 57.5 | 64.5 | 55.7333333333333 | 14.6 | |
Tajikistan | 23.9 | 18.9 | 28.4 | 23.7333333333333 | 47.7 | |
Thailand | 63.8 | 79.5 | 73.6 | 72.3 | 13.1 | |
Timor-Leste | 15.9 | 25.8 | 26.3 | 22.6666666666667 | 54.6 | |
Togo | 11.3 | 17.3 | 20 | 16.2 | 84.7 | |
Turkey | 55.9 | 72.9 | 75.9 | 68.2333333333333 | 19.2 | |
Uganda | 17.9 | 28 | 44.2 | 30.0333333333333 | 66.1 | |
Vanuatu | 20.8 | 38.8 | 42.1 | 33.9 | 16.9 | |
Vietnam | 74.7 | 80.7 | 77.2 | 77.5333333333333 | 23.8 | |
Yemen | 23.1 | 34.2 | 42.1 | 33.1333333333333 | 51.3 | |
Zambia | 35 | 37.8 | 50.6 | 41.1333333333333 | 87.4 | |
Zimbabwe | 43 | 54.5 | 61.1 | 52.8666666666667 | 88.5 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- Modified version of Scott Murray's file from Knight D3 course --> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Horizontal Bar - Dynamic Domain</title> | |
<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> | |
<link rel="stylesheet" type="text/css" href="css/barsMain.css"> | |
</head> | |
<body> | |
<h1 class="header">Average Contraceptive Use by Country</h1> | |
<p class="header">The chart below shows the average % contraceptive use in each of 75 low-income countries. Country data shown in <span class=orange>orange</span> represents the countries whose average contraceptive use is below the mean (40.54%), whereas the data shown in <span class=blue>blue</span> represents those with an average contraceptive use higher than the mean.</p> | |
<p id="sources" class="header">Sources: <a href="http://www.who.int/">World Health Organization</a>. Only countries with complete data are represented.</p> | |
</body> | |
<script type="text/javascript" src="js/barsMain.js"></script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment