Git Product home page Git Product logo

college-scorecard's Introduction

College Scorecard

A website that allows students (high school and adult) and those who support them (parents, guidance counselors) to not only search among colleges to find schools that would meet their desires, but also encourage them to consider "value" factors, be exposed to schools with better outcomes, and allow users to compare and contrast schools across different dimensions of "fit," highlighting "value" factors. The goal is to enable people to find schools that are best suited to them, and ensure a broad and flexible definition of elements that contribute to "fit."

Installation

College Scorecard now uses Gridsome, a Vue.js poweredJamstack framework for building static generated websites & apps. To

1. Install Gridsome CLI tool if you don't have

npm install --global @gridsome/cli

2. Install Dependencies

npm install to install project dependencies

3. Launch the server

  • Copy .env.example to .env
  • Add values to .env
  • gridsome develop to launch the College Scorecard website on a local development server

Environment Variables

Required Environment Variables

  • GRIDSOME_API_KEY: The api key used to submit requests to Open Data Maker. Authorization is handled by api.data.gov. Sign up for a key at: api.data.gov/signup/
  • GRIDSOME_API_URL: The API base URL for Open Data Maker.

Typical .env file:

GRIDSOME_API_KEY=<API_KEY_HERE>
GRIDSOME_API_URL=https://api.data.gov/ed/collegescorecard/v1/

Optional Environment Variables

The following environment variables should be set to ensure full functionality for all pages. These configurations are not required to view the site locally but will ensure all items are working as intended.

  • GRIDSOME_API_SIGNUP_KEY: API key for api.data.gov used during the embedded sign up form submission process (data/documentation/#api-key-signup). This key should be configured by following this documentation
  • GRIDSOME_RECAPTCHA_KEY: Key used during V2 ReCaptcha workflows. See documentation for registration and configuration information.
  • GRIDSOME_GOOGLE_MAPS_KEY: API key for Google Static Maps functionality. Refer to Google Maps Developer Documentation for configuration information.

Typical .env file:

export GRIDSOME_API_SIGNUP_KEY=<API_KEY_HERE>
export GRIDSOME_RECAPTCHA_KEY=<RECAPTCHA_API_KEY_HERE>
export GRIDSOME_GOOGLE_MAPS_KEY=<GOOGLE_MAPS_API_KEY_HERE>

Front End Development

Stylesheets

JavaScript

See the JavaScript docs for more information on our scripting tools and workflows.

Accessibility

college-scorecard's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

college-scorecard's Issues

Different visual options for tuition vs. net price

Would be helpful to have a few options on how we might display visually the pricing data.

Meaning -- how can we show tuition and explain that it's a sticker price vs. net price average to explain that that's what people usually actually pay.

A few super sketchy directions would be really helpful!

As a Consumer, I can perform a Simple Search

As a Consumer, I can perform a Simple Search using Name, Location (State, Region, Zip + Radius), and Size fields to view a resulting list of institutions matching my query. These results would show: 1) Name of School, 2) Location of School, 3) Type of Institution (2-year/4-year), 4) Undergraduate Population,

"From 2013derived_opeid6.csv fields:
name=INSTNM_MAIN
city=CITY_MAIN
state=STABBR_MAIN
zip=ZIP_MAIN
region=REGION_MAIN
type-of-institution=INSTCAT_MAIN
size=UGDS (undergraduate degree-seeking enrollment number).

From a user experience (story acceptance) perspective, this includes these smaller stories

  • Search by Name #35
  • Search by State #36
  • Search by multiple states #37
  • Search by distance from ZIP code #38
  • Search by region #282
  • search by size #279
  • search by major

Alternatively, 2013derived_opeid.csv has the same variables broken down by branch (possibly use _FREQ instead of _MAIN). Data dictionary at https://docs.google.com/spreadsheets/d/1wIbBcnv-cMhmuF_8A1pFJ1vVi-W83PMayEz8hhBuKTY/edit#gid=802307363 (including interpretation for INSTCAT_MAIN field)"

Region is a number.. is there a mapping to words somewhere? DN: The data dictionary at https://docs.google.com/spreadsheets/d/1wIbBcnv-cMhmuF_8A1pFJ1vVi-W83PMayEz8hhBuKTY/edit#gid=802307363 includes an interpretation for this column.

  • read csv files
  • read 2012derived_opeid.csv
  • create elasticsearch index
  • search by attribute ( INSTNM_MAIN)
  • column name mapping
  • configure API endpoint
  • search by Name
  • search by state, zip
  • search by region
  • search by size
  • geolocation radius search

"Advanced Search" link is smushed

In the search form, the "Advanced Search" link looks like this:

image

Some things:

  • The button-add class might not be doing the right thing here
  • This should be a link (<a>) with href="#advanced-search", not a <button>
  • We should stub out the advanced search part of the form and make it collapsible

Content style guide

So! I did some digging and no one has a public, central content style guide.

But! Data.gov had one (that's built on top of GDS's one), so I did a PR on the central style guide work (which is mostly visual right now) to include a portion on content, using the basis of the data.gov style guide. I think they're into it!

We should know more tomorrow. Here is the PR, and the specific text: https://github.com/18F/govt-wide-patternlibrary/pull/66/files

