Skip to content

Instantly share code, notes, and snippets.

@jeremycflin

jeremycflin/README.md

Last active October 13, 2015 21:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeremycflin/184d9fbd6eddbd676ba6 to your computer and use it in GitHub Desktop.
Save jeremycflin/184d9fbd6eddbd676ba6 to your computer and use it in GitHub Desktop.
Download ZIP
Sexual Assaults Reported by Texas Colleges
Raw
README.md
Raw
d3_data.csv
group date value
On campus forcible 2001 71
On campus forcible 2002 83
On campus forcible 2003 77
On campus forcible 2004 112
On campus forcible 2005 98
On campus forcible 2006 119
On campus forcible 2007 105
On campus forcible 2008 89
On campus forcible 2009 90
On campus forcible 2010 87
On campus forcible 2011 100
On campus forcible 2012 155
On campus forcible 2013 198
On campus non-forcible 2001 19
On campus non-forcible 2002 14
On campus non-forcible 2003 7
On campus non-forcible 2004 2
On campus non-forcible 2005 2
On campus non-forcible 2006 6
On campus non-forcible 2007 1
On campus non-forcible 2008 5
On campus non-forcible 2009 4
On campus non-forcible 2010 1
On campus non-forcible 2011 4
On campus non-forcible 2012 5
On campus non-forcible 2013 4
Student housing forcible 2001 53
Student housing forcible 2002 53
Student housing forcible 2003 53
Student housing forcible 2004 62
Student housing forcible 2005 61
Student housing forcible 2006 84
Student housing forcible 2007 64
Student housing forcible 2008 62
Student housing forcible 2009 68
Student housing forcible 2010 69
Student housing forcible 2011 68
Student housing forcible 2012 99
Student housing forcible 2013 136
Student housing non-forcible 2001 13
Student housing non-forcible 2002 5
Student housing non-forcible 2003 5
Student housing non-forcible 2004 0
Student housing non-forcible 2005 0
Student housing non-forcible 2006 4
Student housing non-forcible 2007 1
Student housing non-forcible 2008 3
Student housing non-forcible 2009 2
Student housing non-forcible 2010 0
Student housing non-forcible 2011 3
Student housing non-forcible 2012 3
Student housing non-forcible 2013 2
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sexual assaults reported by Texas colleges</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font: 18px Helvetica Neue;
/* background-color:#faf7f6;*/
}
.axis path {
display: none;
}
.axis line {
fill: none;
stroke-width: 0px;
shape-rendering: crispEdges;
}
.axis{
font-size:8px;
}
.group-label {
font-size: 9px;
font-weight: 400;
text-anchor: end;
}
span{
color:white;
}
form{
z-index: -1;
}
.numbers{
font-size: 8px;
display:none;
opacity:0.8;
}
.number{
font-size: 8px;
display:none;
opacity:0.8;
}
.first{
text-shadow: 0 0.5px 0 #fff;
}
.graphic{
max-width:1200px;
}
</style>
</head>
<body>
<div class="graphic">
<h1>Sexual assaults reported by Texas colleges</h1>
<p class="subtext">The number of on-campus sexual assaults in Texas reported to the federal government has spiked in recent years,
<br>but many experts think that’s because of better reporting and awareness<br> – not necessarily an increase in crimes.
</p>
<div id="graphic">
<!-- Add your HTML here! -->
<form>
<label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
<label><input type="radio" name="mode" value="stacked"> Stacked</label>
</form>
</div>
</div>
<!-- build:js scripts/main.min.js -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="main.js"></script>
<!-- endbuild -->
</body>
</html>
Raw
main.js
function drawGraphic(){
// Set margins and graphic canvas
var margin = {top: 10, right: 120, bottom: 50, left: 100},
width = 680 - margin.left - margin.right,
height = 280 - margin.top - margin.bottom;
// Parse and formate time
var parseDate = d3.time.format("%Y").parse,
formatYear = d3.time.format("%Y");
var y0 = d3.scale.ordinal()
.rangeRoundBands([height/1, 0]);
var y1 = d3.scale.linear();
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .05, 2);
// Set x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(formatYear);
var nest = d3.nest()
.key(function(d) { return d.group; });
var stack = d3.layout.stack()
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; })
.out(function(d, y0) { d.valueOffset = y0; });
var svg = d3.select("#graphic").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "graphic_svg")
.call(responsivefy)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var color = d3.scale.ordinal().range(["#6498a4", "#105A77", "#e59793","#942e48"]);
// Load data
d3.csv("d3_data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
var dataByGroup = nest.entries(data);
stack(dataByGroup);
x.domain(dataByGroup[0].values.map(function(d) { return d.date; }));
y0.domain(dataByGroup.map(function(d) { return d.key; }));
y1.domain([0, d3.max(data, function(d) { return d.value; })]).range([y0.rangeBand(), 0]);
var group = svg.selectAll(".group")
.data(dataByGroup)
.enter()
.append("g")
.attr("class", "group")
.attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });
group.append("text")
.attr("class", "group-label")
.attr("x", 40)
.attr("y", function(d) { return y1(d.values[0].value / 2); })
.attr("dy", ".35em")
.text(function(d) { return d.key; });
group.selectAll("rect")
.data(function(d) { return d.values; })
.enter()
.append("rect")
.style("fill", function(d) { return color(d.group); })
.attr("x", function(d) { return x(d.date); })
.attr("y", function(d) { return y1(d.value); })
.attr("width", x.rangeBand())
.attr("height", function(d) { return y0.rangeBand() - y1(d.value); });
// Hand coded numbers
svg.append("text")
.attr("x",59)
.attr("y",172)
.text("156")
.attr("class", "numbers")
svg.append("text")
.attr("x",86)
.attr("y",172)
.text("155")
.attr("class", "numbers")
svg.append("text")
.attr("x",114)
.attr("y",176)
.text("142")
.attr("class", "numbers")
svg.append("text")
.attr("x",142)
.attr("y",166)
.text("176")
.attr("class", "numbers")
svg.append("text")
.attr("x",169)
.attr("y",170)
.text("161")
.attr("class", "numbers")
svg.append("text")
.attr("x",196)
.attr("y",155)
.text("213")
.attr("class", "numbers")
svg.append("text")
.attr("x",223)
.attr("y",167)
.text("171")
.attr("class", "numbers")
svg.append("text")
.attr("x",248)
.attr("y",172)
.text("159")
.attr("class", "numbers")
svg.append("text")
.attr("x",275)
.attr("y",170)
.text("164")
.attr("class", "numbers")
svg.append("text")
.attr("x",304)
.attr("y",172)
.text("157")
.attr("class", "numbers")
svg.append("text")
.attr("x",329)
.attr("y",166)
.text("175")
.attr("class", "numbers")
svg.append("text")
.attr("x",357)
.attr("y",142)
.text("262")
.attr("class", "numbers")
svg.append("text")
.attr("x",384)
.attr("y",120)
.text("340")
.attr("class", "numbers")
// different categories
svg.append("text")
.attr("x",63)
.attr("y",215)
.text("71")
.attr("class", "number first")
svg.append("text")
.attr("x",63)
.attr("y",155)
.text("19")
.attr("class", "number")
svg.append("text")
.attr("x",63)
.attr("y",91)
.text("53")
.attr("class", "number")
svg.append("text")
.attr("x",63)
.attr("y",47)
.text("13")
.attr("class", "number")
svg.append("text")
.attr("x",91)
.attr("y",215)
.text("83")
.attr("class", "number first")
svg.append("text")
.attr("x",91)
.attr("y",157)
.text("14")
.attr("class", "number")
svg.append("text")
.attr("x",91)
.attr("y",91)
.text("53")
.attr("class", "number")
svg.append("text")
.attr("x",92)
.attr("y",50)
.text("5")
.attr("class", "number")
svg.append("text")
.attr("x",117)
.attr("y",215)
.text("77")
.attr("class", "number first")
svg.append("text")
.attr("x",118)
.attr("y",160)
.text("7")
.attr("class", "number")
svg.append("text")
.attr("x",117)
.attr("y",91)
.text("53")
.attr("class", "number")
svg.append("text")
.attr("x",118)
.attr("y",50)
.text("5")
.attr("class", "number")
svg.append("text")
.attr("x",142)
.attr("y",215)
.text("112")
.attr("class", "number first")
svg.append("text")
.attr("x",146)
.attr("y",161)
.text("2")
.attr("class", "number")
svg.append("text")
.attr("x",144)
.attr("y",88)
.text("62")
.attr("class", "number")
svg.append("text")
.attr("x",146)
.attr("y",50)
.text("0")
.attr("class", "number")
svg.append("text")
.attr("x",171)
.attr("y",215)
.text("98")
.attr("class", "number first")
svg.append("text")
.attr("x",174)
.attr("y",161)
.text("2")
.attr("class", "number")
svg.append("text")
.attr("x",171)
.attr("y",88)
.text("61")
.attr("class", "number")
svg.append("text")
.attr("x",174)
.attr("y",50)
.text("0")
.attr("class", "number")
svg.append("text")
.attr("x",196)
.attr("y",215)
.text("119")
.attr("class", "number first")
svg.append("text")
.attr("x",200)
.attr("y",158)
.text("6")
.attr("class", "number")
svg.append("text")
.attr("x",198)
.attr("y",83)
.text("84")
.attr("class", "number")
svg.append("text")
.attr("x",200)
.attr("y",49)
.text("4")
.attr("class", "number")
svg.append("text")
.attr("x",223)
.attr("y",215)
.text("105")
.attr("class", "number first")
svg.append("text")
.attr("x",227)
.attr("y",161)
.text("1")
.attr("class", "number")
svg.append("text")
.attr("x",225)
.attr("y",88)
.text("64")
.attr("class", "number")
svg.append("text")
.attr("x",227)
.attr("y",49)
.text("1")
.attr("class", "number")
svg.append("text")
.attr("x",252)
.attr("y",215)
.text("89")
.attr("class", "number first")
svg.append("text")
.attr("x",254)
.attr("y",161)
.text("5")
.attr("class", "number")
svg.append("text")
.attr("x",252)
.attr("y",88)
.text("62")
.attr("class", "number")
svg.append("text")
.attr("x",252)
.attr("y",49)
.text("3")
.attr("class", "number")
svg.append("text")
.attr("x",278)
.attr("y",215)
.text("90")
.attr("class", "number first")
svg.append("text")
.attr("x",280)
.attr("y",161)
.text("4")
.attr("class", "number")
svg.append("text")
.attr("x",278)
.attr("y",86)
.text("68")
.attr("class", "number")
svg.append("text")
.attr("x",281)
.attr("y",49)
.text("2")
.attr("class", "number")
svg.append("text")
.attr("x",307)
.attr("y",215)
.text("87")
.attr("class", "number first")
svg.append("text")
.attr("x",309)
.attr("y",161)
.text("1")
.attr("class", "number")
svg.append("text")
.attr("x",307)
.attr("y",86)
.text("69")
.attr("class", "number")
svg.append("text")
.attr("x",309)
.attr("y",50)
.text("0")
.attr("class", "number")
svg.append("text")
.attr("x",331)
.attr("y",215)
.text("100")
.attr("class", "number first")
svg.append("text")
.attr("x",335)
.attr("y",161)
.text("4")
.attr("class", "number")
svg.append("text")
.attr("x",335)
.attr("y",86)
.text("68")
.attr("class", "number")
svg.append("text")
.attr("x",335)
.attr("y",49)
.text("3")
.attr("class", "number")
svg.append("text")
.attr("x",358)
.attr("y",215)
.text("155")
.attr("class", "number first")
svg.append("text")
.attr("x",361)
.attr("y",160)
.text("5")
.attr("class", "number ")
svg.append("text")
.attr("x",360)
.attr("y",78)
.text("99")
.attr("class", "number")
svg.append("text")
.attr("x",360)
.attr("y",49)
.text("3")
.attr("class", "number")
svg.append("text")
.attr("x",384)
.attr("y",215)
.text("198")
.attr("class", "number first")
svg.append("text")
.attr("x",389)
.attr("y",160)
.text("4")
.attr("class", "number ")
svg.append("text")
.attr("x",384)
.attr("y",68)
.text("136")
.attr("class", "number ")
svg.append("text")
.attr("x",388)
.attr("y",49)
.text("2")
.attr("class", "number ")
group.filter(function(d, i) { return !i; }).append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y0.rangeBand() + ")")
.call(xAxis);
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function() {
d3.select("input[value=\"stacked\"]").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(timeout);
if (this.value === "multiples") transitionMultiples();
else transitionStacked();
}
function transitionMultiples() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });
g.selectAll("rect").attr("y", function(d) { return y1(d.value); });
g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2); })
d3.selectAll(".number").style("display","block")
d3.selectAll(".numbers").style("display","none")
}
function transitionStacked() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr("transform", "translate(0," + y0(y0.domain()[0]) + ")");
g.selectAll("rect").attr("y", function(d) { return y1(d.value + d.valueOffset); });
g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2 + d.values[0].valueOffset); })
d3.selectAll(".numbers").style("display","block")
d3.selectAll(".number").style("display","none")
}
});
d3.select("svg")
.append("text")
.attr("x", (width)-(width/8))
.attr("y", height*1.18)
.text("Data source: U.S. Department of Education")
.style({"font-size":"6px",
"font-family":"Helvetica",
"font-weight":"300",
"opacity":"0.8",
});
function responsivefy(svg) {
var container = d3.select(svg.node().parentNode),
width = parseInt(svg.style("width")),
height = parseInt(svg.style("height")),
aspect = width / height;
svg.attr("viewBox", "0 0 " + width + " " + height)
.attr("perserveAspectRatio", "xMinYMid")
.call(resize);
d3.select(window).on("resize." + container.attr("#graphic"), resize);
function resize() {
var targetWidth = parseInt(container.style("width"));
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
}
};
drawGraphic();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment