Skip to content

Instantly share code, notes, and snippets.

@hmader hmader/barsMain.css
Last active Sep 28, 2015

Embed
What would you like to do?
Week 5: Bar Chart with Axis
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;
}
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");
});
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
<!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
You can’t perform that action at this time.