Last active
August 29, 2015 14:19
-
-
Save danielatkin/bc9a11ee93e444a5ca1a to your computer and use it in GitHub Desktop.
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 { | |
| 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; | |
| } | |
| circle { | |
| fill: #2c3e50; | |
| border-color: #95a5a6; | |
| border-width: 2px; | |
| } | |
| circle:hover { | |
| fill: #1abc9c; | |
| } | |
| .left { | |
| text-align: left; | |
| } | |
| .axis path { | |
| fill:none; | |
| opacity: 0; | |
| } | |
| .axis line { | |
| fill: none; | |
| stroke: #95a5a6; | |
| stroke-dasharray:2,1; | |
| shape-rendering: crispEdges; | |
| opacity: 0.7; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| } | |
| #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} | |
| rect:hover { | |
| fill: orange; | |
| } | |
| #tooltip { | |
| position: absolute; | |
| height: auto; | |
| padding: 10px; | |
| background-color: #3498db; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| pointer-events: none; | |
| } | |
| #tooltip.hidden { | |
| display: none; | |
| } | |
| #tooltip p { | |
| margin: 0; | |
| font-family: helvetica, calibri, arial, sans-serif; | |
| font-size: 11px; | |
| line-height: 15px; | |
| color: #ffffff; | |
| } | |
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> | |
| <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="chartStylescatter2.css"> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="header"> | |
| <h1 class="left">TOTAL GOVERNMENT VS HOUSEHOLD EXPENDITURE (per capita) ON HIGHER EDUCATION</h1> | |
| <h2 class="left">A comparison of OECD member countries (including Russia) by total government expenditure</br>(at all levels) and household expenditure in U.S. Dollars in 2011.</h2> | |
| </div> | |
| <div id="dropdowns"> | |
| </div> | |
| <div id = "wrapper"> | |
| <div id="leftdiv"> | |
| <div id="tooltip" class="hidden"> | |
| <p><strong><span id="tooltipHeading">Important Label Heading</span></strong></p> | |
| <p><span id="value">100</span></p> | |
| <p><span id="value2">100</span></p> | |
| <p><span id="value3">100</span></p> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var w = 740; | |
| var h = 630; | |
| var padding = [ 20, 10, 30, 80 ]; //Top, right, bottom, left | |
| var xScale = d3.scale.linear() | |
| .range([padding[3], w - padding[1] - padding[3] ]); | |
| var yScale = d3.scale.linear() | |
| .range([ padding[0], h - padding[2] - 30 ]); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(15) | |
| .tickFormat(function (d) { | |
| return "$" + d;}) | |
| .tickSize(-(w - padding[1] - padding [3])) | |
| ; | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(10) | |
| .tickFormat(function (d) { | |
| return "$" + d;}) | |
| .tickSize(-(h - padding[0] - padding [2])) | |
| ; | |
| var svg = d3.select("#leftdiv") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| d3.csv("OECD Tertiary Education Spending by funding source.csv", function(data) { | |
| data.sort(function(a, b) { | |
| return d3.descending(+a.governmentExpendituresTotal, +b.governmentExpendituresTotal); | |
| }); | |
| xScale.domain([ | |
| d3.min(data, function(d) { | |
| return +d.expendituresOfHouseholds / +d.popnM; | |
| }), | |
| d3.max(data, function(d) { | |
| return +d.expendituresOfHouseholds / +d.popnM; | |
| }) ]); | |
| yScale.domain([ | |
| d3.max(data, function(d) { | |
| return +d.governmentExpendituresTotal / +d.popnM; | |
| }), | |
| d3.min(data, function(d) { | |
| return +d.governmentExpendituresTotal / +d.popnM; | |
| }) | |
| ]); | |
| var circles = svg.append("g") | |
| .attr("clip-path", "url(#chart-area)") | |
| .selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle"); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding[2] - 30 + 10) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (padding[3] - 10) + ",0)") | |
| .call(yAxis); | |
| svg.append("text") | |
| .attr("class", "x label") | |
| .attr("text-anchor", "middle") | |
| .attr("x", w/2) | |
| .attr("y", h - 15) | |
| .text("average household expenditure on higher education (per capita)"); | |
| svg.append("text") | |
| .attr("class", "y label") | |
| .attr("text-anchor", "middle") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("dy",20) | |
| .attr("dx",-(w/2)+padding[0]+50) | |
| .attr("transform", "rotate(-90)") | |
| .text("total government expenditure (all levels) on higher education (per capita)"); | |
| svg.append("clipPath") //Make a new clipPath | |
| .attr("id", "chart-area") //Assign an ID | |
| .append("rect") //Within the clipPath, create a new rect | |
| .attr("x", padding[3]- 10) //Set rect's position and size… | |
| .attr("y", padding [0] -10) | |
| .attr("width", w - padding[1] - padding [3]) | |
| .attr("height", h); | |
| circles.attr("cx", -100) | |
| .attr("cy", h + 50) | |
| .attr("r", 2) | |
| ; | |
| circles.sort(function(a,b){ | |
| return d3.ascending(+a.expendituresOfHouseholds, b.expendituresOfHouseholds); | |
| }) | |
| .transition() | |
| .delay(function(d,i){ | |
| return i * 100; | |
| }) | |
| .duration(2000) | |
| .attr("cx", function(d) { | |
| return xScale(d.expendituresOfHouseholds / d.popnM); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d.governmentExpendituresTotal / d.popnM); | |
| }) | |
| .each("end", function(d){ | |
| d3.select(this) | |
| .transition() | |
| .delay(function(d,i){ | |
| return i * 50; | |
| }) | |
| .duration(1000) | |
| .attr("r", 5); | |
| }); | |
| circles.on("mouseover", function(d) { | |
| var coordinates = [0, 0]; | |
| coordinates = d3.mouse(this); | |
| var x = coordinates[0] + 45; | |
| var y = coordinates[1] + 87; | |
| //Update the tooltip position and value | |
| d3.select("#tooltip") | |
| .style("left", x + "px") | |
| .style("top", y + "px") | |
| .select("#tooltipHeading") | |
| .text(d.country + "'s Higher Education Spending Per Capita:"); | |
| d3.select("#tooltip") | |
| .select("#value") | |
| .text("Government Expenditure (All Levels), per capita: $" + (d.governmentExpendituresTotal / d.popnM).toFixed(2)); | |
| d3.select("#tooltip") | |
| .select("#value2") | |
| .text("Household expenditure on Higher Education, per capita: $" + (d.expendituresOfHouseholds / d.popnM).toFixed(2)); | |
| d3.select("#tooltip") | |
| .select("#value3") | |
| .text("population (2011): " + (d.popnM).toFixed(2) + "m"); | |
| //Show the tooltip | |
| d3.select("#tooltip").classed("hidden", false); | |
| d3.select(this) | |
| .transition() | |
| .duration(500) | |
| .attr("r", 30) | |
| ; | |
| }); | |
| circles.on("mouseout", function(d) { | |
| d3.select("#tooltip").classed("hidden", true); | |
| d3.select(this) | |
| .transition() | |
| .duration(500) | |
| .attr("r", 5); | |
| }); | |
| }); | |
| </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: Government (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: -dicircle 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> |
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
| OECDMembershipStatus | country | centralGovernmentExpenditures | expendituresOfFirmsForSpecifiedEducationalActivities | expendituresOfHouseholds | Expenditures of private entities other than households | Funds from international agencies and other foreign sources | governmentExpendituresTotal | Local government expenditures | Private expenditures | Regional government expenditures | popnM | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Non-Member Country | Russia | 7199.43149 | 0 | 3428.26743 | 1485.62983 | 48.61558 | 8263.85079 | 0 | 4913.89743 | 1064.41913 | 142.961 | |
| OECD Member Country | Australia | 11949.619 | 0 | 9052.6732 | 2887.2762 | 0 | 13176.4337 | 0 | 11939.9494 | 1552.6502 | 22.34 | |
| OECD Member Country | Austria | 4934.9859 | 503.3729 | 127.748 | 503.3729 | 0 | 5076.9039 | 22.9445 | 631.1318 | 118.3195 | 8.3885 | |
| OECD Member Country | Belgium | 1614.8023 | 7.7826 | 1173.5594 | 279.8793 | 176.5473 | 5798.1787 | 41.9541 | 1453.4496 | 4212.2178 | 11.0477 | |
| OECD Member Country | Canada | 0 | 857.144 | 8391.552 | 7944.016 | 134.848 | 24967.472 | 49.408 | 16335.568 | 0 | 34.484 | |
| OECD Member Country | Chile | 1994.1776 | 0 | 3479.5264 | 381.2944 | 0 | 1994.1776 | 0 | 3860.8208 | 0 | 17.248 | |
| OECD Member Country | Czech Republic | 1723.154856 | 0 | 215.0902811 | 241.5593308 | 30.65340532 | 1778.055522 | 37.93122388 | 456.6496119 | 17.601496 | 10.4967 | |
| OECD Member Country | Denmark | 6392.568 | 0 | 271.101 | 0 | 149.13 | 6559.068 | 166.497 | 271.101 | 0.0015 | 5.5706 | |
| OECD Member Country | Estonia | 228.7147 | 0 | 40.3191 | 10.3223 | 43.818 | 228.6602 | 0.3597 | 50.6414 | 0 | 1.3297 | |
| OECD Member Country | Finland | 3878.8195 | 0 | 0 | 0 | 0 | 4454.2959 | 762.9346 | 164.5573 | 0 | 5.388 | |
| OECD Member Country | France | 24500.584 | 0 | 4823.795 | 2827.351 | 546.308 | 28215.304 | 1053.921 | 7651.146 | 2699.494 | 63.2245 | |
| OECD Member Country | Germany | 10671.4052 | 0 | 2238.8491 | 0 | 605.4296 | 39845.3642 | 987.8561 | 7882.3241 | 30958.6269 | 81.755 | |
| OECD Member Country | Hungary | 1096.044876 | 0 | 0 | 0 | 0 | 1096.665084 | 2.348064 | 0 | 0 | 9.972 | |
| OECD Member Country | Iceland | 172.401278 | 0 | 12.260246 | 0.935582 | 0 | 172.23389 | 0 | 13.195902 | 0 | 0.319 | |
| OECD Member Country | Ireland | 2370.096 | 0 | 424.5114 | 74.1418 | 73.6731 | 2370.096 | 309.6036 | 498.6641 | 0 | 4.5749 | |
| OECD Member Country | Israel | 2054.5 | 0 | 1180 | 766 | 1 | 2112.5 | 58 | 1946 | 0 | 7.7658 | |
| OECD Member Country | Italy | 12298.0776 | 0 | 6563.2497 | 1484.5146 | 522.764 | 14315.9183 | 58.9145 | 7938.6662 | 2066.3675 | 60.3282 | |
| OECD Member Country | Japan | 28225.43858 | 0 | 33185.25621 | 9074.991584 | 0 | 30322.94809 | 102.974116 | 42260.2478 | 2047.069255 | 127.799 | |
| OECD Member Country | Korea | 8146.516176 | 334.074546 | 12822.52442 | 11169.8754 | 0 | 8647.752897 | 54.056151 | 21219.288 | 447.180552 | 49.7794 | |
| OECD Member Country | Mexico | 7246.69722 | 0 | 4467.8749 | 44.51078 | 0 | 9092.95056 | 16.25822 | 4512.38635 | 2088.8121 | 115.6829 | |
| OECD Member Country | Netherlands | 11247.9498 | 531.375 | 2186.976 | 1610.911 | 289.8092 | 11252.397 | 0 | 3770.637 | 4.4472 | 16.6931 | |
| OECD Member Country | New Zealand | 2974.7025 | 0 | 851.2427 | 0 | 0 | 2974.7025 | 0 | 851.2427 | 0 | 4.405 | |
| OECD Member Country | Norway | 7004.53 | 0 | 155.61 | 30.03 | 0 | 7004.53 | 0 | 185.64 | 0 | 4.953 | |
| OECD Member Country | Poland | 4592.2275 | 0 | 1388.502 | 235.4184 | 203.148 | 4653.9306 | 16.3863 | 1489.4604 | 45.3168 | 38.526 | |
| OECD Member Country | Portugal | 1933.4529 | 0 | 532.0835 | 219.2426 | 165.5383 | 1937.1153 | 0.6758 | 751.337 | 2.9757 | 10.5576 | |
| OECD Member Country | Slovak Republic | 29.4309 | 0 | 9.48015 | 2.3346 | 4.77225 | 29.4309 | 0 | 11.81475 | 0 | 5.3984 | |
| OECD Member Country | Slovenia | 535.7459 | 0 | 63.8631 | 37.1036 | 47.1316 | 541.6646 | 5.9078 | 87.6905 | 0 | 2.0525 | |
| OECD Member Country | Spain | 2293.4472 | 0 | 2821.029 | 569.3397 | 0 | 12870.7745 | 114.4936 | 3390.3687 | 10488.8847 | 46.7363 | |
| OECD Member Country | Sweden | 8061.948 | 0 | 0 | 717.18 | 292.524 | 8281.584 | 0 | 729.732 | 219.636 | 9.4492 | |
| OECD Member Country | Switzerland | 2836.2698 | 0 | 0 | 0 | 0 | 8267.2538 | 33.6295 | 0 | 6648.6706 | 7.9124 | |
| OECD Member Country | United Kingdom | 29606.775 | 2308.005 | 18965.67 | 2350.17 | 1526.49 | 29708.88 | 102.09 | 21315.84 | 0 | 63.2851 | |
| OECD Member Country | United States | 95354.93 | 0 | 198410.21 | 72426.08 | 0 | 204130.78 | 23048.05 | 270836.29 | 85727.78 | 311.5826 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment