Skip to content

Instantly share code, notes, and snippets.

@Saminu
Last active December 18, 2016 00:47
Show Gist options
  • Save Saminu/d748cc67faddb91a5c778e9accf38d95 to your computer and use it in GitHub Desktop.
Save Saminu/d748cc67faddb91a5c778e9accf38d95 to your computer and use it in GitHub Desktop.
Crime Rates
license: mit
var width = 960,
height = 500,
active = d3.select(null);
var margin = {top: 0, bottom: 0, left: 0, right: 0};
var projection = d3.geoMercator()
.translate([width / 2, height / 2])
.scale(3800)
.center([-2.1897038068837262, 53.03800390983686]);
var svg = d3.select("#map").append("svg")
.attr("width", width + (margin.left + margin.right))
.attr("height", height + (margin.top + margin.bottom));
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", reset);
var g = svg.append("g");
var path = d3.geoPath().projection(projection);
var completeData = [];
var dataToDraw = [];
d3.queue()
.defer(d3.json, "uk_topo.json")
.defer(d3.json, "stoke_topojson.json")
.defer(d3.json, 'countries_boundary.json')
.await(entryPoint);
function entryPoint(error, ukMap, stokeMap, ukBoundaries) {
if (error) {
console.error(error)
}
//reset button
infoBox();
var topoUK = topojson.feature(ukMap, ukMap.objects.GBR_adm2).features;
var stokeCounty = topojson.feature(stokeMap, stokeMap.objects.E06000021).features;
var ukCountries = topojson.feature(ukBoundaries, ukBoundaries.objects.subunits).features;
completeData = topoUK;
bdv.vis().drawPath(g, stokeCounty, "counties");
bdv.vis().drawPath(g, ukCountries, "countries", "green");
g.append("path")
.datum(topojson.mesh(ukMap, ukMap.objects.GBR_adm2, function (a, b) {
return a !== b;
}))
.attr("class", "mesh")
.attr("d", path);
}
function clicked(d) {
var activeCountry = d.properties.name;
drawCountyPathOnClick(activeCountry);
//update info text
var infoContainer = d3.select("#info");
bdv.vis().drawInfoSection(infoContainer, d);
if (active.node() === this) {
svg.selectAll(".buttons")
.text("Super");
}
active.classed("active", false);
active = d3.select(this).classed("active", true);
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
g.transition()
.duration(750)
.style("stroke-width", 1.5 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}
function reset() {
active.classed("active", false);
active = d3.select(null);
g.transition()
.duration(750)
.style("stroke-width", "1.5px")
.attr("transform", "");
g.selectAll(".counties").remove()
g.selectAll(".county-text").remove()
}
function infoBox() {
//back button
svg.append("rect")
.attr("width", 200)
.attr("height", 100)
.attr("fill", "blue")
.attr("x", 10)
.attr("y", 10)
.attr("class", "buttons")
.on("click", reset);
svg.selectAll(".buttons")
.append("text")
.attr('class', "button-text")
.attr("x", 10)
.attr("y", 10)
.text("Saminu")
.attr("dx", 5)
.attr("dy", 2)
}
function drawCountyPathOnClick(activeCountry) {
var dataDraw = completeData.map(function (d) {
if (d.properties.NAME_1 == activeCountry) {
dataToDraw.push(d)
}
});
g.selectAll(".counties")
.data(dataToDraw)
.enter()
.append("path")
.attr("class", "counties")
.attr("d", path)
.on("click", clicked);
bdv.vis().drawTitle(g, dataToDraw);
}
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="visModule.js"></script>
<script src="clicktozoom.js"></script>
<style>
/* body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } */
</style>
</head>
<body>
<div id="map">
</div>
<div id="info">
<div class="col-lg-12 col-sm-12">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Overview</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Crime Index</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Standard of Measures</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<script type="application/javascript">
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
</script>
</body>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment