Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/README.md

Last active February 14, 2021 12:20
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jalapic/7d15b6ea45e5b37c20c4 to your computer and use it in GitHub Desktop.
Save jalapic/7d15b6ea45e5b37c20c4 to your computer and use it in GitHub Desktop.
Download ZIP
Tactics board, freehand draw
Raw
README.md

Built with blockbuilder.org

A draggable tactics board for soccer (Think Andy Townsend circa late 1990s).

forked from jalapic's block: James' tactics board

Adding to Ian Baldwin's modifications:

Changes made:

  1. Football added

  2. Dimensions metricised and changed to the premier league standard 68m x 105m pitch

  3. JC added - crude quick way of drawing over pitch with lines - this version has freehand draw.

More info here: http://jalapic.github.io/tacticsboard

forked from balders93's block: Tactics board with ball

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", 1050)
.attr("height", 680)
; //
// draw a rectangle - pitch
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", 680) // set the height
.attr("width", 1050) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#80B280"); // set the fill colour
// draw a rectangle - halves
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", 680) // set the height
.attr("width", 525) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#80B280"); // set the fill colour
// draw a circle - center circle
holder.append("circle") // attach a circle
.attr("cx", 525) // position the x-centre
.attr("cy", 340) // 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", 0) // position the left of the rectangle
.attr("y", 138.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", "#001400") // set the line colour
.style("fill", "#80B280"); // set the fill colour
// draw a rectangle - penalty area 2
holder.append("rect") // attach a rectangle
.attr("x", 885) // position the left of the rectangle
.attr("y", 138.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", "#001400") // set the line colour
.style("fill", "#80B280"); // set the fill colour
// draw a rectangle - six yard box 1
holder.append("rect") // attach a rectangle
.attr("x", 0) // position the left of the rectangle
.attr("y", 248.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", "#001400") // set the line colour
.style("fill", "#80B280"); // set the fill colour
// draw a rectangle - six yard box 2
holder.append("rect") // attach a rectangle
.attr("x", 995) // position the left of the rectangle
.attr("y", 248.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", "#001400") // set the line colour
.style("fill", "#80B280"); // set the fill colour
// draw a circle - penalty spot 1
holder.append("circle") // attach a circle
.attr("cx", 110) // position the x-centre
.attr("cy", 340) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", "#001400"); // set the fill colour
// draw a circle - penalty spot 2
holder.append("circle") // attach a circle
.attr("cx", 940) // position the x-centre
.attr("cy", 340) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", "#001400"); // set the fill colour
// draw a circle - center spot
holder.append("circle") // attach a circle
.attr("cx", 525) // position the x-centre
.attr("cy", 340) // position the y-centre
.attr("r", 5) // set the radius
.style("fill", "#001400"); // 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", "#001400")
.attr("transform", "translate(110,340)")
holder.append("path")
.attr("d", arc2)
.attr("fill", "#001400")
.attr("transform", "translate(940,340)");
// 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);
;
}
// This allows freehand drawing with mouse
var line = d3.svg.line()
.interpolate("basis")
;
var drawObj = {
isDown: false,
dataPoints: [],
currentPath: null,
}
holder.on("mousedown", function(){
drawObj.isDown = true;
});
holder.on("mousemove", function(){
if (drawObj.isDown){
drawObj.dataPoints.push(
[d3.event.x, d3.event.y]
);
if (!drawObj.currentPath){
drawObj.currentPath = holder.append("path")
.attr("class","currentPath")
.style("stroke-width", 4)
.style("stroke", "white")
.style("fill", "none");
}
drawObj.currentPath
.datum(drawObj.dataPoints)
.attr("d", line);
}
});
holder.on("mouseup", function(){
drawObj.isDown = false;
drawObj.currentPath.attr("class","oldPath");
drawObj.dataPoints = [];
drawObj.currentPath = null;
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment