Skip to content

Commit

Permalink
Merge pull request #847 from fedspendingtransparency/staging
Browse files Browse the repository at this point in the history 
Version 6.0 - Colleges and Universities release to prod
  • Loading branch information
@anjenkin
anjenkin authored Jul 17, 2019
2 parents 2ec1698 + fef74e4 commit b63f9ca
Show file tree
Hide file tree
Showing 131 changed files with 257,963 additions and 1,337 deletions.
24 changes: 5 additions & 19 deletions 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,15 @@

<div id="four-oh-four">

<h1>
4 0 4
</h1>

<div class="four-oh-four__icon">
<i class="far fa-hand-paper"></i>
</div>

<div id="four-oh-four__text">
<div class="four-container">
<h3>
Are you sure you need to be here? <br>
Are you lost? <br>
Go back to the <a href="/">homepage</a>
Oops!
</h3>
</div>

<div id="four-oh-four__about">
<p>
The HTTP 404, 404 Not Found, and 404 error message is a Hypertext Transfer Protocol (HTTP) standard response code, in computer network communications, to indicate that the client was able to communicate with a given server, but the server could not find what was requested.

The website hosting server will typically generate a "404 Not Found" web page when a user attempts to follow a broken or dead link; hence the 404 error is one of the most recognizable errors encountered on the World Wide Web.
Looks like you got lost in the data. <br>
<span>It happens.</span> Find your way back.
</p>
</div>

</div>
</div>

