Federal Student Loans, Georgia, 2013

<!DOCTYPE html>
<html>
<style>
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

body {
  font: 12px sans-serif;
}

.title {
  font: 24px sans-serif;
}

.byline{
  font: 10px sans-serif;
}

.explanation {
  font: 12px sans-serif;
}

.x.axis path {
  display: none;
}

.y.axis path {
  display: none;
}

.axis .tick {
  stroke-width: 0;
}

.grid .tick {
    stroke: white;

}
.grid path {
      stroke-width: 0;
}
</style>
  <head>
  	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
  	<script>

//**********************************
// open -a 'Google Chrome' --args -allow-file-access-from-files
// *********************************

var margin = {top: 220, right: 20, bottom: 190, left: 40},
  width = 2500 - margin.left - margin.right,
  height = 700 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
  .range([height, 0])
  .domain([0, 13000]); ///let's just hardcode this

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickFormat(d3.format("s"))
  .ticks(5);

function make_x_axis() {        
    return d3.svg.axis()
        .scale(x0)
         .orient("bottom")
         .ticks(5)
}

function make_y_axis() {        
    return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5)
}

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 + ")");

var title = "Federal Direct Student Loans, Georgia, 2013";
var byline = "by Maggie Lee";
var date = "May 5, 2014"
var source = "Source: https://studentaid.ed.gov/about/data-center/student/title-iv";
var nodes = [
    {title:  "Here's the profile of federal student loans for students of the biggest Georgia schools and it doesn't answer questions, it asks them. Of course the bigger schools tend to have the most loans, that's no surprise. But why do some schools have more unsubsidized than subsidized loan recipients? Why do some schools have so many unsubsidized graduate loans? It might prove, though, that artists are brave. There are more people getting in hock for art school than Georgia Tech."}
]

//var w = 500, h = 200;

var vSeparation = 13, textX=10, textY=0, maxLength=150;

var textHolder = svg.selectAll("text")
    .data(nodes)
    .enter().append("text")
    .attr("y", -170)
    .attr("text-anchor", "start")
    .each(function (d) {
        var lines = wordwrap(d.title, maxLength)

for (var i = 0; i < lines.length; i++) {
            d3.select(this).append("tspan").attr("dy",vSeparation).attr("x",textX).text(lines[i])
        }
    });

function wordwrap(text, max) {
    var regex = new RegExp(".{0,"+max+"}(?:\\s|$)","g");
    var lines = []

var line
    while ((line = regex.exec(text))!="") {
        lines.push(line);
    }

return lines
}

//******** end declarations

console.log(typeof(textHolder));

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

var data = data.filter(function(row) {
    return row["Subsidised"] > 1000;
  }) // return just "big" schools, those w/ more than 500 of the biggest loan recipient

var schoolNames = d3.keys(data[0]).filter(function(key) 
  {return key == "Subsidised" 
  || key == "Unsubsidized Undergraduate"
  || key == "Unsubsidized Graduate"
  || key == "Parent Plus"
  || key == "Grad Plus"
  ; }); // returns all rows, just these columns

data.forEach(function (d) {
    d.schools = schoolNames.map(function (name) {return {name: name, value: +d[name]}; });
  });

data.sort(function (a, b) {return b["Subsidised"] - a["Subsidised"]; }); /// sort it by that biggest kind of loan

x0.domain(data.map(function (d) {return d.School; }));
x1.domain(schoolNames).rangeRoundBands([0, x0.rangeBand()]);
console.log(data);
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")  
            .style("text-anchor", "start")
            .attr("class", function (d, i) {return data[i]['School']})
            //.on("mouseover", function (d, i) { console.log("clicked" + data[i]['School']); })
            // .attr("dx", ".9em")
            // .attr("dy", "-1.5em")
            .attr("transform", function(d) {
                return "rotate(65)" 
                });
//////// ***************  Y AXIS 
svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(20,0)")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", -width*0.02)
  .attr("x", -height*0.05)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("# of recipients");

school.selectAll("rect")
  .data(function(d) {return d.schools})
  .enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function (d) {return x1(d.name); })
    .attr("y", function (d) {return y(d.value); })
    .attr("height", function (d) {return height - y(d.value); })
    .style("fill", function (d) {return color(d.name); })    ;

//*********** LEGEND

var legend = svg.selectAll(".legend")
      .data(schoolNames.slice())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", 10)
      .attr("width", 10)
      .attr("height", 10)
      .attr("y", -100)
      .style("fill", color);

legend.append("text")
      .attr("x", 21)
      .attr("class", "names")
      .attr("y", -95)
      .attr("dy", ".35em")
      .style("text-anchor", "start")
      .text(function(d) { return d; });

svg.append("g")         
        .attr("class", "grid")
        .attr("transform", "translate(20,0)")
        .call(make_y_axis()
            .tickSize(-width, 0, 0)
            .tickFormat("")
        );
// * ************** Annotations

svg.append("text")
      .attr("class", "title")
      .attr("x", 10)
      .attr("y", -200)
      .attr("text-anchor", "start")
      .text(title);

svg.append("text")
      .attr("class", "byline")
      .attr("x", 10)
      .attr("y", -185)
      .attr("text-anchor", "start")
      .text(byline);

svg.append("text")
      .attr("class", "byline")
      .attr("x", 10)
      .attr("y", -172)
      .attr("text-anchor", "start")
      .text(date);
     
    svg.append("g")
      .data(textHolder)
      .attr("class", "explanation");

// svg.append("text")
    //   .attr("x", (20))
    //   .attr("y", height + margin.bottom*0.9)
    //   .attr("text-anchor", "start")
    //   .text("https://studentaid.ed.gov/about/data-center/student/title-iv.html")
    //     .append("a")
    //     .attr("xlink:href", "https://studentaid.ed.gov/about/data-center/student/title-iv.html")
    //     .append("rect");

d3.select("body")
        .append("div")
        .html("<a href='https://studentaid.ed.gov/about/data-center/student/title-iv.html'>Source: StudentAid.gov</a>" );

});

</script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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