Skip to content

Instantly share code, notes, and snippets.

@yan2014

yan2014/index.html

Last active October 22, 2015 18:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yan2014/cd5fecb580b676f338cd to your computer and use it in GitHub Desktop.
Save yan2014/cd5fecb580b676f338cd to your computer and use it in GitHub Desktop.
Download ZIP
Week 5: Bar chart with axises
Raw
index.html
<!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>
<link rel="stylesheet" type="text/css" href="main.css"> </head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<h1>Survival rate (percentage) to last grade of primary education in 2011</h1>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
Raw
main.css
body {
}
svg {
background-color: white;
}
.d3-tip {
background: #000000;
color: #fff;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
/*Add a hover rule to your CSS, so when the mouse is over the bar, it changes color a little.*/
.rect1:hover{
fill:#EE7600;
}
.rect2:hover{
fill:green;
}
/*styling the line*/
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
Raw
main.js
/**
Using the model in d3_dynamic_domain.html, make your own barchart for your data.
Pick one of your numeric columns, and resize the SVG container to fit it. You can adjust range etc. as you like.
Add text to the page saying what it is showing.
*/
var height = 500;
var width = 600;
var barHeight=20;
//margin
var margin ={left:20, right:20, bottom:20};
// Set up the range here - my output sizes
var widthScale = d3.scale.linear()
.range([ margin.left, width-margin.left-margin.right]);
//xAxis
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.ticks(10)
.tickSize(0);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([40, 300])
.html(function(d) {
return "Survival rate (percentage) to last grade of primary education in "+d.countries+": <span style='color:red'>"+ d.total + "%</span>";
})
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.call(tip);
d3.csv("primary education.csv", function(error, data) {
if (error) {
console.log(error);
}
data = data.filter(function(row) {
return row['timePeriod'] == '2011';
})
data.sort(function(a, b) {
return d3.descending(+a.total, +b.total);
});
//mean of data in 2011
var mean=d3.mean(data, function(d) { return d.total; });
// set up the domain here, from the data i read in.
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.total;
}) ]);
var bar = d3.select("svg")
.selectAll("g")
.data(data)
.enter()
.append("g")
bar .append("rect")
.attr("class",function(d){
if (d.total>mean) {return "rect1";} else{return "rect2";}
})
.attr("x", margin.left)
.attr("y", function(d, i) {
return i * 30; // just spacing the bars - notice from the top
})
.attr("width", function(d) {
return widthScale(d.total);
})
.attr("height", barHeight)
.attr("fill",function(d){
if (d.total>mean) {return "#FFA500";} else{return "#41924B";}
});//special color rule for your barchart (change one of the bars, or bars below or above mean/median to a different color)
d3.selectAll('svg rect')
.data(data)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
//label the end points of your bars with their actual values
bar.append("text")
.attr("x", function(d) { return widthScale(d.total)-5; })
.attr("y", function(d,i){return i*30+10;})
.attr("dy", ".35em")
.text(function(d) { return d.total; });
//Add an X axis label
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom-250) + ")")
.call( xAxis)
.append("text")
.attr("x", width)
.attr("y", -5)
.style("text-anchor", "end")
.text("Percentage");
});
Raw
primary education.csv
ISO_Code countries timePeriod total male female
ALB Albania 2010 98 98 98
DZA Algeria 2010 95 94 95
AGO Angola 2009 32 37 27
ARG Argentina 2009 95 95 96
ARM Armenia 2010 96 96 96
AUT Austria 2010 99 99 100
AZE Azerbaijan 2010 97 99 96
BHS Bahamas 2009 89 91 88
BHR Bahrain 2010 98 97 98
BGD Bangladesh 2009 66 62 71
BLR Belarus 2010 98 97 100
BEL Belgium 2009 97 95 98
BLZ Belize 2010 91 93 89
BEN Benin 2010 56 58 53
BTN Bhutan 2011 95 91 99
BOL Bolivia 2009 85 85 85
BIH Bosnia and Herzegovina 2010 81 81 80
BWA Botswana 2008 93 91 95
BGR Bulgaria 2009 97 98 97
BFA Burkina Faso 2011 69 66 73
BDI Burundi 2010 51 47 54
CPV Cabo Verde 2010 89 90 89
KHM Cambodia 2010 61 61 62
CMR Cameroon 2010 57 57 57
CAF Central African Republic 2010 46 49 44
TCD Chad 2010 49 51 47
CHL Chile 2010 98 98 98
COL Colombia 2010 87 88 87
CRI Costa Rica 2010 91 90 93
CIV Cote d'Ivoire 2008 61 62 59
HRV Croatia 2009 99 99 100
CUB Cuba 2010 95 94 96
CZE Czech Republic 2010 99 99 99
COD Democratic Republic of the Congo 2010 54 60 49
DNK Denmark 2009 99 99 99
DJI Djibouti 2008 64 64 64
DMA Dominica 2010 91 85 96
ECU Ecuador 2010 92 91 93
EGY Egypt 2010 99 99 99
SLV El Salvador 2010 84 82 86
GNQ Equatorial Guinea 2010 55 53 58
ERI Eritrea 2009 69 71 67
EST Estonia 2009 98 97 98
ETH Ethiopia 2010 41 40 42
FJI Fiji 2008 91 93 88
FIN Finland 2010 100 100 99
GMB Gambia 2010 63 60 66
GEO Georgia 2009 96 94 99
DEU Germany 2009 96 96 97
GHA Ghana 2008 72 76 69
GTM Guatemala 2009 68 68 68
GIN Guinea 2011 59 65 52
GUY Guyana 2008 83 85 82
HND Honduras 2010 75 72 78
HUN Hungary 2008 98 98 98
ISL Iceland 2009 98 97 99
IRN Iran (Islamic Republic of) 2010 98 98 98
ITA Italy 2009 100 99 100
JAM Jamaica 2009 95 94 96
JPN Japan 2009 100 100 100
KAZ Kazakhstan 2011 100 99 100
KWT Kuwait 2009 96 96 96
KGZ Kyrgyzstan 2010 95 95 96
LAO Lao People's Democratic Republic 2010 68 67 69
LVA Latvia 2010 93 93 93
LBN Lebanon 2010 90 88 94
LSO Lesotho 2010 66 58 76
LBR Liberia 2008 68 73 62
LIE Liechtenstein 2009 79 81 78
LTU Lithuania 2010 96 96 97
MDG Madagascar 2010 40 39 40
MWI Malawi 2010 51 50 52
MYS Malaysia 2009 99 99 100
MLI Mali 2010 75 77 74
MLT Malta 2008 80 83 76
MHL Marshall Islands 2008 83 87 80
MRT Mauritania 2008 81 80 82
MUS Mauritius 2010 97 97 98
MEX Mexico 2010 95 94 96
MNG Mongolia 2010 93 92 94
MNE Montenegro 2011 80 80 81
MAR Morocco 2011 88 89 88
MOZ Mozambique 2011 31 32 29
MMR Myanmar 2009 75 72 77
NAM Namibia 2009 84 82 87
NER Niger 2010 69 71 67
NGA Nigeria 2009 80 77 83
NOR Norway 2009 99 99 99
PAK Pakistan 2010 52 53 51
PAN Panama 2010 94 92 96
PRY Paraguay 2009 83 81 84
PER Peru 2010 82 82 81
PHL Philippines 2008 76 72 80
POL Poland 2009 99 99 100
KOR Republic of Korea 2009 99 99 99
MDA Republic of Moldova 2010 95 96 95
ROU Romania 2009 97 97 97
RWA Rwanda 2009 37 35 39
KNA Saint Kitts and Nevis 2009 74 78 70
LCA Saint Lucia 2010 92 90 94
WSM Samoa 2010 77 74 79
SEN Senegal 2010 59 59 60
SRB Serbia 2010 98 98 98
SYC Seychelles 2010 94 95 93
SGP Singapore 2008 99 99 99
SVK Slovakia 2010 98 98 98
SVN Slovenia 2010 99 99 98
ESP Spain 2010 98 98 97
LKA Sri Lanka 2010 97 100 95
SUR Suriname 2008 90 82 100
SWE Sweden 2010 96 96 96
SYR Syrian Arab Republic 2010 96 95 96
TJK Tajikistan 2010 99 99 99
TLS Timor-Leste 2010 84 82 85
TGO Togo 2010 52 55 48
TTO Trinidad and Tobago 2009 89 87 92
TUN Tunisia 2008 95 94 95
TUR Turkey 2009 99 98 100
UGA Uganda 2010 25 25 25
UKR Ukraine 2010 98 98 99
ARE United Arab Emirates 2010 84 85 84
TZA United Republic of Tanzania 2009 81 76 87
URY Uruguay 2009 95 94 96
UZB Uzbekistan 2010 98 98 98
VUT Vanuatu 2008 71 74 69
VEN Venezuela 2010 95 92 98
YEM Yemen 2010 76 82 68
ZMB Zambia 2008 53 55 52
MACRO Sub-Saharan Africa 2010 57 58 57
MACRO Eastern and Southern Africa 2010 49 48 49
MACRO West and Central Africa 2010 66 67 65
MACRO Middle East and North Africa 2010 88 89 88
MACRO South Asia 2010 63 61 65
MACRO East Asia and Pacific 2010 89 89 89
MACRO Latin America and Caribbean 2010 84 82 86
MACRO CEE/CIS 2010 98 97 98
MACRO Least developed countries 2010 57 57 58
MACRO World 2010 75 74 76
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment