Skip to content

Instantly share code, notes, and snippets.

@jmharkins

jmharkins/index.html

Last active August 29, 2015 14:27
Show Gist options
  • Save jmharkins/a077135a37545c2e6ad4 to your computer and use it in GitHub Desktop.
Save jmharkins/a077135a37545c2e6ad4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw D3 Pitch Map
Raw
readme.md

This basic map of the pitch conforms to opta's pitch dimensions and includes x/y scales which convert 0-100 (x,y) coordinates to the proper location on the pitch. Change the plotscale variable at the top to change the size of the pitch. For static exports of projects in D3, see the SVG Crowbar

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://raw.githubusercontent.com/d3/d3-plugins/master/hexbin/hexbin.js"></script>
<script src="rawpitch.js"></script>
Raw
rawpitch.js
var plotscale = 750
var margin = {top: (plotscale * (14.86/960)),
right: (plotscale * (20/960)),
bottom: (plotscale * (24/960)),
left: (plotscale* (40/960))},
width = plotscale - margin.left - margin.right,
height = (plotscale * (68/105) - margin.top - margin.bottom) ;
console.log(68/105, height/width)
var x = d3.scale.linear()
.domain([0, 100])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 100])
.range([height, 0]);
// var xAxis = d3.svg.axis()
// .scale(x)
// .orient("bottom")
// .tickSize(6, -height);
// var yAxis = d3.svg.axis()
// .scale(y)
// .orient("left")
// .tickSize(6, -width);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("class", "mesh")
.attr("width", width)
.attr("height", height);
///////////////////////
// add lines
// field outline
svg.append("rect")
.attr("id","outline")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "none")
.attr("stroke", "black");
// right penalty area
svg.append("rect")
.attr("id","six")
.attr("x", x(83))
.attr("y", y(78.9))
.attr("width", x(100) - x(83))
.attr("height", y(21.1) - y(78.9))
.attr("fill", "none")
.attr("stroke", "black");
// right six yard box
svg.append("rect")
.attr("id","penarea")
.attr("x", x(94.2))
.attr("y", y(63.2))
.attr("width", x(100) - x(94.2))
.attr("height", y(36.8) - y(63.2))
.attr("fill", "none")
.attr("stroke", "black");
// right goal
svg.append("rect")
.attr("id","penarea")
.attr("x", x(100))
.attr("y", y(54.8))
.attr("width", margin.right - 1)
.attr("height", y(45.2) - y(54.8))
.attr("fill", "none")
.attr("stroke", "black");
// left penalty area
svg.append("rect")
.attr("id","six")
.attr("x", x(0))
.attr("y", y(78.9))
.attr("width", x(100) - x(83))
.attr("height", y(21.1) - y(78.9))
.attr("fill", "none")
.attr("stroke", "black");
// six yard box
svg.append("rect")
.attr("id","penarea")
.attr("x", x(0))
.attr("y", y(63.2))
.attr("width", x(100) - x(94.2))
.attr("height", y(36.8) - y(63.2))
.attr("fill", "none")
.attr("stroke", "black");
// right goal
svg.append("rect")
.attr("id","penarea")
.attr("x", x(0) - margin.right+1)
.attr("y", y(54.8))
.attr("width", margin.right - 1)
.attr("height", y(45.2) - y(54.8))
.attr("fill", "none")
.attr("stroke", "black");
// 50 yd line
svg.append("line")
.attr("id","half")
.attr("x1", x(50))
.attr("x2", x(50))
.attr("y1", y(0))
.attr("y2", y(100))
.attr("stroke", "black");
// center circle
svg.append("circle")
.attr("cx", x(50))
.attr("cy", y(50))
.attr("r", x(10))
.attr("fill", "none")
.attr("stroke", "black");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment