Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
235 lines (202 sloc) 5.77 KB
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.state-dot {
fill: #8c8c8c;
cursor: pointer;
font-family: 'StateFaceRegular';
}
.axis text { font-size: 0.7em; }
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.other-state-container {
border-bottom: 1px solid black;
display: inline-block;
padding-bottom: 3px;
min-width: 200px;
}
div#chart { max-width:600px; }
/* D3 TIP */
.d3-tip {
font-size: 12px;
padding: 0px 5px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
width: 100%;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -3px 0 0 0;
top: 100%;
left: 0;
}
@font-face {
font-family: 'StateFaceRegular';
src: url('font/webfont/stateface-regular-webfont.eot');
src: url('font/webfont/stateface-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/webfont/stateface-regular-webfont.woff') format('woff'),
url('font/webfont/stateface-regular-webfont.ttf') format('truetype'),
url('font/webfont/stateface-regular-webfont.svg#StateFaceRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.other-state-sf {
font-family: 'StateFaceRegular';
color: #C657FA;
}
</style>
<body>
<div>
<small></small>
<p>The percentage changes in property and violent crime rates in<p>
<p>
<select id="state-select">
<option value="">Select a state</option>
</select>
between 2012 and 2013 were closest to
<span class="other-state-container">
<span class="other-state-sf"></span>
<span class="other-state-text"></span>
</span>
.
</p>
</div>
<div id="chart"></div>
<script src="js/d3.min.js"></script>
<script src="js/d3.tip.v0.6.3.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
var margin = {top: 20, right: 50, bottom: 5, left: 50},
width = $("#chart").width() - margin.left - margin.right,
height = width;
var yScale = d3.scale.linear()
.domain([-15, 7])
.range([height, 0]);
var xScale = d3.scale.linear()
.domain([20, -20])
.range([height, 0]);
var yAxis = yAxis = d3.svg.axis().scale(yScale).orient("left")
.tickValues([-15, -10, -5, 3, 7]),
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var svg = d3.select("#chart")
.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 + ")");
var highlightNearest = function(d) {
var x = xScale(parseFloat(d.property));
var y = yScale(parseFloat(d.violence));
var items = [];
$.each(d3.selectAll(".state-dot")[0], function() {
var d = d3.select(this).data()[0];
var dist = Math.sqrt(
Math.pow(x - xScale(parseFloat(d.property)), 2) +
Math.pow(y - yScale(parseFloat(d.violence)), 2)
);
items.push({"c": this, "d": dist})
});
items.sort(function(a, b) {
if (a.d > b.d) { return 1; }
if (a.d < b.d) { return -1; }
return 0;
});
var nb = d3.select(items[1].c).data()[0];
$(".other-state-sf").text(nb.sf);
$(".other-state-text").text(nb.state);
d3.selectAll(".state-dot")
.style("fill", function(f) {
if (f.state === d.state) { return "#6F318C"; }
if (f.state === nb.state) { return "#C657FA"; }
return "#8c8c8c";
});
}
tip = d3.tip()
.attr("class", "d3-tip")
.offset([-10, 0])
.html(function(d) {
return "<h3>" + d.state + "</h3><p>Property: " + d.property + "</p><p>Violence: " + d.violence + "</p>";
});
svg.call(tip);
d3.csv("data/data.csv", function(error, data) {
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + yScale(0) + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Property rate change");
// y-axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + xScale(0) + ", 0)")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Violence rate change");
svg.selectAll(".state-dot")
.data(data)
.enter().append("text")
.attr("class", "state-dot")
.attr("x", function(d) {return xScale(parseFloat(d.property));})
.attr("y", function(d) {return yScale(parseFloat(d.violence));})
.attr("data-state", function(d) {return d.state;})
.text(function(d) {return d.sf;})
.on("mouseover", function(d) {
$("#state-select").val(d.state);
$("#state-select").change();
highlightNearest(d);
tip.show(d);
})
.on("mouseout", tip.hide);
initSelect(data);
});
var initSelect = function(data) {
data.sort(function(a, b) {
if (a.state > b.state) { return 1; }
if (a.state < b.state) { return -1; }
return 0;
});
$.each(data, function(i) {
$("#state-select")[0].options[i+1] = new Option(this.state,
this.state);
});
$("#state-select").on("change", function() {
var val = $(this).val()
if (val === "") { return; }
highlightNearest(
d3.selectAll(
$("[data-state='" + val + "']")
).data()[0]
);
$(".other-state-container").css("min-width", 0);
});
}
</script>
</body>
</html>