xxxxxxxxxx
<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");
var school = svg.selectAll(".school")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("class", function (d) {return d.School;})
.attr("transform", function (d) { return "translate(" + x0(d.School) + ",0)"; })
; // this doesnt work yet
//.on("mouseover", function (d) {
// console.log("clicked" + d.School);
// d3.selectAll("." + d.School).style("fill", "black").style("stroke", "black"); // reset all text to black
//d3.selectAll("." + d.School).style("stroke", "red").style("fill", "red");
//}); //then whatever school you click on, the text turns red
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