Skip to content

Instantly share code, notes, and snippets.

@mhfcb

mhfcb/.block

Created March 20, 2017 15:53
Show Gist options
  • Save mhfcb/473e328c5b628a6ad64f131711131b9d to your computer and use it in GitHub Desktop.
Save mhfcb/473e328c5b628a6ad64f131711131b9d to your computer and use it in GitHub Desktop.
Download ZIP
fresh
Raw
.block
license: mit
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: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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment