ejs06003/crime.csv

## crime.csv

          
            Crime
            Count

            
              Family Dispute
              2724

            
              Simple Assault
              2408

            
              M/V Violations
              2280

            
              Suspicious Activity
              2003

            
              Threatening
              1296

            
              Criminal Mischief
              877

            
              Other Investigation
              847

            
              Found Property
              824

            
              Mental Cases
              823

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>TEST</title>
        <script type="text/javascript" src="d3.v3.js"></script>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js "></script>

        <link rel="stylesheet" href="d3css.css">

<style>

body {
  font: 20px sans-serif;
  color: teal;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>

</head>
<body>

<p class="button3">Reset to Initial Values</p>
<p class="button">Different values</p>
<p class="button2">Set all to 12.</p>
<script type="text/javascript">

//External Dataset

d3.csv("crime.csv", function(err, data) {
dataset = data
console.log(data);


//Width, height & margin
var margin = {top: 20, right: 20, bottom: 150, left: 40},
    w = 960 - margin.left - margin.right,
    h = 600 - margin.top - margin.bottom;


//xScale
var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, w], 0.05);

//yScale
var yScale = d3.scale.linear()
    .domain([0,function(d) { return d3.max(d.Count); }])
    .range([0, h]);

//yAxis Scale - to make numbers go up instead of down
var yAxisScale = d3.scale.linear()
    .domain([0,function(d) { return d3.max(d.Count); }])
    .range([h, 0]);

//X Axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

//Y Axis
var yAxis = d3.svg.axis()
    .scale(yAxisScale)
    .orient("left");

//Create SVG element
var svg = d3.select("body").append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x", function(d, i) { return xScale(i); })
	.attr("y", function(d) { return h - yScale(d);})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d) { return yScale(d.Count); })
	.attr("fill", function(d) { return "rgb(0, 0, " + (d.Count * 10) + ")"; });

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + h + ")")
    .call(xAxis);

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("Count");

//GOOD
//X Axis text
svg.selectAll("text")
    .data(dataset)
    .attr("x", -10 )
    .attr("transform", "rotate(-70)")
    .style("text-anchor", "end")
    .text(function(d) { return d.Crime; });


});


/*


//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
d3.select(".button")
.on("click", function() {

var dataset = [ 1, 2, 3, 4, 5, 6, 7, 8, 20];

svg.selectAll("rect")
	.data(dataset)
	.transition()
	.delay(function(d, i) { return i / dataset.length * 1000; })
	.duration(1000)
	.ease("")
	.attr("y", function(d) { return h - yScale(d);})
	.attr("height", function(d) { return yScale(d); })
	.attr("fill", function(d) {return color(d)});
});


//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
d3.select(".button2")
.on("click", function() {

var dataset = [ 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ];

svg.selectAll("rect")
	.data(dataset)
	.transition()
	.delay(function(d, i) { return i / dataset.length * 1000; })
	.duration(1000)
	.ease("cubic-in-out")
	.attr("y", function(d) { return h - yScale(d);})
	.attr("height", function(d) { return yScale(d); })
	.attr("fill", function(d) {return color(d)});
});


//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
d3.select(".button3")
.on("click", function() {

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];

svg.selectAll("rect")
	.data(dataset)
	.transition()
	.delay(function(d, i) { return i / dataset.length * 1000; })
	.duration(1000)
	.ease("cubic-in-out")
	.attr("y", function(d) { return h - yScale(d);})
	.attr("height", function(d) { return yScale(d); })
	.attr("fill", function(d) {return color(d)});
});
*/


        </script>
    </body>
</html>
	Crime	Count
	Family Dispute	2724
	Simple Assault	2408
	M/V Violations	2280
	Suspicious Activity	2003
	Threatening	1296
	Criminal Mischief	877
	Other Investigation	847
	Found Property	824
	Mental Cases	823
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>TEST</title>
	<script type="text/javascript" src="d3.v3.js"></script>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js "></script>

	<link rel="stylesheet" href="d3css.css">

	<style>

	body {
	font: 20px sans-serif;
	color: teal;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	</style>

	</head>
	<body>

	<p class="button3">Reset to Initial Values</p>
	<p class="button">Different values</p>
	<p class="button2">Set all to 12.</p>
	<script type="text/javascript">

	//External Dataset

	d3.csv("crime.csv", function(err, data) {
	dataset = data
	console.log(data);





	//Width, height & margin
	var margin = {top: 20, right: 20, bottom: 150, left: 40},
	w = 960 - margin.left - margin.right,
	h = 600 - margin.top - margin.bottom;


	//xScale
	var xScale = d3.scale.ordinal()
	.domain(d3.range(dataset.length))
	.rangeRoundBands([0, w], 0.05);

	//yScale
	var yScale = d3.scale.linear()
	.domain([0,function(d) { return d3.max(d.Count); }])
	.range([0, h]);

	//yAxis Scale - to make numbers go up instead of down
	var yAxisScale = d3.scale.linear()
	.domain([0,function(d) { return d3.max(d.Count); }])
	.range([h, 0]);

	//X Axis
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

	//Y Axis
	var yAxis = d3.svg.axis()
	.scale(yAxisScale)
	.orient("left");

	//Create SVG element
	var svg = d3.select("body").append("svg")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x", function(d, i) { return xScale(i); })
	.attr("y", function(d) { return h - yScale(d);})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d) { return yScale(d.Count); })
	.attr("fill", function(d) { return "rgb(0, 0, " + (d.Count * 10) + ")"; });

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis);

	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("Count");

	//GOOD
	//X Axis text
	svg.selectAll("text")
	.data(dataset)
	.attr("x", -10 )
	.attr("transform", "rotate(-70)")
	.style("text-anchor", "end")
	.text(function(d) { return d.Crime; });




	});




	/*



	//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
	d3.select(".button")
	.on("click", function() {

	var dataset = [ 1, 2, 3, 4, 5, 6, 7, 8, 20];

	svg.selectAll("rect")
	.data(dataset)
	.transition()
	.delay(function(d, i) { return i / dataset.length * 1000; })
	.duration(1000)
	.ease("")
	.attr("y", function(d) { return h - yScale(d);})
	.attr("height", function(d) { return yScale(d); })
	.attr("fill", function(d) {return color(d)});
	});


	//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
	d3.select(".button2")
	.on("click", function() {

	var dataset = [ 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ];

	svg.selectAll("rect")
	.data(dataset)
	.transition()
	.delay(function(d, i) { return i / dataset.length * 1000; })
	.duration(1000)
	.ease("cubic-in-out")
	.attr("y", function(d) { return h - yScale(d);})
	.attr("height", function(d) { return yScale(d); })
	.attr("fill", function(d) {return color(d)});
	});




	//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
	d3.select(".button3")
	.on("click", function() {

	var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];

	svg.selectAll("rect")
	.data(dataset)
	.transition()
	.delay(function(d, i) { return i / dataset.length * 1000; })
	.duration(1000)
	.ease("cubic-in-out")
	.attr("y", function(d) { return h - yScale(d);})
	.attr("height", function(d) { return yScale(d); })
	.attr("fill", function(d) {return color(d)});
	});
	*/






	</script>
	</body>
	</html>