College Selection

High school students and their families can use this visualization to find the cheapest college with the highest post-graduate earnings in their ACT score range. Darker green (and larger) circles represent higher earnings. The idea is that a student would find their ACT score and look at the dark green colleges that are closet to the x-axis.

The data for this project is taken from the college scorecard dataset (https://catalog.data.gov/dataset/college-scorecard). I cleaned the original data to filter out 2-year colleges, colleges with fewer than 1000 students and any college with NULL values for the variables I used.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>

<head>
    <link type="text/css" rel="stylesheet" href="q7.css"/>
    <title> College Scorecard Data </title>
</head>

<body>
<script>
    //sources:   - https://bl.ocks.org/weiglemc/6185069
    //           - https://bl.ocks.org/phoebebright/3061203
    //           - https://bl.ocks.org/Caged/6476579
    //           - https://bl.ocks.org/bobmonteverde/2070123

var margin = {top: 40, right: 80, bottom: 30, left: 70};
    var width = 900 - margin.left - margin.right;
    var height = 440- margin.top - margin.bottom;

var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                    "translate(" + margin.left + "," + margin.top + ")");;

//add the title
    svg.append("svg:text")
            .attr("class", "title")
            .attr("x", 0)
            .attr("y", -15)
            .text("College Selection ");

// set up the tooltip
    var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

d3.csv("College_Scorecard_Cleaned.csv", function(error, data) {

//declare the datatype of each variable (+ is for numbers)
        data.forEach(function(d){
            d.Name= d.Name;
            d.ACT= +d.MedianACT;
            d.Cost= +d.Cost;
            d.Earnings= +d.Earnings;
            d.State=d.State;
            d.City=d.CITY;
        });

//set up the x-axis and y-axis scales
        var xScale = d3.scale.linear()
                .domain([13, 36])
                .range([0, width]);

var yScale = d3.scale.linear()
                .domain([d3.min(data, function(d) { return d.Cost; })-1000, d3.max(data, function(d) { return d.Cost; })])   // -1000 as padding so points don't overlap the axis
                        .range([height, 0]);

//set up the x axis
        var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")     //puts the numbers below the axis line
                .ticks(12)  ;

//print x axis
        svg.append("g")
                .attr("class","axis")
                .attr("transform","translate("+ 0 +"," + (height)+ ")")    //moves the axis to the bottom of the page
                .call(xAxis);

//Set up the y-axis
        var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(10);

//print y-axis
        svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate("+ 0 +"," + (0)+ ")")
                .call(yAxis);

//set up the tooltips
       function show_tooltip(d) {

tooltip.transition()
                    .style("opacity", .9);
            tooltip.html(d.Name + "<br/> in " + d.City + ", " + d.State)
                    .style("left", (d3.event.pageX + 5) + "px")
                    .style("top", (d3.event.pageY - 20) + "px")
        };

function hide_tooltip(d){
            tooltip.transition()
                    .style("opacity", 0);
        };

//build the points  (plotting ACT score vs. Annual Cost)
        svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr("class","point")
                .attr("r",function(d,i){
                    return Math.sqrt(d.Earnings/800);
                })
                .attr("d",d3.svg.symbol().type("circle"))
                .attr("transform",function(d){
                    return "translate(" + xScale(d.ACT)+ "," +yScale(d.Cost)+")";})
                .attr("fill",function(d,i){
                    if (d.Earnings<40000){
                        return "#1aff66";
                    }
                    else if (d.Earnings<60000){
                        return "#009933";
                    }
                    else {return "#003311";}
                })
                .on("mouseover", show_tooltip)
                .on("mouseout", hide_tooltip);

//name the x-axis
        svg.append("text")
                .attr("text-anchor", "middle")
                .attr("transform", "translate("+ (width/2) +","+(height + margin.bottom)+")")     // center the label below the x-axis
                .text("Median ACT Score")
                .attr("class","text");

//name the y-axis
        svg.append("text")
                .attr("text-anchor", "middle")
                .attr("transform", "translate("+ -50 +","+(height/2)+")rotate(-90)")  //center the label and rotate the text so it's vertical
                .text("Average Annual Cost of Attendance")
                .attr("class","text");

var brackets=[{color:"#1aff66",level: "Less than $40,000"},{color:"#009933",level: "$40,000-$60,000"},{color:"#003311",level: "More than $60,000"}];

//set up the legend
        var legend = svg.selectAll('.legend')
                .data(brackets)
                .enter()
                .append('g')
                .attr('class', 'legend')
                .attr('transform', function(d, i) {
                    return 'translate(' + (700) + ',' + (20*i) + ')';
                });

//add keys to the legend by color
        legend.append('rect')
                .attr("class","rect")
                .attr("width",10)
                .attr("height",20)
                .style('fill', function(d,i){
                    return d.color;
                });

//add labels to the legend
        legend.append("text")
                .attr('transform', function(d, i) {
                    return 'translate(' + 15 + ',' + (.5*i+15) + ')'})
                .text(function(d){return d.level;})
                .attr("text-align","center")
                .attr("font-size","10px");

//add title to the legend
        svg.append("text")
                .attr("class", "legend_text")
                .attr("x", width -margin.right)
                .attr("y", -14)
                .text("Median Earnings of graduates");

//add sub-title to the legend
        svg.append("text")
                .attr("class", "legend_text")
                .attr("x", width -margin.right/1.4)
                .attr("y", -3)
                .text( "(10 years after entry)");

});
</script>

</body>

https://d3js.org/d3.v3.min.js