Choose carousel technique

  • I chatted with @shawnbot about favorite carousel implementations for the homepage
  • We both agreed that this design is very simple and so don't want to include a huge carousel library just for this
  • We may be including jquery in this project for other reasons. If yes, then we will likely use a jquery carousel
  • If we're not including jquery, then @shawnbot may code up a simple stand-alone carousel if we can't otherwise find a lightweight, stand-alone implementation

Review college cost comparison tool and GI comparison tool

https://department-of-veterans-affairs.github.io/gi-bill-comparison-tool/

http://www.consumerfinance.gov/paying-for-college/compare-financial-aid-and-college-cost/

Would love your feedback.

History:

  • CFPB made a college cost comparison tool
  • VA forked it and added stuff specifically for veterans
  • PIFs won a hackathon by expanding the GI comparison tool significantly
  • CFPB went back and made huge updates

Marina Martin, Patrick Campbell, Rob Sosinski and Gene Koo would be the right contacts.

Accordions should be keyboard accessible

Currently the accordion elements as specced in #49 don't pass 508 WCAG 2.0 AA muster, primarily because they don't provide keyboard accessibility. This can be achieved by replacing the <a aria-controls="..."> elements with <button> elements, but that requires some CSS reworking as well.

Associate data fields with text in comps

We're still a little unclear on which fields to use and how to translate them into the text in @jjoteal's comps. Here are the high-priority ones:

  • The "4-year institution" bits presumably come from the INSTCAT_MAIN field, but the data dictionary lists 6 possible values, and it's not clear how to translate these into more layperson-friendly text:
Institutional category
1 Degree-granting, graduate with no undergraduate degrees  
2 Degree-granting, primarily baccalaureate or above  
3 Degree-granting, not primarily baccalaureate or above  
4 Degree-granting, associate's and certificates  
5 Nondegree-granting, above the baccalaureate  
6 Nondegree-granting, sub-baccalaureate  
  • The school "meters" each refer to a different field, and the comps suggest that an income selector will change those values whenever it's changed. Which fields are these meters driven by, and do we have the data for each of these fields for each income range? (Also, what are those ranges?)

image

As a picc developer, I can import the actual data, so that it is available for searches and display

What encoding is used for 2012derived_opeid.csv?

If I assume it is UTF-8, I get an invalid byte sequence in UTF-8 around row 2305.
If I open the file in Numbers line 2307 has: Globe UniversityñMadison West

  • confirm files delivered post Jul 1 can be imported (UTF8 encoding) -- tested with 5 years of data (2009-2013) with same fields as consumer tool
  • index all fields (even if they aren't in data.yaml)
  • figure out syntax for querying nested fields

As a Consumer, I want to view Basics info about an Indivdual School, so that I can get a good feel for whether it might be a good match for me.

We should see:

  • City and State
  • Mini-map (use Leaflet or Pinpoint)
  • Type of Institution/"predominant degree" (2-year or 4-year)
  • Undergraduate Population
  • Special Designation
  • Mission Statement (moved to #101)
  • Admissions Data (moved to #102)
  • Costs & Financial Aid Data (moved to #103 and #104)

image

This is a follow-up to #2. These are some more granular tasks to support the implementation of the design:

  • @ultrasaurus to update the public API so that it surfaces all of the fields needed for the top-level school info

  • @jjoteal to provide a mobile design and/or update the comp below to account for information that we're not including in this sprint

  • @meiqimichelle to further flesh out the school page style guide to match comps

  • @meiqimichelle to find and/or acquire, then integrate, these icons (tracked in #96):

    image

Autocomplete on major search

From @jjoteal #67 :
'In the Major search, I was hoping that the user could start typing a major and then it would be a "smart search" and autodetect what the user was typing with a list of suggested options.'

@shawnbot We had talked about using Chosen for this feature. Is this still the plan? I'm not sure where this is on the priority list, either.

As a student, I would like to see combined SAT scores and an indicator of distribution, so that I can see how my score fits within typical student range

I believe what we have are 25th, 50th, and 75th percentile for each of the three tests (MT = math, WR = written, VR = reading comprehension?). I don't think we can just add SATMT25 + SATVR25 + SATWR25 to correctly calculate the combined 25th percentile, as shown in this image:

image

FYI: here's the list of column headings I've got that contain SAT:

SATVR25
SATVR75
SATMT25
SATMT75
SATWR25
SATWR75
SATVRMID
SATMTMID
SATWRMID
SAT_AVG
SAT_AVG_ALL

Create accessible forms to match mockup styles

  • The accessible HTML outline already exists after #8
  • These bones need to be styled, which is not always straightforward (silly browsers and form rendering)
  • I am checking with other teams at 18F on their techniques so we're using the best ones

Design review: mobile homepage

@jjoteal I updated the mobile homepage with many tweaks to get closer to your work. It is time for you to find everything I missed!

To kick things off, I have two obvious things to fix:

Methinks that you intended a smaller font size on mobile for the buttons. Right now we have:
screenshot 2015-07-01 19 30 01

Likewise, you perhaps intended smaller buttons overall. Right now the buttons are a set width, but that causes problems at smaller screen sizes:
screenshot 2015-07-01 19 40 14

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.