Sexual assaults reported by Texas colleges, you can read the full story on the Texas Tribune:
http://www.texastribune.org/2015/07/09/next-year-heightened-focus-campus-sexual-assaults/
Built with blockbuilder.org
<!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="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="main.js"></script>
<!-- endbuild -->
</body>
</html>
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
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();