Skip to content

Instantly share code, notes, and snippets.

@soccermatics
Forked from jalapic/README.md
Last active August 16, 2016 09:10
Show Gist options
  • Save soccermatics/ccc85b2e6a784947f9fa6df56ceaf4a4 to your computer and use it in GitHub Desktop.
Save soccermatics/ccc85b2e6a784947f9fa6df56ceaf4a4 to your computer and use it in GitHub Desktop.
Tactics board, freehand draw
license: gpl-3.0
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:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var scl=3/4
var wdth = 1050*scl;
var hgt = 680*scl;
var holder = d3.select("body") // select the 'body' element
.append("svg") // append an SVG element to the body
.attr("width", wdth+60*scl)
.attr("height", hgt)
; //
// draw a rectangle - pitch
holder.append("rect") // attach a rectangle
.attr("x", 0+30*scl) // position the left of the rectangle
.attr("y", 0) // position the top of the rectangle
.attr("height", hgt) // set the height
.attr("width", wdth) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#FFFFFF"); // set the fill colour
// draw a rectangle - halves
holder.append("rect") // attach a rectangle
.attr("x", 0+30*scl) // position the left of the rectangle
.attr("y", 0) // position the top of the rectangle
.attr("height", hgt) // set the height
.attr("width", wdth/2) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#FFFFFF"); // set the fill colour
// draw a circle - center circle
holder.append("circle") // attach a circle
.attr("cx", wdth/2+30*scl) // position the x-centre
.attr("cy", hgt/2) // position the y-centre
.attr("r", 91.5*scl) // 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+30*scl) // position the left of the rectangle
.attr("y", 138.5*scl) // position the top of the rectangle
.attr("height", 403*scl) // set the height
.attr("width", 165*scl) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#FFFFFF"); // set the fill colour
// draw a rectangle - penalty area 2
holder.append("rect") // attach a rectangle
.attr("x", (885+30)*scl) // position the left of the rectangle
.attr("y", 138.5*scl) // position the top of the rectangle
.attr("height", 403*scl) // set the height
.attr("width", 165*scl) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#FFFFFF"); // set the fill colour
// draw a rectangle - six yard box 1
holder.append("rect") // attach a rectangle
.attr("x", 0+30*scl) // position the left of the rectangle
.attr("y", 248.5*scl) // position the top of the rectangle
.attr("height", 183*scl) // set the height
.attr("width", 55*scl) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#FFFFFF"); // set the fill colour
// draw a rectangle - six yard box 2
holder.append("rect") // attach a rectangle
.attr("x", (995+30)*scl) // position the left of the rectangle
.attr("y", 248.5*scl) // position the top of the rectangle
.attr("height", 183*scl) // set the height
.attr("width", 55*scl) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#FFFFFF"); // set the fill colour
// draw a rectangle - goal 1
holder.append("rect") // attach a rectangle
.attr("x", (-24+30)*scl) // position the left of the rectangle
.attr("y", (248.5+55)*scl) // position the top of the rectangle
.attr("height", 73.22*scl) // set the height
.attr("width", 24*scl) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#FFFFFF"); // set the fill colour
// draw a rectangle - goal 2
holder.append("rect") // attach a rectangle
.attr("x", (30+1050)*scl) // position the left of the rectangle
.attr("y", (248.5+55)*scl) // position the top of the rectangle
.attr("height", 73.22*scl) // set the height
.attr("width", 24*scl) // set the width
.style("stroke-width", 5) // set the stroke width
.style("stroke", "#001400") // set the line colour
.style("fill", "#FFFFFF"); // set the fill colour
// draw a circle - penalty spot 1
holder.append("circle") // attach a circle
.attr("cx", (110+30)*scl) // position the x-centre
.attr("cy", 340*scl) // 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+30)*scl) // position the x-centre
.attr("cy", 340*scl) // 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+30)*scl) // position the x-centre
.attr("cy", 340*scl) // 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*scl)
.outerRadius(94*scl)
.startAngle(0.64) //radians
.endAngle(2.5) //just radians
//I DIDNT KNOW HOW TO DO THE TRANSLATION TO SCALE!!!?!!
var arc2 = d3.svg.arc()
.innerRadius(89*scl)
.outerRadius(94*scl)
.startAngle(-0.64) //radians
.endAngle(-2.5) //just radians
holder.append("path")
.attr("d", arc)
.attr("fill", "#001400")
.attr("transform", "translate(105,255)")
holder.append("path")
.attr("d", arc2)
.attr("fill", "#001400")
.attr("transform", "translate(727.5,255)");
// Dragging players
var color = d3.scale.ordinal().range(["darkgrey", "white", "black"]);
var color1 = d3.scale.ordinal().range(["black", "black", "black"]);
var size = d3.scale.ordinal().range([16, 16, 8]);
//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*scl; })
.attr("cy", function(d) { return d.y*scl; })
.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*scl)
.attr("cy", d.y = d3.event.y*scl)
.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