Skip to content

Instantly share code, notes, and snippets.

@balders93

balders93/.block

Last active November 14, 2020 18:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save balders93/bc36d0af347f32152e07 to your computer and use it in GitHub Desktop.
Save balders93/bc36d0af347f32152e07 to your computer and use it in GitHub Desktop.
Download ZIP
Tactics board with ball
Raw
.block
license: mit
scrolling: yes
border: yes
Raw
README.md
Raw
dots.txt
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
Raw
index.html
<!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:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var holder = d3.select("body") // select the 'body' element
.append("svg") // append an SVG element to the body
.attr("width", 1220)
.attr("height", 820);
// draw a rectangle - pitch
holder.append("rect") // attach a rectangle
.attr("x", 10) // position the left of the rectangle
.attr("y", 10) // position the top of the rectangle
.attr("height", 800) // set the height
.attr("width", 1200) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#fff"); // set the fill colour
// draw a rectangle - halves
holder.append("rect") // attach a rectangle
.attr("x", 10) // position the left of the rectangle
.attr("y", 10) // position the top of the rectangle
.attr("height", 800) // set the height
.attr("width", 600) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "none"); // set the fill colour
// draw a circle - center circle
holder.append("circle") // attach a circle
.attr("cx", 610) // position the x-centre
.attr("cy", 410) // position the y-centre
.attr("r", 91.5) // set the radius
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // 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", 10) // position the left of the rectangle
.attr("y", 190) // position the top of the rectangle
.attr("height", 440) // set the height
.attr("width", 180) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // 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", 1030) // position the left of the rectangle
.attr("y", 190) // position the top of the rectangle
.attr("height", 440) // set the height
.attr("width", 180) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // 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", 10) // position the left of the rectangle
.attr("y", 310) // position the top of the rectangle
.attr("height", 200) // set the height
.attr("width", 60) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // 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", 1150) // position the left of the rectangle
.attr("y", 310) // position the top of the rectangle
.attr("height", 200) // set the height
.attr("width", 60) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // 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", 130) // position the x-centre
.attr("cy", 410) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", "none"); // set the fill colour
// draw a circle - penalty spot 2
holder.append("circle") // attach a circle
.attr("cx", 1090) // position the x-centre
.attr("cy", 410) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", "none"); // set the fill colour
// draw a circle - center spot
holder.append("circle") // attach a circle
.attr("cx", 610) // position the x-centre
.attr("cy", 410) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", "none"); // 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.71) //radians
.endAngle(2.43) //just radians
var arc2 = d3.svg.arc()
.innerRadius(89)
.outerRadius(94)
.startAngle(-0.71) //radians
.endAngle(-2.43) //just radians
holder.append("path")
.attr("d", arc)
.attr("fill", "#001400")
.attr("transform", "translate(130,410)")
holder.append("path")
.attr("d", arc2)
.attr("fill", "#001400")
.attr("transform", "translate(1090,410)");
// Dragging circles
var color = d3.scale.ordinal().range(["maroon", "pink", "white"]);
var color1 = d3.scale.ordinal().range(["mediumturquoise", "red", "black"]);
var size = d3.scale.ordinal().range([16, 16, 12]);
//var color = d3.scale.category10();
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
//d3.csv("dots.txt", dottype, function(error, dots) {
// dot = holder.append("g")
// .attr("class", "dot")
// .selectAll("circle")
// .data(dots)
// .enter().append("circle")
// .attr("r", function(d) { return size(d.team); })
// .attr("cx", function(d) { return d.x; })
// .attr("cy", function(d) { return d.y; })
// .style("fill", function(d) { return color(d.team); })
// .style("stroke", function(d) { return color1(d.team); })
// .style("stroke-width", 3)
// .call(drag);
//});
// functions for above...
function dottype(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this)
//.classed("dragging", true);
;
}
function dragged(d) {
d3.select(this)
.attr("cx", d.x = d3.event.x)
.attr("cy", d.y = d3.event.y)
.style("opacity", .5);
}
function dragended(d) {
d3.select(this)
.style("opacity", 1)
// .classed("dragging", false);
;
}
</script>
</body>
Raw
kits.txt
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