Crime Vis UK

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='initial-scale=0,maximum-scale=0,user-scalable=no' />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    /* CSS goes here. */
    .subunit.SCT {
        fill: #ddc;
    }

.subunit.WLS {
        fill: #cdd;
    }

.subunit.NIR {
        fill: #cdc;
    }

.subunit.ENG {
        fill: #dcd;
    }

.subunit.IRL {
        display: none;
    }

.subunit-boundary {
        fill: none;
        stroke: #777;
        stroke-dasharray: 2, 2;
        stroke-linejoin: round;
    }

.subunit-boundary.IRL {
        stroke: #aaa;
    }
    .counties{
        fill: #b7b8b8;
        /*fill: none;*/
        stroke: #333;
        stroke-width: 0.1;
        fill-opacity: 0.4;
        /*z-index: 999;*/
    }

.county-circles{
        stroke-width: 0.1;
    }

svg{
        background-color: #d6d6d6;
        margin: 0;
    }
    .selected{
        fill: green;
    }
    .hover{
        fill: yellow;
    }
    .county-circles{
        /*fill: black;*/
        /*z-index: 999;*/
    }
    .county-text{
        font-size: 5px;
    }
    .Countries{
        fill: #999a9a;
        stroke: black;
        stroke-width: 0.4;
    }

.background {
        fill: none;
        pointer-events: all;
    }

.feature {
        fill: #ccc;
        cursor: pointer;
    }

.active {
        fill: orange;
    }

.mesh {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .buttons{
        /*z-index: 9999;*/
    }

</style>
</head>

<body>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="visModule.js" charset="utf-8"></script>
  <script>
    var width = Math.max(960, window.innerWidth),
//height = Math.max(500, window.innerHeight),
    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));

var zoom = d3.zoom()
    .scaleExtent([1, 100])
    .on("zoom", zoomed);

//svg.call(zoom);

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, "/data/uk_topo.json")
    .defer(d3.json, "/data/stoke_topojson.json")
    .defer(d3.json, '/data/countries_boundary.json')
    .await(entryPoint);

//d3.queue()
function zoomed() {
    //var scale = .9 / Math.max(dx / width, dy / height);
    g.transition()
        //.duration(450)s
        //.style("stroke-width", 1.5 / scale + "px")
        .attr("transform", d3.event.transform);
    g.selectAll("path").attr("d", path.projection(projection));
}

function entryPoint(error, ukMap, stokeMap, ukBoundaries) {
    if (error) {
        console.error(error)
    }

console.log(ukMap);

//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);

//bdv.vis().drawTitle(g, gbr, "d.geometry.coordinates[0][0][0]", "d.geometry.coordinates[0][0][1]", "d.properties.NAME_2");
    //console.log()
}

function clicked(d) {

//console.log(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");
        //return reset();
    }

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) {
    //console.log(completeData);

var dataDraw = completeData.map(function (d) {
        //console.log(d);
        if (d.properties.NAME_1 == activeCountry) {
            dataToDraw.push(d)
        }
    });

//console.log(dataToDraw);
    g.selectAll(".counties")
        .data(dataToDraw)
        .enter()
        .append("path")
        .attr("class", "counties")
        .attr("d", path)
        .on("click", clicked);

bdv.vis().drawTitle(g, dataToDraw);

}
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js