|
<!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:10;position:fixed;top:0;right:0;bottom:0;left:50; } |
|
svg { width:100%; height: 100% } |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<script> |
|
|
|
var linecolour = "#ffffff" |
|
var fillcolour = "#A1C349" |
|
|
|
var holder = d3.select("body") // select the 'body' element |
|
.append("svg") // append an SVG element to the body |
|
.attr("width", 1150) |
|
.attr("height", 780); |
|
|
|
|
|
|
|
// Total Grass |
|
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", 780) // set the height |
|
.attr("width", 1150) // set the width |
|
.style("fill", fillcolour); // set the fill colour |
|
|
|
// draw a rectangle pitch outline |
|
holder.append("rect") // attach a rectangle |
|
.attr("x", 50) // position the left of the rectangle |
|
.attr("y", 50) // 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", linecolour) // set the line colour |
|
.style("fill", fillcolour); // set the fill colour |
|
|
|
// draw a rectangle - half 1 |
|
holder.append("rect") // attach a rectangle |
|
.attr("x", 50) // position the left of the rectangle |
|
.attr("y", 50) // 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", linecolour) // set the line colour |
|
.style("fill", "none"); // set the fill colour |
|
|
|
|
|
// draw a rectangle - half 2 |
|
holder.append("rect") // attach a rectangle |
|
.attr("x", 575) // position the left of the rectangle |
|
.attr("y", 50) // 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", linecolour) // set the line colour |
|
.style("fill", "none"); // set the fill colour |
|
|
|
|
|
// draw a circle - center circle |
|
holder.append("circle") // attach a circle |
|
.attr("cx", 575) // position the x-centre |
|
.attr("cy", 390) // position the y-centre |
|
.attr("r", 91.5) // set the radius |
|
.style("stroke-width", 5) // set the stroke width |
|
.style("stroke", linecolour) // 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", 50) // position the left of the rectangle |
|
.attr("y", 188.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", linecolour) // set the line colour |
|
.style("fill", "none"); // set the fill colour |
|
|
|
|
|
// draw a rectangle - penalty area 2 |
|
holder.append("rect") // attach a rectangle |
|
.attr("x", 935) // position the left of the rectangle |
|
.attr("y", 188.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", linecolour) // set the line colour |
|
.style("fill", "none"); // set the fill colour |
|
|
|
// draw a rectangle - six yard box 1 |
|
holder.append("rect") // attach a rectangle |
|
.attr("x", 50) // position the left of the rectangle |
|
.attr("y", 298.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", linecolour) // set the line colour |
|
.style("fill", "none"); // set the fill colour |
|
|
|
// draw a rectangle - six yard box 2 |
|
holder.append("rect") // attach a rectangle |
|
.attr("x", 1045) // position the left of the rectangle |
|
.attr("y", 298.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", linecolour) // set the line colour |
|
.style("fill", "none"); // set the fill colour |
|
|
|
// draw a rectangle - goalmouth 1 |
|
holder.append("rect") // attach a rectangle |
|
.attr("x", 25) // position the left of the rectangle |
|
.attr("y", 353.4) // position the top of the rectangle |
|
.attr("height", 73.2) // set the height |
|
.attr("width", 25) // set the width |
|
.style("stroke-width", 5) // set the stroke width |
|
.style("stroke", linecolour) // set the line colour |
|
.style("fill", "none"); // set the fill colour |
|
|
|
// draw a rectangle - goalmouth 2 |
|
holder.append("rect") // attach a rectangle |
|
.attr("x", 1100) // position the left of the rectangle |
|
.attr("y", 353.4) // position the top of the rectangle |
|
.attr("height", 73.2) // set the height |
|
.attr("width", 25) // set the width |
|
.style("stroke-width", 5) // set the stroke width |
|
.style("stroke", linecolour) // set the line colour |
|
.style("fill", "none"); // set the fill colour |
|
|
|
|
|
// draw a circle - penalty spot 1 |
|
holder.append("circle") // attach a circle |
|
.attr("cx", 160) // position the x-centre |
|
.attr("cy", 390) // position the y-centre |
|
.attr("r", 5) // set the radius |
|
.style("fill", linecolour); // set the fill colour |
|
|
|
// draw a circle - penalty spot 2 |
|
holder.append("circle") // attach a circle |
|
.attr("cx", 990) // position the x-centre |
|
.attr("cy", 390) // position the y-centre |
|
.attr("r", 5) // set the radius |
|
.style("fill", linecolour); // set the fill colour |
|
|
|
// draw a circle - center spot |
|
holder.append("circle") // attach a circle |
|
.attr("cx", 575) // position the x-centre |
|
.attr("cy", 390) // position the y-centre |
|
.attr("r", 5) // set the radius |
|
.style("fill", linecolour); // 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", linecolour) |
|
.attr("transform", "translate(160,390)") |
|
holder.append("path") |
|
.attr("d", arc2) |
|
.attr("fill", linecolour) |
|
.attr("transform", "translate(990,390)"); |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
</body> |