Skip to content

Instantly share code, notes, and snippets.

@danielatkin

danielatkin/chartStyle.css

Last active August 29, 2015 14:18
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 danielatkin/39d30666595a684e7d3d to your computer and use it in GitHub Desktop.
Save danielatkin/39d30666595a684e7d3d to your computer and use it in GitHub Desktop.
Download ZIP
Styled bar chart - OECD Education Spending
Raw
chartStyle.css
body {
font-family: helvetica, calibri, arial, sans-serif;
font-size: 11px;
}
h1 {
margin: 0;
padding-left: 10px;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
svg {
background-color: none;
text-align: center;
}
rect {
fill: #2c3e50;
border-color: #95a5a6;
border-width: 2px;
}
rect:hover {
fill: #1abc9c;
}
.left {
text-align: left;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
#container {
width: 1000px;
height: 720px;
margin: 0;
padding: 0;
border: 1px solid #7f8c8d;
}
#wrapper {
width: 1000px;
margin: 0;
padding: 0;
}
#leftdiv {
width:740px;
padding: none;
margin: none;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
height: 600px;
float: left;
}
#rightdiv{
width: 230px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin: none;
margin-top: 10px;
margin-bottom: 10px;
height: 570px;
float: left;
text-align: left;
}
#header {
text-align: center;
font-family: helvetica, calibri, arial, sans-serif;
text-decoration: bold;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
width: 990px;
background-color: #ffffff;
color: #000000;
}
#source {
padding-left: 10px;
font-family: helvetica, calibri, arial, sans-serif;
font-size:10px;
color: #95a5a6}
Raw
index.csv
country govExpend
Australia 11949.619
Austria 4934.9859
Belgium 1614.8023
Chile 1994.1776
Czech Republic 1723.154856
Denmark 6392.568
Estonia 228.7147
Finland 3878.8195
France 24500.584
Germany 10671.4052
Hungary 1096.044876
Iceland 172.401278
Ireland 2370.096
Israel 2054.5
Italy 12298.0776
Japan 28225.43858
Korea 8146.516176
Mexico 7246.69722
Netherlands 11247.9498
New Zealand 2974.7025
Norway 7004.53
Poland 4592.2275
Portugal 1933.4529
Slovak Republic 29.4309
Slovenia 535.7459
Spain 2293.4472
Sweden 8061.948
Switzerland 2836.2698
United Kingdom 29606.775
United States 95354.93
Russia 7199.43149
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OECD Government Spending on Higher Education</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<link rel="stylesheet" type="text/css" href="chartStyle.css">
</head>
<body>
<div id="container">
<div id="header">
<h1 class="left">TOTAL GOVERNMENT EXPENDITURE ON HIGHER EDUCATION</h1>
<h2 class="left">A ranking of OECD member countries (including Russia) by total government expenditure</br>(at all levels) in U.S. Dollars in 2011.</h2>
</div>
<div id = "wrapper">
<div id="leftdiv">
<script type="text/javascript">
var w = 740;
var h = 600;
var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("#leftdiv")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("index.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.govExpend, +b.govExpend);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.govExpend;
}) ]);
heightScale.domain(data.map(function(d) { return d.country; } ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.country);
})
.attr("width", function(d) {
return widthScale(d.govExpend);
})
.attr("height", heightScale.rangeBand())
.append("title")
.text(function(d) {
return d.country + "'s total gov Spend is $" + d.govExpend + "m";
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</div>
<div id="rightdiv">
<p class="left"></br><b>Data source(s) used:</b></br>
UNESCO-OECD-Eurostat (UOE) data collection on education statistics, compiled on the basis of national administrative sources, reported by Ministries of Education or National Statistical Offices.</p>
</br><p><b>Key Statistical Concept:</b></br>
Countries report expenditures by sources of funds: Governement (central, regional, local); International agencies and other foreign sources; Households and Other private entities (including firms and religious institutions and other non-profit organisations). Three types of financial transactions can be distinguished: -direct expenditure/payments on educational institutions -Intergovernmental transfers for education -Transfers to students or households and to other private entities.</p>
</br><p><b>Other Aspects:</b></br>
Financial year is in general identical to the calendar year and thus running from 1st of January to 31st of December, with some exceptions for Canada, Japan and the United Kingdom where the financial year is running from 1st of April to 31st of March and for the United States where the financial year is running from 1st of July to 30th of June.</p>
</div>
<div id="source">
<p>SOURCE: <a href="http://stats.oecd.org/Index.aspx?DataSetCode=RFIN1">OECD</a>, 2015</p>.</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment