Built with blockbuilder.org
A draggable tactics board for soccer (Think Andy Townsend circa late 1990s).
More info here: http://jalapic.github.io/tacticsboard
Last active
August 16, 2016 07:41
-
-
Save jalapic/df90b219b9443e457e0d to your computer and use it in GitHub Desktop.
James' tactics board
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| x,y,team,player | |
| 45,250,A,1 | |
| 306,211,A,6 | |
| 312,265,A,4 | |
| 410,55,A,23 | |
| 400,400,A,7 | |
| 455,235,A,15 | |
| 465,180,A,8 | |
| 489,310,A,24 | |
| 640,380,A,11 | |
| 730,250,A,39 | |
| 685,75,A,40 | |
| 980,252,B,1 | |
| 764,213,B,2 | |
| 758,267,B,3 | |
| 725,57,B,4 | |
| 670,402,B,5 | |
| 570,231,B,6 | |
| 560,176,B,7 | |
| 522,306,B,8 | |
| 444,376,B,9 | |
| 345,246,B,10 | |
| 450,75,B,11 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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", 1200) | |
| .attr("height", 600); | |
| // 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", 500) // set the height | |
| .attr("width", 1000) // 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", 500) // set the height | |
| .attr("width", 500) // 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", 500) // position the x-centre | |
| .attr("cy", 250) // position the y-centre | |
| .attr("r", 50) // 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", 105) // position the top of the rectangle | |
| .attr("height", 290) // set the height | |
| .attr("width", 170) // 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", 830) // position the left of the rectangle | |
| .attr("y", 105) // position the top of the rectangle | |
| .attr("height", 290) // set the height | |
| .attr("width", 170) // 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", 184) // position the top of the rectangle | |
| .attr("height", 132) // 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", "#80B280"); // set the fill colour | |
| // draw a rectangle - six yard box 2 | |
| holder.append("rect") // attach a rectangle | |
| .attr("x", 940) // position the left of the rectangle | |
| .attr("y", 184) // position the top of the rectangle | |
| .attr("height", 132) // 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", "#80B280"); // set the fill colour | |
| // draw a circle - penalty spot 1 | |
| holder.append("circle") // attach a circle | |
| .attr("cx", 120) // position the x-centre | |
| .attr("cy", 250) // 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", 880) // position the x-centre | |
| .attr("cy", 250) // 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", 500) // position the x-centre | |
| .attr("cy", 250) // 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(70) | |
| .outerRadius(75) | |
| .startAngle(0.75) //radians | |
| .endAngle(2.4) //just radians | |
| var arc2 = d3.svg.arc() | |
| .innerRadius(70) | |
| .outerRadius(75) | |
| .startAngle(-0.75) //radians | |
| .endAngle(-2.4) //just radians | |
| holder.append("path") | |
| .attr("d", arc) | |
| .attr("fill", "#001400") | |
| .attr("transform", "translate(120,250)"); | |
| holder.append("path") | |
| .attr("d", arc2) | |
| .attr("fill", "#001400") | |
| .attr("transform", "translate(880,250)"); | |
| // Dragging circles | |
| var color = d3.scale.ordinal().range(["maroon", "pink"]); | |
| var color1 = d3.scale.ordinal().range(["mediumturquoise", "red"]); | |
| //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", 14) | |
| .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); }) | |
| .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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment