ChrisLuv/ccg-boundaries.json

## ccg-boundaries.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ccg-boundaries.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

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

#states {
  fill: #aaa;
}

#states .active {
  fill: orange;
}

#state-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
#tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
}

#tooltip.hidden {
        display: none;
}

#tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
        line-height: 20px;
}
</style>
<body>
<div id="tooltip" class="hidden">
        <p><strong>CCG Name</strong></p>
        <p><span id="value">100</span></p>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 1160, centered;

var projection = d3.geo.albers()
    .center([0, 52.4])
    .rotate([4.4, 0])
    .parallels([50, 60])
    .scale(1200 * 5)
    .translate([width / 2, height / 2]);


var path = d3.geo.path()
    .projection(projection);

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([height, 38 * height])
    .on("zoom", zoomed);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.append("g")
    .call(zoom);

g.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
  .on("click", clicked);


d3.json("ccg-boundaries.json", function(error, uk) {
  g.append("g")
      .attr("id", "states")
    .selectAll("path")
      .data(topojson.feature(uk, uk.objects.ccg_boundaries).features)
    .enter().append("path")
      .attr("d", path)
      .on("click", clicked)
.on("mouseover", function(d) { d3.select(this).classed("active", true )


var  centroid = path.centroid(d)
var    xPosition = centroid[0]
var    yPosition = centroid[1]


//Update the tooltip position and value
d3.select("#tooltip")
  .style("left", xPosition + "px")
  .style("top", yPosition + "px")
  .select("#value")
  .text(d.properties.ccg_name);

//Show the tooltip
d3.select("#tooltip").classed("hidden", false);

})


.on("mouseout",  function(d) { d3.select(this).classed("active", false)
	//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);})


  g.append("path")
      .datum(topojson.mesh(uk, uk.objects.ccg_boundaries, function(a, b) { return a !== b; }))
      .attr("id", "state-borders")
      .attr("d", path);


	  });


function clicked(d) {

  var x, y, k;

  if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = centroid[0];
    y = centroid[1];
    k = 4;
    centered = d;
  } else {
    x = width / 2;
    y = height / 2;
    k = 1;
    centered = null;
  }

  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });

  g.transition()
      .duration(750)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
         .style("stroke-width", 1.5 / k + "px");
}

function zoomed() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  g.selectAll("path").attr("d", path);
  centered = null;
}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

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

	#states {
	fill: #aaa;
	}

	#states .active {
	fill: orange;
	}

	#state-borders {
	fill: none;
	stroke: #fff;
	stroke-width: 1.5px;
	stroke-linejoin: round;
	stroke-linecap: round;
	pointer-events: none;
	}
	#tooltip {
	position: absolute;
	width: 200px;
	height: auto;
	padding: 10px;
	background-color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	}

	#tooltip.hidden {
	display: none;
	}

	#tooltip p {
	margin: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 20px;
	}
	</style>
	<body>
	<div id="tooltip" class="hidden">
	<p><strong>CCG Name</strong></p>
	<p><span id="value">100</span></p>
	</div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	height = 1160, centered;

	var projection = d3.geo.albers()
	.center([0, 52.4])
	.rotate([4.4, 0])
	.parallels([50, 60])
	.scale(1200 * 5)
	.translate([width / 2, height / 2]);


	var path = d3.geo.path()
	.projection(projection);

	var zoom = d3.behavior.zoom()
	.translate(projection.translate())
	.scale(projection.scale())
	.scaleExtent([height, 38 * height])
	.on("zoom", zoomed);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var g = svg.append("g")
	.call(zoom);

	g.append("rect")
	.attr("class", "background")
	.attr("width", width)
	.attr("height", height)
	.on("click", clicked);


	d3.json("ccg-boundaries.json", function(error, uk) {
	g.append("g")
	.attr("id", "states")
	.selectAll("path")
	.data(topojson.feature(uk, uk.objects.ccg_boundaries).features)
	.enter().append("path")
	.attr("d", path)
	.on("click", clicked)
	.on("mouseover", function(d) { d3.select(this).classed("active", true )



	var centroid = path.centroid(d)
	var xPosition = centroid[0]
	var yPosition = centroid[1]


	//Update the tooltip position and value
	d3.select("#tooltip")
	.style("left", xPosition + "px")
	.style("top", yPosition + "px")
	.select("#value")
	.text(d.properties.ccg_name);

	//Show the tooltip
	d3.select("#tooltip").classed("hidden", false);

	})


	.on("mouseout", function(d) { d3.select(this).classed("active", false)
	//Hide the tooltip
	d3.select("#tooltip").classed("hidden", true);})


	g.append("path")
	.datum(topojson.mesh(uk, uk.objects.ccg_boundaries, function(a, b) { return a !== b; }))
	.attr("id", "state-borders")
	.attr("d", path);


	});



	function clicked(d) {

	var x, y, k;

	if (d && centered !== d) {
	var centroid = path.centroid(d);
	x = centroid[0];
	y = centroid[1];
	k = 4;
	centered = d;
	} else {
	x = width / 2;
	y = height / 2;
	k = 1;
	centered = null;
	}

	g.selectAll("path")
	.classed("active", centered && function(d) { return d === centered; });

	g.transition()
	.duration(750)
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
	.style("stroke-width", 1.5 / k + "px");
	}

	function zoomed() {
	projection.translate(d3.event.translate).scale(d3.event.scale);
	g.selectAll("path").attr("d", path);
	centered = null;
	}

	</script>