Week 4: Dynamic Domain Bar Chart
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); | |
border: 7px solid #F4F4F4; | |
} | |
svg rect{ | |
fill: #0099FF; | |
} | |
.header { | |
width: 70%; | |
margin-left: 16px; | |
} | |
h1 { | |
font-size: 1.75em; | |
margin-top: 2em; | |
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; | |
} | |
svg { | |
margin-left: .75em; | |
} | |
a { | |
color: #0099FF; | |
text-decoration: none; | |
} | |
a:hover { | |
color: rgb(255, 0, 153); | |
} |
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 height = 1500; | |
var width = $(window).width() * .7; | |
console.log("width = " + width); | |
// Set up the range here - my output sizes | |
var widthScale = d3.scale.linear() | |
.range([0, 3 * width / 4]); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.csv("contraceptive-mortality-select-countries-chart.csv", function (error, data) { | |
if (error) { | |
console.log(error); | |
} | |
data.sort(function (a, b) { | |
return +d3.format(".2f")(a.Average - b.Average); | |
}); | |
// set up the domain here, from the data i read in. | |
widthScale.domain([0, d3.max(data, function (d) { | |
return +d.Average; | |
})]); | |
var rects = svg.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect"); | |
rects.attr("x", 0) | |
.attr("y", function (d, i) { | |
return i * 20; // just spacing the bars - notice from the top | |
}) | |
.attr("width", function (d) { | |
return widthScale(d.Average); | |
}) | |
.attr("height", 10); | |
////// futzin with text | |
var percent = svg.selectAll("text") | |
.data(data) | |
.enter() | |
.append("text") | |
.attr("class", "avg"); | |
percent.attr("x", function (d) { | |
console.log("in text: " + d); | |
return (widthScale(d.Average) + 10); | |
}) | |
.attr("y", function (d, i) { | |
return i * 20 + 10; | |
}) | |
.text(function (d) { | |
return d.Country + " - " + d3.format(".2f")(d.Average) + "%"; | |
}) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px") | |
.attr("fill", "#000000"); | |
}); |
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="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.</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="barsMain.js"></script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment