Skip to content

Instantly share code, notes, and snippets.

@codingforpleasure

codingforpleasure/.block

Created February 18, 2019 12:09
Show Gist options
  • Save codingforpleasure/52209481d4686f2d82443b79246a0ab8 to your computer and use it in GitHub Desktop.
Save codingforpleasure/52209481d4686f2d82443b79246a0ab8 to your computer and use it in GitHub Desktop.
Download ZIP
Cricket grounds
Raw
.block
license: mit
height: 610
Raw
README.md
Raw
data.csv
ground ground_long country height width area rounded_rect batting_record_name batting_record_country batting_record_against batting_record_score batting_record_date bowling_record_name bowling_record_country bowling_record_against bowling_record_figures bowling_record_date odi_only measurement_url notes
Sher-e-Bangla Sher-e-Bangla National Cricket Stadium Ban 189.7 138.65 82629.87152 0 Azhar Ali PAK BAN 226 May-15 Taijul Islam BAN ZIM 8 for 39 Oct-14 0 https://maps.google.com
MCG Melbourne Cricket Ground Aus 147.8 172.9 80282.20646 0 Robert Cowper AUS ENG 307 Feb-66 Sarfraz Nawaz PAK AUS 9 for 86 Mar-79 0 http://www.espncricinfo.com/ci/content/ground/56441.html
The Gabba Brisbane Cricket Ground Aus 150 167 78696.89597 0 Michael Clarke AUS SA 259* Nov-12 Richard Hadlee NZ AUS 9 for 52 Nov-85 0 https://maps.google.com
Galle International Galle International Stadium SL 163.7 148.7 76473.24528 0 Chris Gayle WI SL 333 Nov-10 Muttiah Muralitharan SL ENG 7 for 46 Dec-03 0 https://maps.google.com
SCG Sydney Cricket Ground Aus 156 154 75473.62191 0 Michael Clarke AUS IND 329* Jan-12 George Lohmann ENG AUS 8 for 35 Feb 1887 0 http://www.espncricinfo.com/ci/content/ground/56544.html
Riverside Ground Riverside Ground UK 149.83 158.4 74559.64464 0 Ian Bell ENG BAN 162* Jun-05 Ryan Harris AUS ENG 7 for 117 Aug-13 0 https://maps.google.com Weird shape (octagonal)
Pallekele Pallekele International Cricket Stadium SL 162.2 146.1 74447.64058 0 Kusal Mendis SL AUS 176 Jul-16 Rangana Herath SL AUS 5 for 54 Jul-16 0 https://maps.google.com
SSC Sinhalese Sports Club Ground SL 153.2 154.5 74359.61315 0 Mahela Jayawardene SL SA 374 Jul-06 Rangana Herath SL PAK 9 for 127 Aug-14 0 https://maps.google.com Mostly circular
Green Park Stadium Green Park Stadium Ind 165 139.9 72518.95402 0 Sheik Bacchus WI IND 250 Feb-79 Jasubhai Patel IND AUS 9 for 69 Dec-59 0 https://maps.google.com
Bellerive Oval Bellerive Oval Aus 174.5 131.4 72034.52043 0 Adam Voges AUS WI 269* Dec-15 Shane Warne AUS NZ 6 for 31 Nov-93 0 https://maps.google.com
Harare Sports Club Harare Sports Club Zim 145 155.35 70766.73072 0 Gary Kirsten SA ZIM 220 Sep-01 Rangana Herath SL ZIM 8 for 63 Nov-16 0 https://maps.google.com
Cobham Oval Cobham Oval NZ 148 152 70673.26834 0 Rob Nicol NZ ZIM 146 Feb-12 Jacob Oram NZ ZIM 3 for 29 Feb-12 1 https://maps.google.com
Mohali Stadium Punjab Cricket Association IS Bindra Stadium Ind 144.7 153.8 69915.70468 0 Shikhar Dawan IND AUS 187 Mar-13 Dion Nash NZ IND 6 for 27 Oct-99 0 https://maps.google.com
Hagley Oval Hagley Oval NZ 149 149 69746.4985 0 Brendon McCullum NZ SL 195 Dec-14 Colin de Grandhomme NZ PAK 6 for 41 Nov-16 0 https://en.wikipedia.org/wiki/Hagley_Oval#Ground_specifications
Basin Reserve Basin Reserve NZ 148.1 146.8 68301.61721 0 Brendon McCullum NZ IND 302 Feb-14 Richard Hadlee NZ IND 7 for 23 Feb-76 0 https://maps.google.com
Queen's Park Oval Queen's Park Oval WI 144.2 149.8 67862.04557 0 Sunil Gavaskar IND WI 220 Apr-71 Jack Noriega WI IND 9 for 95 Mar-71 0 https://maps.google.com
Old Trafford Old Trafford Cricket Ground UK 144.6 147.1 66823.74919 1 Robert Simpson AUS ENG 311 Jul-64 James Laker ENG AUS 10 for 53 Jul-56 0 https://maps.google.com Looks more like a rounded rectangle...
M A Chidambaram M A Chidambaram Stadium Ind 145.4 146 66690.98549 0 Virender Sehwag IND SA 319 Mar-08 Mulvantrai Mankad IND ENG 8 for 55 Feb-52 0 https://maps.google.com
Trent Bridge Trent Bridge UK 146.3 144.74 66524.67586 1 Denis Compton ENG PAK 278 Jul-54 Stuart Broad ENG AUS 8 for 15 Aug-15 0 https://maps.google.com Weird shape
Edgbaston Edgbaston Cricket Ground UK 147.34 143.65 66493.03688 0 Alastair Cook ENG IND 294 Aug-11 Wilfred Rhodes ENG AUS 7 for 17 May-02 0 https://maps.google.com
Adelaide Oval Adelaide Oval Aus 166.1 127.1 66323.1364 0 Don Bradman AUS SA 299* Jan-32 Albert Trott AUS ENG 8 for 43 Jan 1895 0 https://maps.google.com
Queens Sports Club Queens Sports Club Zim 149.6 139.3 65468.52895 0 Kumar Sangakkara SL ZIM 270 May-04 Paul Strang ZIM NZ 8 for 109 Sep-00 0 https://maps.google.com
Bay Oval Bay Oval NZ 144 144 65144.06526 0 Hashim Amla SA NZ 119 Oct-14 Matt Henry NZ SL 5 for 40 Jan-16 1 https://maps.google.com
The WACA Western Australia Cricket Association Ground Aus 149 139 65065.52545 0 Matthew Hayden AUS ZIM 380 Oct-03 Glenn McGrath AUS PAK 8 for 24 Dec-04 0 http://www.espncricinfo.com/ci/content/ground/56490.html
Lord's Lord's Cricket Ground UK 157.6 130.5 64612.50779 1 Graham Gooch ENG IND 333 Jul-90 Ian Botham ENG PAK 8 for 34 Jun-78 0 https://maps.google.com Looks more like a rounded rectangle...
McLean Park McLean Park NZ 163 125 64009.95032 0 Jesse Ryder NZ IND 201 Mar-09 Ryan Sidebottom ENG NZ 7 for 47 Mar-08 0 https://maps.google.com
The Oval The Oval, London (Kennington) UK 138 145 62863.269 0 Leonard Hutton ENG AUS 364 Aug-38 Devon Malcolm ENG SA 9 for 57 Aug-94 0 https://maps.google.com
Saxton Oval Saxton Oval NZ 141 141 62458.00355 0 Kyle Coetzer SCO BAN 156 Mar-15 Kane Williamson NZ BAN 3 for 22 Dec-16 1 https://maps.google.com
Wankhede Stadium Wankhede Stadium Ind 141.7 138.8 61788.71865 0 Clive Lloyd WI IND 242* Jan-75 Ian Botham ENG IND 7 for 48 Feb-80 0 https://maps.google.com
Wanderers New Wanderers Stadium SA 154.2 127.3 61668.39565 0 Greg Blewett AUS SA 214 Feb-97 Hugh Tayfield SA ENG 9 for 113 Feb-57 0 https://maps.google.com
Headingley Headingley Cricket Ground UK 136.41 142.3 60981.90425 1 Don Bradman AUS ENG 334 Jul-30 Bob Willis ENG AUS 8 for 43 Jul-81 0 https://maps.google.com Weird shape (cut off at the bottom)
Eden Gardens Eden Gardens Ind 141 136.5 60464.66301 0 VVS Laxman IND AUS 281 Mar-01 Lance Klusener SA IND 8 for 64 Nov-96 0 https://maps.google.com
Westpac Stadium Westpac Stadium NZ 155.3 123.5 60254.33338 0 Martin Guptill NZ WI 237* Mar-15 Tim Southee NZ ENG 7 for 33 Feb-15 1 http://westpacstadium.co.nz/about-us/stadium-facts/ Calculated as (65.7m + 57.8m) for width and (77.3m + 78m) for height
Kensington Oval Kensington Oval WI 136.8 140 60167.7825 0 Hanif Mohammed PAK WI 337 Jan-58 Lance Gibbs WI IND 8 for 38 Mar-62 0 https://maps.google.com
ZAC Stadium Zohur Ahmed Chowdhury Stadium Ban 141.55 131.8 58610.46361 0 Kumar Sangakkara SL BAN 319 Feb-14 Shakib Al Hasan BAN NZ 7 for 36 Oct-08 0 https://maps.google.com
Centurion Park Centurion Park (also SuperSport Park) SA 147.16 126.5 58483.07203 0 Hashim Amla SA WI 208 Dec-14 Kyle Abbott SA PAK 7 for 29 Feb-13 0 https://maps.google.com
St George's Park St George's Park Cricket Ground SA 139.8 131.6 57798.01633 1 Herschelle Gibbs SA IND 196 Nov-01 George Lohmann ENG SA 8 for 7 Feb 1896 0 https://maps.google.com Looks more like a rounded rectangle...
Feroz Shah Kotla Feroz Shah Kotla Ground Ind 135.65 132.7 56551.03967 0 Bert Sutcliffe NZ IND 230* Dec-55 Anil Kumble IND PAK 10 for 74 Feb-99 0 https://maps.google.com
Sabina Park Sabina Park WI 129.8 137 55865.68552 0 Gary Sobers WI PAK 365* Feb-58 Stephen Harmison ENG WI 7 for 12 Mar-04 0 https://maps.google.com Mostly circular (some straight edges)
Newlands Park Newlands Cricket Ground SA 134.4 132.3 55861.03596 1 Stephen Fleming NZ SA 262 Apr-06 John Briggs ENG SA 8 for 11 Mar 1889 0 https://maps.google.com Looks more like a rounded rectangle...
M. Chinnaswamy M. Chinnaswamy Stadium Ind 133.7 131.8 55360.0776 0 Younis Khan PAK IND 267 Mar-05 Nathan Lyon AUS IND 8 for 50 Mar-17 0 https://maps.google.com
Seddon Park Seddon Park NZ 128.73 135.94 54976.4772 0 Stephen Fleming NZ PAK 192 Dec-03 Chris Cairns NZ WI 7 for 27 Dec-99 0 https://maps.google.com
Kingsmead Kingsmead Cricket Ground SA 142.3 122 54539.93342 0 Gary Kirsten SA ENG 275 Dec-99 Hugh Tayfield SA ENG 8 for 69 Jan-57 0 https://maps.google.com
Colombo Oval Paikiasothy Saravanamuttu Stadium SL 127.74 133.9 53735.0134 1 Brendon Kuruppu SL NZ 201* Apr-87 Richard Hadlee NZ SL 5 for 29 Mar-84 0 https://maps.google.com Weird shape
University Oval University Oval NZ 118.7 131.5 49037.27681 0 Darren Bravo WI NZ 218 Dec-13 Daniel Vettori NZ WI 6 for 56 Dec-08 0 https://maps.google.com
Eden Park Eden Park NZ 136.6 108 46347.2881 1 Wally Hammond ENG NZ 336* Mar-33 Erapally Prasanna IND NZ 8 for 76 Jan-76 0 https://maps.google.com Looks more like a rounded rectangle...
Raw
index.html
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
<style>
body {
font-family: 'Catamaran', sans-serif;
margin: 15px;
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
}
ellipse {
stroke: black;
fill: darkolivegreen;
}
line {
stroke: darkgray;
}
.pitch {
fill: beige;
}
.default-ground {
fill-opacity: 0.1;
stroke-opacity: 0.1;
}
.highlighted-ground {
fill-opacity: 1;
stroke-opacity: 1;
}
.muted-ground {
fill-opacity: 0;
stroke-opacity: 0.1;
}
</style>
</head>
<body>
<h1>Cricket grounds of the world</h1>
<p><i>The following visualisation is based on the work and data collected by <a href="https://github.com/conrad-mac/d3/tree/master/cricket-grounds">Conrad MacCormick</a></i>.
<div id="chart-options">
<p>Cricket ground:
<select id="select-cricket-ground">
</select>
<p>Highlight:
<select id="select-highlights">
<option value="None"></option>
<option value="Sher-e-Bangla">Longest</option>
<option value="University Oval">Shortest</option>
<option value="MCG">Widest</option>
<option value="Eden Park">Narrowest</option>
<option value="Sher-e-Bangla">Largest area</option>
<option value="Eden Park">Smallest area</option>
</select>
</div>
<div id="chart"></div>
<script>
var groundData;
const chartWidth = 300;
var chartHeight;
var xAxis, yAxis;
var ryScale = d3.scaleLinear();
var rxScale = d3.scaleLinear().range([0, chartWidth / 2]);
const margin = { "top": 50, "bottom": 10, "left": 250, "right": 10, };
const pitchLength = 20.12; //m (22 yards) long
const pitchWidth = 3.05; //m
const barExtent = 3;
let selectGround = d3.select("#select-cricket-ground");
let selectHighlights = d3.select("#select-highlights");
d3.csv("data.csv", convertTextToNumbers, function (error, data) {
groundData = data;
let cricketGroundNames = [];
data.forEach(function (d) { cricketGroundNames.push(d.ground); });
cricketGroundNames.sort();
selectGround.selectAll("option")
.data(cricketGroundNames)
.enter()
.append("option")
.attr("value", function (d) { return d; })
.text(function (d) { return d; });
selectGround.on("change", function (d) {
var selectedGround = d3.select(this).property("value");
selectHighlights.property("value", "None");
highlightGround(selectedGround);
});
selectHighlights.on("change", function (d) {
var selectedGround = d3.select(this).property("value");
if (selectedGround != "None") {
selectGround.property("value", selectedGround);
highlightGround(selectedGround);
};
});
const maxRX = d3.max(data, function (d) { return d.rx; });
const maxRY = d3.max(data, function (d) { return d.ry; });
const ratio = maxRX / maxRY;
chartHeight = chartWidth / ratio;
rxScale.domain([0, maxRX]);
ryScale.domain([0, maxRY])
.range([0, chartHeight / 2]);
let svg = d3.select("#chart")
.append("svg")
.attr("width", chartWidth + margin.left + margin.right)
.attr("height", chartHeight + margin.top + margin.bottom);
let g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let cricketGrounds = g.selectAll(".cricket-ground")
.data(data)
.enter()
.append("g")
.attr("class", "cricket-ground")
.attr("transform", "translate(" + chartWidth / 2 + "," + chartHeight / 2 + ")");
cricketGrounds.append("ellipse")
.attr("class", "default-ground")
.attr("rx", function (d) { return rxScale(d.rx); })
.attr("ry", function (d) { return ryScale(d.ry); });
g.append("g")
.attr("transform", "translate(" + chartWidth / 2 + "," + chartHeight / 2 + ")")
.append("ellipse")
.attr("id", "highlight-ground")
.attr("rx", rxScale(maxRX))
.attr("ry", ryScale(maxRY))
.style("opacity", 0);
g.append("g").append("rect")
.attr("x", (chartWidth / 2) - ((rxScale(pitchWidth)) / 2))
.attr("y", (chartHeight / 2) - ((ryScale(pitchLength)) / 2))
.attr("width", rxScale(pitchWidth))
.attr("height", ryScale(pitchLength))
.attr("class", "pitch")
xAxis = svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + margin.left + "," + (margin.top / 2) + ")")
xAxis.append("line")
.attr("id", "x-end-1")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", -barExtent)
.attr("y2", barExtent)
xAxis.append("line")
.attr("id", "x-end-2")
.attr("y1", -barExtent)
.attr("y2", barExtent)
.attr("x1", chartWidth)
.attr("x2", chartWidth)
xAxis.append("line")
.attr("id", "x-axis-line")
.attr("x1", 0)
.attr("x2", chartWidth)
.attr("y1", 0)
.attr("y2", 0);
xAxis.append("text")
.attr("class", "x-axis-label")
.text("Max width: " + d3.max(data, function (d) { return d.width; }) + "m")
.attr("x", chartWidth / 2)
.attr("y", -3)
.style("text-anchor", "middle")
yAxis = svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + (margin.left - 20) + "," + (margin.top) + ")")
yAxis.append("line")
.attr("id", "y-end-1")
.attr("x1", barExtent)
.attr("x2", barExtent)
.attr("y1", 0)
.attr("y2", 0)
yAxis.append("line")
.attr("id", "y-end-2")
.attr("x1", -barExtent)
.attr("x2", barExtent)
.attr("y1", chartHeight)
.attr("y2", chartHeight)
yAxis.append("line")
.attr("id", "y-axis-line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", 0)
.attr("y2", chartHeight);
yAxis.append("text")
.attr("class", "y-axis-label-a")
.text("Max height:")
.attr("x", -3)
.attr("y", chartHeight / 2 - 8)
.style("text-anchor", "end")
yAxis.append("text")
.attr("class", "y-axis-label-b")
.text(d3.max(data, function (d) { return d.height; }) + "m")
.attr("x", -3)
.attr("y", chartHeight / 2 + 8)
.style("text-anchor", "end")
});
function highlightGround(selectedGround) {
d3.selectAll(".default-ground")
.attr("class", "muted-ground");
/*d3.selectAll("ellipse")
.attr("class", function (d) {
return d.ground == selectedGround
? "highlighted-ground"
: "muted-ground";
});*/
let selectedGroundObject = searchGround(groundData, selectedGround);
let t = d3.transition()
.duration(500)
.ease(d3.easeLinear);
d3.select("#highlight-ground")
.transition(t)
.style("opacity", 0.9)
.attr("rx", rxScale(selectedGroundObject.rx))
.attr("ry", ryScale(selectedGroundObject.ry));
xAxis.select(".x-axis-label")
.text(selectedGround + "'s width: " + selectedGroundObject.width + "m");
yAxis.select(".y-axis-label-a")
.text(selectedGround + "'s length:");
yAxis.select(".y-axis-label-b")
.text(selectedGroundObject.height + "m");
let yTop = (chartHeight - ryScale(selectedGroundObject.height))/2;
let yBottom = ryScale(selectedGroundObject.height) + yTop;
yAxis.select("#y-axis-line")
.transition(t)
.attr("y1", yTop)
.attr("y2", yBottom);
yAxis.select("#y-end-1")
.transition(t)
.attr("y1", yTop)
.attr("y2", yTop);
yAxis.select("#y-end-2")
.transition(t)
.attr("y1", yBottom)
.attr("y2", yBottom);
let xLeft = ((chartWidth - rxScale(selectedGroundObject.width))/2);
let xRight = rxScale(selectedGroundObject.width) + xLeft;
xAxis.select("#x-axis-line")
.transition(t)
.attr("x1", xLeft)
.attr("x2", xRight);
xAxis.select("#x-end-1")
.transition(t)
.attr("x1", xLeft)
.attr("x2", xLeft);
xAxis.select("#x-end-2")
.transition(t)
.attr("x1", xRight)
.attr("x2", xRight);
};
function searchGround(data, ground) {
for (var i = 0; i < data.length; i++) {
if (data[i].ground === ground) {
return data[i];
};
};
};
function convertTextToNumbers(d) {
d.height = +d.height;
d.width = +d.width;
d.ry = d.height / 2;
d.rx = d.width / 2;
return d;
};
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment