| license: gpl-3.0 |
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 and James modifications:
Changes made:
Black and white.
Goals added.
More info here: http://jalapic.github.io/tacticsboard
forked from balders93's block: Tactics board with ball
| 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> |