59 changes: 59 additions & 0 deletions _includes/colleges/colleges-share.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<script>
function clickShareItemLink(item, url) {
window.open(url, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');

window.Analytics.event({
category: 'Share Menu - Click Item',
action: item
});

return false;
}
</script>

<div class="popup new-share-button">
<span class="viz-share-icon" aria-hidden="true">
{% include svgs/share.svg %} Share
</span>
<span class="popuptext right newpopup" id="sharePopup">
<div class="share-buttons">
<ul>
<li>
<a href="javascript:clickShareItemLink('Facebook', 'https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}#{{include.anchor}}')" title="Share on Facebook">
{% include svgs/facebook_square_x.svg class="share-icon icon-facebook" %}
<span class="share-button-text">Facebook</span>
</a>
</li>
<li>
{% if page.socialMediaText %}
{% assign twitterVariable = page.socialMediaText %}
{% else %}
{% assign twitterVariable = page.title %}
{% endif %}
<a href="javascript:clickShareItemLink('Twitter', 'https://twitter.com/intent/tweet?text='+encodeURIComponent('{{ twitterVariable }}')+'&url={{ site.url }}{{ site.baseurl }}{{ page.url }}#{{include.anchor}}')" title="Share on Twitter">
{% include svgs/twitter_square_x.svg class="share-icon icon-twitter" %}
<span class="share-button-text">Twitter</span>
</a>
</li>
<li>
<a href="javascript:clickShareItemLink('Reddit', 'http://www.reddit.com/submit?url={{ site.url }}{{ site.baseurl }}{{ page.url }}')#{{include.anchor}}" title="Share on Reddit">
{% include svgs/reddit.svg class="share-icon icon-reddit" %}
<span class="share-button-text">Reddit</span>
</a>
</li>
<li>
<a href='javascript:clickShareItemLink("Linkedin", "https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ site.baseurl }}{{ page.url }}#{{include.anchor}}")' title="Share on LinkedIn">
{% include svgs/linkedin_square_x.svg class="share-icon icon-linkedin" %}
<span class="share-button-text">Linkedin</span>
</a>
</li>
<li>
<a href="mailto:?subject=Check out this analysis on Data Lab&body=Did you know the federal government invested over $149 billion in higher education? Check out this analysis and discover how much your Alma Mater received in federal funds!%0D%0A%0D%0ACheck out this site {{ site.url }}{{ site.baseurl }}{{ page.url }}#{{include.anchor}}" title="Share via Email">
{% include svgs/envelope.svg class="share-icon icon-envelope" %}
<span class="share-button-text">Email</span>
</a>
</li>
</ul>
</div>
</span>
</div>
114 changes: 114 additions & 0 deletions _includes/colleges/investment-categories.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<article id='section-four'>

<section id='investment-categories'>
<div class="cu-header">
<div class="cu-header__number">
<span>04</span>
</div>
<h3 class="cu-header__title">Investment Categories</h3>
<h1 class="cu-header__teaser">
How was the <span class="cu-header--red">money</span> used?
</h1>
<p class="cu-header__blurb">
Now that we know how much money was invested in higher education, are you curious to know how the money was used? This visualization allows you to discover the various categories the government uses to classify funding.
Note: Product and Service Codes (PSCs) are used to categorize contract purchases of products and services and Federal Assistance Listings are used to categorize grant funding.
</p>

<section class="accordion">
<h1 class="accordion__heading">Instructions</h1>
<div class="accordion__content">
<ul class="accordion__list">
<li>Select an investment type: contracts, grants, or research grants</li>
<li>Hover over each section to determine the category </li>
<li>Click on a specific section to display the total awards for that category </li>
<li>Click the center section to return to the original display</li>
</ul>
</div>
</section>

<div id='sunburst-header' class="cu-header__controls">
<form id='categories'>
<input type='radio' name='category' value='contracts' id='contracts_data' onchange='changeCategory(this)' />
<label for='contracts_data' class='desktop'>Contracts (PSC)</label>
<label for='contracts_data' class='mobile'>PSC</label>
<input type='radio' name='category' value='grants' id='grants_data' checked onchange='changeCategory(this)' />
<label for='grants_data' class='desktop'>Grants (CFDA)</label>
<label for='grants_data' class='mobile'>CFDA</label>
<input type='radio' name='category' value='research' id='research_data' onchange='changeCategory(this)'/>
<label for='research_data'>
<span class='desktop'>Research Grants (CFDA)</span>
<span class='mobile'>Grants (Research)</span>
<div class="cfda">
<button type="button" class="cfda__trigger"><img src="/assets/icons/CU/info-circle-solid.svg" alt="close"></button>
<div class="cfda__contents">
<button type="button" class="cfda__close"><img src="/assets/icons/CU/close button.svg" alt="close"></button>
<span>In this visualization, we identified and set apart grants used for research projects.
This subset of grants were awarded to individuals, groups, or institutions.</span>
</div>
</div>
</label>
</form>
{% include colleges/colleges-share.html anchor="section-four" %}
</div>
</div>

<div id="mobile-search--sunburst" class="mobile-search">
<div class='bubble-search__input-wrapper'>
<input id='sunburst-search__input' type="text" class="sunburst-search__input" placeholder="Search Categories...">
<a xlink:href="#0" onclick="$('#sunburst-search__list--mobile').toggle();">
{% include svgs/search-solid.svg %}
</a>
</div>
<ul id='sunburst-search__list--mobile' class='bubble-search__list--mobile'></ul>
</div>

<div id='chart-area'>
<div id="categories-detail"></div>
<div id='chart-container'>

<div id='investment-function-buttons' class='function-buttons' onclick='panelClick(this.id)'>
<div id='investment-search' class='button-set'>
<button type='button' title='Search' onclick='searchClick("investment-function-buttons")'><img src='/assets/icons/magnifier.svg' /></button>
</div>
<div class='button-set'>
<button id='sunburst-chart-trigger' type='button' title='View chart' style='opacity: 1;' onclick='switchView("investment", "chart")'><img src='/assets/icons/sunburst_icon.svg' /></button>
<div class='separator'></div>
<button id='sunburst-table-trigger' type='button' title='View table' onclick='switchView("investment", "table")'><img src='/assets/icons/list_icon.svg' /></button>
</div>
</div>

<div id='investment-sunburst'>
<div id='investment-sunburst-viz'>
<div id='legend_colorKey'>
<div style='top:25px;' class='legend_circleKeyLabel'><span>Program Title</span></div>
<div style='top:36px;' class='legend_circleKeyLabel'><span>Grant Family</span></div>
<div style='top:65px;' class='legend_circleKeyLabel'><span>2018 Federal Grants</span></div>
<svg id='legend_scaleKey'></svg>
</div>

<div id='sunburst'>
</div>
<p class="cu-header__blurb">To return to a higher level click the center node</p>
</div>
<div id="investment-sunburst-tables">
<div id='investment-table--grants'></div>
<div id='investment-table--contracts'></div>
<div id='investment-table--research'></div>
</div>
</div>
<div id='right-spacer'></div>
</div>

<div class='chart-footer'>
<div>
<span class='faded'>Updated as of March 2019 / </span>
<a class='download-data' onclick='downloadData()'>
{% include svgs/download_icon.svg %}
&nbsp;Download
</a>
</div>
</div>
</div>
</section>

</article>
84 changes: 84 additions & 0 deletions _includes/colleges/sectionone.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<article id="section-one">

<section id="investment-overview">
<div class="cu-header">
<div class="cu-header__number">
<span>01</span>
</div>
<h3 class="cu-header__title">Investment Overview</h3>
<h1 class="cu-header__teaser">
How much was <span class="cu-header--red">invested in colleges and universities?</span>
</h1>
<p class="cu-header__blurb">
In 2018, higher education institutions received a total of $1.068 trillion in revenue from federal and non-federal funding sources. Investments from the federal government were $149 billion of the total, representing 3.6% of federal spending. This money flowed into colleges and universities through three main vehicles: federal student aid, grants, and contracts. In our analysis we focused on data from nonprofit institutions that offer a program of two years or more.
</p>

<div class="cu-header__controls">
{% include colleges/colleges-share.html anchor="section-one" %}
</div>
</div>


<div id="investment-overview__viz">

<div id="title-section">
<p id="chart-title-aid">Student Aid</p>
<p id="chart-title-grants">Grants</p>
<p id="chart-title-contracts">Contracts</p>
</div>

<div id="investment-chart">
<div id="studentAid--mobile-title">Student Aid</div>
<div id="studentAid-bar"><p id="bar-text--aid">$98B</p></div>

<div id="grants--mobile-title">Grants</div>
<div id="grants-bar"><p id="bar-text--grants">$41B</p></div>


<div id="contracts--mobile-title">Contracts</div>
<div id="contracts-bar"><p id="bar-text--contracts">$10B</p></div>
</div>

<div id="investment-subtext">
<div id="aid-subsection">
<p id="aid-heading-aid">
Student Aid
</p>
<div id="aid-image">
<img src="/assets/icons/aidv2.svg"/>
</div>
<p id="aid-description">
Federal student aid is financial assistance provided through grants, scholarships, work-study, and loans to students for their educational expenses. This can include costs such as tuition, housing, transportation, books, and supplies. Loans comprise approximately 73% of the total aid to students, making them the largest source of assistance from the federal government.
Although student aid includes the $11.6 billion investment made through the <a class="cu-header--red" href="https://www.va.gov/education/about-gi-bill-benefits/" target="_blank">G.I. Bill of Rights</a>, it is not included in this analysis because we were not able to make a direct connection between that investment and the benefits given to an institution.
</p>
</div>
<div id="aid-subsection">
<p id="aid-heading-grants">
Grants
</p>
<div id="aid-image">
<img src="/assets/icons/grantsv2.svg"/>
</div>
<p id="aid-description">
A federal grant is an agreement through which a federal agency provides financial assistance to an individual or organization used for projects and expenses that contribute to public good. For example, in 2018, the Department of Commerce funded the University of Maryland, Baltimore County’s (UMBC) research for measuring and improving the robustness of deep learning algorithms.
</p>
</div>
<div id="aid-subsection">
<p id="aid-heading-contracts">
Contracts
</p>
<div id="aid-image">
<img src="/assets/icons/contractsv2.svg"/>
</div>
<p id="aid-description">
A federal contract is an agreement in which the federal government purchases a good or service from an organization or individual for government use.

For example, in 2018 the National Aeronautics and Space Administration used a federal contract to pay the California Institute of Technology to operate the Jet Propulsion Laboratory. This laboratory is a center for robotic exploration of the solar system that carries out essential research and tasks like developing a self-directed spacecraft.
</p>
</div>
</div>
</div>

</section>

</article>
103 changes: 103 additions & 0 deletions _includes/colleges/sectionpre.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<article id="section-pre">
<div class="section-pre--banner"></div>

<div id="section-pre--tablet_banner">
<p class="section-pre--tablet-subtext">
Federal Investment in Higher Education
</p>
<h3 class="section-pre--tablet-subblurb">
Explore the Federal Investment
in your <span id="cuRed">Alma Mater</span>
</h3>
<p class="section-pre--tablet-blurb">
Did you know the federal government invested over $149 billion in colleges and universities in fiscal year 2018? <br>
Those funds made an impact on over 3,000 schools, approximately 15 million undergraduates, and a little over 2.5 million
graduate students.
</p>
</div>


<section id="TOC">
<div id="section-pre__TOC">
<div class="section-pre__tile">
<a href="#section-one">
<div class="section-pre--number">
<h2>
01
</h2>
</div>
<h4 class="section-pre--subtext">
Investment Overview
</h4>
<h3 class="section-pre--subblurb">
WHAT IS A FEDERAL INVESTMENT?
</h3>

<p class="section-pre--blurb">
Learn more about the three categories of federal investments: student aid, grants, and contracts.
</p>
</a>
</div>

<div class="section-pre__tile">
<a href="#section-two">
<div class="section-pre--number">
<h2>
02
</h2>
</div>
<h4 class="section-pre--subtext">
My Alma Mater
</h4>

<h3 class="section-pre--subblurb">
How much did my school receive?
</h3>
<p class="section-pre--blurb">
Search for your school and discover details about federal funding at your alma mater.
</p>
</a>
</div>

<div class="section-pre__tile">
<a href="#section-three">
<div class="section-pre--number">
<h2>
03
</h2>
</div>
<h4 class="section-pre--subtext">
Agency Investment
</h4>
<h3 class="section-pre--subblurb">
Which federal agencies are involved?
</h3>
<p class="section-pre--blurb">
Find out which federal agencies provide investments and in what amounts.
</p>
</a>
</div>

<div class="section-pre__tile">
<a href="#section-four">
<div class="section-pre--number">
<h2>
04
</h2>
</div>
<h4 class="section-pre--subtext">
Investment Categories
</h4>
<h3 class="section-pre--subblurb">
What are the investments used for?
</h3>
<p class="section-pre--blurb">
Discover more about what is funded by federal investment.
</p>
</a>
</div>

</div>
</section>

</article>
Loading

0 comments on commit b63f9ca

Please sign in to comment.