Skip to content

Instantly share code, notes, and snippets.

@ejs06003

ejs06003/crime.csv

Created December 19, 2013 19:57
Show Gist options
  • Save ejs06003/8045216 to your computer and use it in GitHub Desktop.
Save ejs06003/8045216 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
crime.csv
Neighborhood Count Count2 Count3
Amity 1517 555 2000
Annex 1372 555 1000
Beaver Hills 1333 555 4000
Dixwell 1842 555 1000
Downtown 4420 555 1000
Dwight 1531 555 1000
East Rock 1301 555 2000
East Shore 518 555 4000
Edgewood 1577 555 1000
Fair Haven 4333 555 1000
Fair Haven Heights 1215 555 4000
Hill 5970 555 1000
Long Wharf 564 555 1000
Newhallville 2789 555 4000
Prospect Hill 664 555 2000
Quinnipiac 1670 555 1000
West River 1340 555 1000
West Rock 468 555 2000
Westville 998 555 4000
Wooster Square 1366 555 1000
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 - Crime Test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js "></script>
<script type="text/javascript" src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js"></script>
<style>
body {
font: 15px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.d3-tip {
line-height: 1;
padding: 12px;
background: rgba(189, 195, 199, 0.9);
color: black;
border:0px solid black;
border-radius: 5px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(189, 195, 199, 0.9);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.canvas{
position:absolute;
top:10px;
left:20px
}
</style>
</head>
<body>
<div class="buttons">
<button class="one">Update 1.</button>
<button class="two">Update 2.</button>
<button class="three">Reset.</button>
</div>
<br>
<div class="canvas"></div>
<script type="text/javascript">
//External Dataset
var dataset;
d3.csv("crime.csv", function(error, data) {
dataset = data;
//Width, height & margin
var margin = {top: 50, right: 10, bottom: 200, left: 50},
w = 700 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var duration = 1000;
//xScale
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.10);
//yScale
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d,i) { return +d.Count; } )])
.range([0, h ]);
//yAxis Scale
var yAxisScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d,i) { return +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");
//Colors
var color = d3.scale.linear()
.domain([d3.min(dataset, function (d,i) { return +d.Count; } ), d3.max(dataset, function (d,i) { return +d.Count; } )])
.range(["yellow", "red"])
.interpolate(d3.interpolateHcl);
//tip
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) { return "<strong>Count:</strong> <span style='color:black'>" + d.Count + "</span>";});
//Create SVG element
var svg = d3.select(".canvas").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.call(tip);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) { return xScale(i); })
.attr("y", function(d) { return h - yScale(d.Count); })
.attr("width", xScale.rangeBand())
.attr("height", function(d) { return yScale(d.Count); })
.attr("fill", function(d) {return color(d.Count); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
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");
//X Axis text
svg.selectAll("text")
.data(dataset)
.attr("x", -10 )
.attr("y", -5 )
.attr("transform", "rotate(-90)")
.style("text-anchor", "end")
.text(function(d) { return d.Neighborhood; });
//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
d3.select(".one")
.on("click", function() {
var tipone = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) { return d.Count2;});
svg.selectAll("rect")
.data(dataset)
.transition()
.delay(function(d, i) { return i / dataset.length * duration; })
.duration(duration)
.ease("elastic")
.attr("y", function(d) { return h - yScale(d.Count2);})
.attr("height", function(d) { return yScale(d.Count2); })
.attr("fill", function(d) {return color(d.Count2); });
svg.call(tipone);
});
//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
d3.select(".two")
.on("click", function() {
var tipotwo = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) { return d.Count2;});
svg.selectAll("rect")
.data(dataset)
.transition()
.delay(function(d, i) { return i / dataset.length * duration; })
.duration(duration)
.ease("elastic")
.attr("y", function(d) { return h - yScale(d.Count3);})
.attr("height", function(d) { return yScale(d.Count3); })
.attr("fill", function(d) {return color(d.Count3); });
svg.call(tiptwo);
});
//UPDATING DATA!, COLORS!, LABELS!, TRANSITIONS!
d3.select(".three")
.on("click", function() {
svg.selectAll("rect")
.data(dataset)
.transition()
.delay(function(d, i) { return i / dataset.length * duration; })
.duration(duration)
.ease("elastic")
.attr("y", function(d) { return h - yScale(d.Count);})
.attr("height", function(d) { return yScale(d.Count); })
.attr("fill", function(d) {return color(d.Count); });
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment