Saminu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>
	<!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>