Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/README.md

Last active August 16, 2016 07:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jalapic/df90b219b9443e457e0d to your computer and use it in GitHub Desktop.
Save jalapic/df90b219b9443e457e0d to your computer and use it in GitHub Desktop.
Download ZIP
James' tactics board
Raw
README.md
Raw
dots.txt
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
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", 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