Skip to content

Instantly share code, notes, and snippets.

@balders93
Last active March 19, 2017 23:51
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save balders93/98ff5f77b82eea28f47c72e1e256286d to your computer and use it in GitHub Desktop.
Football Pitch
license: mit
x,y,team,player
47,340,A,1
321,287,A,6
328,360,A,4
431,75,A,23
420,544,A,7
478,320,A,15
488,245,A,8
513,422,A,24
672,517,A,11
767,340,A,39
719,102,A,40
1029,343,B,1
802,290,B,2
796,363,B,3
761,78,B,4
704,547,B,5
599,314,B,6
588,239,B,7
548,416,B,8
466,511,B,9
362,335,B,10
473,102,B,11
525,272,C,1
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:10;position:fixed;top:0;right:0;bottom:0;left:50; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var linecolour = "#ffffff"
var fillcolour = "#A1C349"
var holder = d3.select("body") // select the 'body' element
.append("svg") // append an SVG element to the body
.attr("width", 1150)
.attr("height", 780);
// Total Grass
holder.append("rect") // attach a rectangle
.attr("x", 0) // position the left of the rectangle
.attr("y", 0) // position the top of the rectangle
.attr("height", 780) // set the height
.attr("width", 1150) // set the width
.style("fill", fillcolour); // set the fill colour
// draw a rectangle pitch outline
holder.append("rect") // attach a rectangle
.attr("x", 50) // position the left of the rectangle
.attr("y", 50) // position the top of the rectangle
.attr("height", 680) // set the height
.attr("width", 1050) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", fillcolour); // set the fill colour
// draw a rectangle - half 1
holder.append("rect") // attach a rectangle
.attr("x", 50) // position the left of the rectangle
.attr("y", 50) // position the top of the rectangle
.attr("height", 680) // set the height
.attr("width", 525) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a rectangle - half 2
holder.append("rect") // attach a rectangle
.attr("x", 575) // position the left of the rectangle
.attr("y", 50) // position the top of the rectangle
.attr("height", 680) // set the height
.attr("width", 525) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a circle - center circle
holder.append("circle") // attach a circle
.attr("cx", 575) // position the x-centre
.attr("cy", 390) // position the y-centre
.attr("r", 91.5) // set the radius
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a rectangle - penalty area 1
holder.append("rect") // attach a rectangle
.attr("x", 50) // position the left of the rectangle
.attr("y", 188.5) // position the top of the rectangle
.attr("height", 403) // set the height
.attr("width", 165) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a rectangle - penalty area 2
holder.append("rect") // attach a rectangle
.attr("x", 935) // position the left of the rectangle
.attr("y", 188.5) // position the top of the rectangle
.attr("height", 403) // set the height
.attr("width", 165) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a rectangle - six yard box 1
holder.append("rect") // attach a rectangle
.attr("x", 50) // position the left of the rectangle
.attr("y", 298.5) // position the top of the rectangle
.attr("height", 183) // set the height
.attr("width", 55) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a rectangle - six yard box 2
holder.append("rect") // attach a rectangle
.attr("x", 1045) // position the left of the rectangle
.attr("y", 298.5) // position the top of the rectangle
.attr("height", 183) // set the height
.attr("width", 55) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a rectangle - goalmouth 1
holder.append("rect") // attach a rectangle
.attr("x", 25) // position the left of the rectangle
.attr("y", 353.4) // position the top of the rectangle
.attr("height", 73.2) // set the height
.attr("width", 25) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a rectangle - goalmouth 2
holder.append("rect") // attach a rectangle
.attr("x", 1100) // position the left of the rectangle
.attr("y", 353.4) // position the top of the rectangle
.attr("height", 73.2) // set the height
.attr("width", 25) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", linecolour) // set the line colour
.style("fill", "none"); // set the fill colour
// draw a circle - penalty spot 1
holder.append("circle") // attach a circle
.attr("cx", 160) // position the x-centre
.attr("cy", 390) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", linecolour); // set the fill colour
// draw a circle - penalty spot 2
holder.append("circle") // attach a circle
.attr("cx", 990) // position the x-centre
.attr("cy", 390) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", linecolour); // set the fill colour
// draw a circle - center spot
holder.append("circle") // attach a circle
.attr("cx", 575) // position the x-centre
.attr("cy", 390) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", linecolour); // set the fill colour
// penalty box semi-circle 1
var vis = d3.select("body").append("svg")
var pi = Math.PI;
var arc = d3.svg.arc()
.innerRadius(89)
.outerRadius(94)
.startAngle(0.64) //radians
.endAngle(2.5) //just radians
var arc2 = d3.svg.arc()
.innerRadius(89)
.outerRadius(94)
.startAngle(-0.64) //radians
.endAngle(-2.5) //just radians
holder.append("path")
.attr("d", arc)
.attr("fill", linecolour)
.attr("transform", "translate(160,390)")
holder.append("path")
.attr("d", arc2)
.attr("fill", linecolour)
.attr("transform", "translate(990,390)");
</script>
</body>
TeamID,Team-Name,Home-Colour,Home-Accent,Away-Colour,Away-Accent
0,Ball,White,Black,Orange,Orange
1,Arsenal,Red,White,GoldenRod,MidnightBlue
2,Aston Villa,Maroon,LightSkyBlue,Yellow,Black
3,Bournemouth,Black,Crimson,White,GoldenRod
4,Chelsea,RoyalBlue,White,White,RoyalBlue
5,Crystal Palace,Maroon,RoyalBlue,White,Maroon
6,Everton,DarkBlue,White,White,LightSlateGray
7,Leicester,DarkBlue,White,Black,White
8,Liverpool,Crimson,Crimson,White,Crimson
9,Manchester City,LightSkyBlue,White,#1D1F30,LightSkyBlue
10,Manchester United,Crimson,White,White,Black
11,Newcastle ,Black,White,GhostWhite,DodgerBlue
12,Norwich City,Yellow,SeaGreen,SeaGreen,Yellow
13,Southampton,Red,White,LightGreen,#1D1F30
14,Stoke City,Red,White,Black,ForestGreen
15,Sunderland,Crimson,White,ForestGreen,GreenYellow
16,Swansea City,White,Tan,MidnightBlue,LawnGreen
17,Tottenham,White,MidnightBlue,DodgerBlue,MidnightBlue
18,Watford,Yellow,Black,Black,Yellow
19,West Brom,White,MidnightBlue,FireBrick,Black
20,West Ham United,DarkRed,PaleTurquoise,PaleTurquoise,Maroon
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment