Skip to content

Instantly share code, notes, and snippets.

@edooley7

edooley7/final_data.csv

Created August 10, 2015 01:36
Show Gist options
  • Save edooley7/dda91841b4f8beaf2eb9 to your computer and use it in GitHub Desktop.
Save edooley7/dda91841b4f8beaf2eb9 to your computer and use it in GitHub Desktop.
Download ZIP
Crime analysis bar chart
Raw
final_data.csv
Model Correct Incorrect
Full model 0.697930574099 0.302069425901
Total prior arrests (1994) 0.662075393538 0.337924606462
Average arrest rate 0.65631218218 0.34368781782
Age at release (1994) 0.641435089175 0.358564910825
Age at first offense 0.640078886819 0.359921113181
Consequence (first arrest) 0.624275062138 0.375724937862
Time served (1994) 0.615782932891 0.384217067109
Severity of offense (1994) 0.608015741508 0.391984258492
Sentence Length (1994) 0.607808616404 0.392191383596
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Correct vs. Incorrect classification</title>
</head>
<style>
body {
font: 12px sans-serif;
fill: #C5C3C6;
background: black;
}
.axis path,
.axis line {
fill: None;
stroke: #C5C3C6;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.bar {
fill: steelblue;
}
.rect:hover {
opacity: 0.5;
}
.x.axis path {
display: #C5C3C6;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 80, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - 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]);
var color = d3.scale.ordinal()
.range(["#5BC0EB", "#E55934", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(",.0%"));
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 + ")");
d3.csv("final_data.csv", function(error, data) {
if (error) throw error;
var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "Model"; });
data.forEach(function(d) {
d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Model; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll(".tick text")
.call(wrap, x1.rangeBand());
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".4em")
.style("text-anchor", "end")
.text("Percent of prisoners");
var model = svg.selectAll(".model")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.Model) + ",0)"; });
model.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("class", ".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); })
.style("opacity", .65)
var legend = svg.selectAll(".legend")
.data(ageNames.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color)
.style("opacity",.65);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
var barWidth = width / data.length;
model.append("text")
.attr("x", barWidth / 2)
.attr("y", function(d) { return y(d.value) + 3; })
.attr("dy", ".75em")
.text(function(d) { return d.value; });
function mouseover() {
d3.select(this).style("opacity",1 );
}
function mouseout() {
d3.select(this).style("opacity",.65);
}
d3.selectAll("rect").on("mouseover",mouseover).on("mouseout",mouseout);
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment