Built with blockbuilder.org
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.
xxxxxxxxxx<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