D3 Examples - Remote football stadiums (with labels)

Remote football stadiums (with labels)
A Voronoi diagram to show which football stadiums in the UK are in the most remote locations. The projection variable is used to translate longitude and latitude in the data to x,y co-ordinates on the page. For more info read this tutorial
Stadium names have been added as labels. Another version without labels is shown here: /danharr/10989553
Data for stadiums courtesy of http://www.doogal.co.uk/FootballStadiums.php
xxxxxxxxxx
 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Voronoi Experiment</title>
<style type="text/css">
.voronoi {
  fill: #F5F5F0;
  stroke: #000000;
  fill-opacity: 1
  
}
​
​
​
​
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
​
​
    
<script type="text/javascript">
var projection = d3.geo.mercator()
    .center([-1, 54 ])
    .scale(7000)
    .rotate([0,0,0]);
var w = 1000;
var h=1000;
var margin = {left:50,right:50,top:50,bottom:50};
​
​
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
​
​
​
var mydata = [
[51.6306,-0.800299,"Wycombe Wanderers"],
[55.8864,-3.52207,"Livingston"],
[50.8609,-0.08014,"Brighton and Hove Albion"],
[53.4308,-2.96096,"Liverpool"],
[51.44,-2.62021,"Bristol City"],
[53.2535,-1.4272,"Chesterfield"],
[57.5112,-1.79599,"Peterhead"],
[56.1889,-2.99914,"East Fife"],
[52.5655,-1.99053,"Walsall"],
[53.8046,-3.04834,"Blackpool"],
[51.5321,0.039225,"West Ham"],
[53.9695,-1.08833,"York City"],
[57.6518,-3.3209,"Elgin City"],
[53.5551,-2.12847,"Oldham Athletic"],
[53.3703,-1.47083,"Sheffield United"],
[51.5601,-0.012551,"Leyton Orient"],
[52.9884,-2.17542,"Stoke City"],
[51.0996,-0.194579,"Crawley Town"],
[55.9447,-4.0379,"Clyde"],
[54.8955,-2.91365,"Carlisle United"],
[55.9414,-4.72719,"Greenock Morton"],
[51.4729,-3.20413,"Cardiff City"],
[52.6221,1.30912,"Norwich City"],
[55.8497,-4.20561,"Celtic"],
[56.1088,-3.34717,"Coedenbeath"],
[55.8602,-4.01145,"Albion Rovers"],
[51.4749,-0.221619,"Fulham"],
[53.7654,-2.37106,"Accrington Stanley"],
[53.772,-2.68832,"Preston North End"],
[56.4747,-2.97352,"Dundee"],
[55.9384,-4.56162,"Dumbarton"],
[53.5477,-2.65415,"Wigan Athletic"],
[56.0756,-3.44196,"Dunfermline"],
[55.9616,-3.16521,"Hibernian"],
[52.0607,-2.71774,"Hereford United"],
[53.7775,-1.57212,"Leeds United"],
[51.5549,-0.108436,"Arsenal"],
[53.483,-2.20024,"Manchester City"],
[53.7286,-2.48937,"Blackburn Rovers"],
[56.0053,-3.75262,"Falkirk"],
[55.7804,-3.9803,"Motherwell"],
[55.8815,-4.26938,"Partick Thistle"],
[56.1191,-3.91194,"Stirling Albion"],
[50.7964,-1.06389,"Portsmouth"],
[54.9948,-3.2612,"Annan Athletic"],
[56.5523,-2.5914,"Arbroath"],
[53.5805,-2.29487,"Bury"],
[53.5867,-0.695244,"Scunthorpe United"],
[56.7353,-2.6565,"Brechin City"],
[54.0675,-2.84707,"Morecambe"],
[53.4387,-2.96619,"Everton"],
[53.0875,-2.43569,"Crewe Alexandra"],
[51.4882,-0.302621,"Brentford"],
[55.8258,-4.25198,"Scotland, Queen's Park"],
[53.9165,-3.02484,"Fleetwood Town"],
[53.4115,-1.50075,"Sheffield Wednesday"],
[50.3882,-4.15076,"Plymouth Argyle"],
[50.9503,-2.67383,"Yeovil Town"],
[55.8529,-4.30962,"Rangers"],
[51.7164,-1.20775,"Oxford United"],
[53.7465,-0.368009,"Hull City"],
[53.5099,-1.11382,"Doncaster Rovers"],
[52.6203,-1.14217,"Leicester City"],
[51.4051,-0.281984,"AFC Wimbledon, Kingstonian"],
[51.6428,-3.93473,"Swansea City"],
[56.714,-2.45902,"Montrose"],
[51.5093,-0.232204,"Queens Park Rangers"],
[52.5648,-0.240434,"Peterborough United"],
[51.4222,-0.982777,"Reading"],
[56.4099,-3.47684,"St Johnstone"],
[52.9425,-1.13703,"Notts County"],
[51.4862,-2.58315,"Bristol Rovers"],
[51.4782,-3.18281,"Wales"],
[52.5904,-2.13061,"Wolverhampton Wanderers"],
[53.2427,-2.127,"Macclesfield Town"],
[55.8601,-3.95997,"Airdrie United"],
[55.7821,-4.058,"Hamilton Academical"],
[52.6886,-2.74931,"Shrewsbury Town"],
[53.4281,-1.36172,"Rotherham United"],
[53.5524,-1.46756,"Barnsley"],
[56.0282,-3.81449,"Stenhousemuir, East Stirlingshire"],
[53.4631,-2.29139,"Manchester United"],
[55.0703,-3.6246,"Queen of the South"],
[52.8219,-1.62708,"Burton Albion"],
[57.1593,-2.08872,"Aberdeen"],
[50.4764,-3.52382,"Torquay United"],
[52.0544,1.14554,"Ipswich Town"],
[53.3738,-3.03269,"Tranmere Rovers"],
[52.9149,-1.44727,"Derby County"],
[51.3844,0.560367,"Gillingham"],
[51.2484,-0.754869,"Aldershot Town"],
[56.1166,-3.77865,"Alloa Athletic"],
[53.5805,-2.53571,"Bolton Wanderers"],
[52.4481,-1.49563,"Coventry City"],
[54.5781,-1.21776,"Middlesbrough "],
[51.5491,0.701572,"Southend United"],
[55.6046,-4.50846,"Kilmarnock"],
[51.3983,-0.085455,"Crystal Palace"],
[50.7352,-1.83839,"Bournemouth"],
[55.76,-2.01599,"Berwick Rangers"],
[52.2352,-0.933485,"Northampton Town"],
[55.4697,-4.61996,"Ayr United"],
[53.6209,-2.17993,"Rochdale"],
[52.4756,-1.86824,"Birmingham City"],
[54.9756,-1.62179,"Newcastle United"],
[50.7307,-3.52109,"Exeter City"],
[50.9058,-1.39114,"Southampton"],
[55.8529,-4.42879,"St Mirren"],
[54.9146,-1.38837,"Sunderland"],
[52.0096,-0.733507,"MK Dons"],
[54.9022,-5.01249,"Stranraer"],
[51.4816,-0.191034,"Chelsea"],
[56.0999,-3.16851,"Raith Rovers"],
[56.6523,-2.88492,"Forfar Athletic"],
[56.4748,-2.96902,"Dundee United"],
[57.4951,-4.21751,"Inverness Caledonian Thistle"],
[52.9399,-1.13258,"Nottingham Forest"],
[51.5645,-1.77107,"Swindon Town"],
[51.4859,-0.050743,"Millwall"],
[53.6543,-1.76837,"Huddersfield Town"],
[52.509,-1.96418,"West Bromwich Albion"],
[51.8898,-0.193664,"Stevenage Borough"],
[51.4865,0.036757,"Charlton Athletic"],
[53.7888,-2.23018,"Burnley"],
[55.9388,-3.2325,"Heart of Midlothian"],
[51.6464,-0.191789,"Barnet"],
[53.05,-2.1926,"Port Vale"],
[53.8042,-1.75902,"Bradford City"],
[51.6498,-0.401569,"Watford"],
[54.6891,-1.21274,"Hartlepool United"],
[57.5959,-4.41898,"Ross County"],
[51.5478,0.159739,"Dagenham and Redbridge"],
[52.5092,-1.88508,"Aston Villa"],
[51.5559,-0.279543,"England"],
[51.9234,0.897861,"Colchester United"],
[51.9062,-2.06021,"Cheltenham Town"],
[51.6033,-0.065684,"Tottenham Hotspur"]
];
​
​
​
var mydata2=[];
​
for (var i = 0; i < mydata.length; i++) {
  mydata2[i] = projection([mydata[i][1],mydata[i][0]]);;
}
for (var i = 0; i < mydata.length; i++) {
  mydata[i] = [projection([mydata[i][1],mydata[i][0]]),mydata[i][2]];
}
​
​
var voronoi = d3.geom.voronoi(mydata2)
​
var pathFn = function(d) { 
  return "M" + d.join("L") + "Z"; 
}
​
svg.selectAll("path")
.data(voronoi)
.enter()
.append("path")
.attr("d", pathFn)
.classed("voronoi", true)
var groups = svg.selectAll("g")
              .data(mydata)
              .enter()
              .append("g");
​
groups.attr("transform", function(d,i) {return "translate(" + d[0][0] + "," + d[0][1] + ")";});
​
​
var clubs = groups.append("circle")
.attr({
  r: 5,
  fill:"#0066FF",
  opacity:0.8,
  stroke:"black"
})
.append("title")
.text(function(d,i) {return d[1];});
​
var names = groups.append("text")
.text(function(d) { return d[1]})
.style("font-size","9px")
.attr("class","labels")
​
​
// ;
​
​
​
​
​
​
</script>
​
​
​
</body>
</html>
    