jaellis/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.button {
border-top: 1px solid #c997f7;
background: #b065d6;
background: -webkit-gradient(linear, left top, left bottom, from(#8826e3), to(#b065d6));
background: -webkit-linear-gradient(top, #8826e3, #b065d6);
background: -moz-linear-gradient(top, #8826e3, #b065d6);
background: -ms-linear-gradient(top, #8826e3, #b065d6);
background: -o-linear-gradient(top, #8826e3, #b065d6);
padding: 6.5px 13px;
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #a26eb3;
background: #a26eb3;
color: #d9d9d9;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
pointer-events: none;
}
.axis {
font: 18px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
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.select(".button").append("svg")
.text("I am button")
.on("click",function() {
});
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
d3.csv("simple_percents_arr_by_type.csv", type, function(error, data) {
x.domain(data.map(function(d) { return d.Crime_Type; }));
y.domain([0, d3.max(data, function(d) { return d.Arrest_Percent; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Percent of Crimes resulting in Arrest");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Crime_Type); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.Arrest_Percent); })
.attr("height", function(d) { return height - y(d.Arrest_Percent); })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .text(d.Crime_Type + "\n" + d.Arrest_Percent + "%")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px")
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0)
})
});
function type(d) {
d.Arrest_Percent = +d.Arrest_Percent;
return d;
}
</script>

## simple_percents_arr_by_type.csv

          
            Crime_Type
            Arrest_Percent

            
              KIDNAPPING
              13

            
              PUBLIC INDECENCY
              100

            
              PUBLIC PEACE VIOLATION
              74

            
              INTERFERENCE WITH PUBLIC OFFICER
              93

            
              PROSTITUTION
              99

            
              LIQUOR LAW VIOLATION
              96

            
              ROBBERY
              10

            
              BURGLARY
              4

            
              WEAPONS VIOLATION
              81

            
              OTHER NARCOTIC VIOLATION
              80

            
              OBSCENITY
              80

            
              OTHER OFFENSE
              18

            
              CRIMINAL DAMAGE
              6

            
              THEFT
              10

            
              OFFENSE INVOLVING CHILDREN
              15

            
              GAMBLING
              99

            
              HOMICIDE
              30

            
              ARSON
              12

            
              OTHER OFFENSE 
              50

            
              NARCOTICS
              98

            
              SEX OFFENSE
              27

            
              STALKING
              18

            
              INTIMIDATION
              12

            
              DECEPTIVE PRACTICE
              19

            
              BATTERY
              23

            
              CRIMINAL TRESPASS
              74

            
              MOTOR VEHICLE THEFT
              6

            
              ASSAULT
              24

            
              CRIM SEXUAL ASSAULT
              12

            
              NON-CRIMINAL
              14
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.bar {
	fill: steelblue;
	}
	.bar:hover {
	fill: brown;
	}
	.button {
	border-top: 1px solid #c997f7;
	background: #b065d6;
	background: -webkit-gradient(linear, left top, left bottom, from(#8826e3), to(#b065d6));
	background: -webkit-linear-gradient(top, #8826e3, #b065d6);
	background: -moz-linear-gradient(top, #8826e3, #b065d6);
	background: -ms-linear-gradient(top, #8826e3, #b065d6);
	background: -o-linear-gradient(top, #8826e3, #b065d6);
	padding: 6.5px 13px;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	border-radius: 21px;
	-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	box-shadow: rgba(0,0,0,1) 0 1px 0;
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	color: white;
	font-size: 14px;
	font-family: Georgia, Serif;
	text-decoration: none;
	vertical-align: middle;
	}
	.button:hover {
	border-top-color: #a26eb3;
	background: #a26eb3;
	color: #d9d9d9;
	}
	.button:active {
	border-top-color: #1b435e;
	background: #1b435e;
	}
	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	height: 28px;
	padding: 2px;
	font: 12px sans-serif;
	pointer-events: none;
	}
	.axis {
	font: 18px sans-serif;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.x.axis path {
	display: none;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;
	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);
	var y = d3.scale.linear()
	.range([height, 0]);
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10);
	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.select(".button").append("svg")
	.text("I am button")
	.on("click",function() {
	});
	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);
	d3.csv("simple_percents_arr_by_type.csv", type, function(error, data) {
	x.domain(data.map(function(d) { return d.Crime_Type; }));
	y.domain([0, d3.max(data, function(d) { return d.Arrest_Percent; })]);
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Percent of Crimes resulting in Arrest");
	svg.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.Crime_Type); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.Arrest_Percent); })
	.attr("height", function(d) { return height - y(d.Arrest_Percent); })
	.on("mouseover", function(d) {
	div.transition()
	.duration(200)
	.style("opacity", .9);
	div .text(d.Crime_Type + "\n" + d.Arrest_Percent + "%")
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY) + "px")
	})
	.on("mouseout", function(d) {
	div.transition()
	.duration(500)
	.style("opacity", 0)
	})
	});
	function type(d) {
	d.Arrest_Percent = +d.Arrest_Percent;
	return d;
	}
	</script>
	Crime_Type	Arrest_Percent
	KIDNAPPING	13
	PUBLIC INDECENCY	100
	PUBLIC PEACE VIOLATION	74
	INTERFERENCE WITH PUBLIC OFFICER	93
	PROSTITUTION	99
	LIQUOR LAW VIOLATION	96
	ROBBERY	10
	BURGLARY	4
	WEAPONS VIOLATION	81
	OTHER NARCOTIC VIOLATION	80
	OBSCENITY	80
	OTHER OFFENSE	18
	CRIMINAL DAMAGE	6
	THEFT	10
	OFFENSE INVOLVING CHILDREN	15
	GAMBLING	99
	HOMICIDE	30
	ARSON	12
	OTHER OFFENSE	50
	NARCOTICS	98
	SEX OFFENSE	27
	STALKING	18
	INTIMIDATION	12
	DECEPTIVE PRACTICE	19
	BATTERY	23
	CRIMINAL TRESPASS	74
	MOTOR VEHICLE THEFT	6
	ASSAULT	24
	CRIM SEXUAL ASSAULT	12
	NON-CRIMINAL	14