Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/README.md

Last active January 2, 2016 17:01
Show Gist options
  • Save jalapic/1aae1976de7900c74dc9 to your computer and use it in GitHub Desktop.
Save jalapic/1aae1976de7900c74dc9 to your computer and use it in GitHub Desktop.
Download ZIP
Tactics board, line 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

forked from jalapic's block: Tactics board, freehand draw

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% }
line {
stroke: blue;
stroke-width: 7px;
stroke-linecap: round;
}
</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)
.on("mousedown", mousedown)
.on("mouseup", mouseup);
var line; // for line drawing
// 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 drawing lines with mouse
function mousedown() {
var m = d3.mouse(this);
line = holder.append("line")
.attr("x1", m[0])
.attr("y1", m[1])
.attr("x2", m[0])
.attr("y2", m[1]);
holder.on("mousemove", mousemove);
}
function mousemove() {
var m = d3.mouse(this);
line.attr("x2", m[0])
.attr("y2", m[1]);
}
function mouseup() {
holder.on("mousemove", null);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment