mpmckenna8/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Working on figuring out the different svg shapes using d3.js.  I was going to not do a path but decided to try to make a little arc for the corner kick spot.  At first I was lazy and tried to approximate the radians that would make up a quarter of a circle, but I couldn't sleep at night. So what I ended up doing is:
.startAngle(0 * (pi/180)) //converting from degs to radians
.endAngle(90  * (pi/180)) //just radians

So now the first number entered is a regular old angle with 0 being the top of the circle and 90 being a right angle. If i just wanted a 45 degree slice of the circle I'd just enter 45 instead of 90 or ave a difference of 45 between the numbers being multiplied by pi/180.
So Why was I doing this? I pretty much wanted to get to know svg elements and what shapes I could easily throw down on a webpage using d3.  Plus I wanted to get a handle on some of their basic attributes. Plus I wanted to know what the little arc at the top of the penalty area was from? A big circle from the goal line? no. A little circle from the penalty shot circle actually.  Maybe one day I'll get around to doing the other side of the pitch or making nice colors and not having lines where they shouldn't be.
MDN page on svg path: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

</style>
<body>


<p> A handy doodah for svg arc paths with d3 <a href="http://jsfiddle.net/h9XNz">js fiddle example</a>/</p>
<script src="http://d3js.org/d3.v3.js"></script>

<script src="simpd3.js">        </script>
    </body>

## simpd3.js
// making a football pitch with general dimensions from http://en.wikipedia.org/wiki/Association_football_pitch#Other_markings

var pi = Math.PI;

var width = 115*7;
var height = 74*7;


var piter = d3.select('body').append('svg').attr('class', 'pitch').attr('height',height+20)
.attr('width', width+20)
.style('background','green');


var corner = d3.svg.arc()
    .innerRadius(6)
    .outerRadius(7)
    .startAngle(0 * (pi/180)) //converting from degs to radians
    .endAngle(90* (pi/180)) //just radians

var field = piter.append('rect').attr('height',height)
.attr('width', width)
.attr('fill', 'transparent')
.attr('stroke', 'white')
.attr('x', 10)
.attr('y',10);


piter.append('rect')
.attr('height',44*7)
.attr('width', 18*7)
.attr('y',15*7+10)
.attr('x',10)
.attr('fill', 'blue')
.attr('stroke', 'white');

piter.append('rect')
.attr('height',20*7)
.attr('width', 8*7)
.attr('y',27*7+10)
.attr('x',10)
.attr('fill', 'purple')
.attr('stroke', 'white');


//centerline of the pitch
piter.append('line')
.attr('x1',width/2+10)
.attr('x2',width/2+10)
.attr('y1',10)
.attr('y2',height+10)
.attr('stroke','white');


//center circle
piter.append('circle')
.attr('r', 70)
.attr('cx',width/2+10)
.attr('cy',height/2+10)
.attr('fill','transparent')
.attr('stroke', 'white');

piter.append('circle')
.attr('r', 4)
.attr('cx',width/2+10)
.attr('cy',height/2+10)
.attr('fill','black')
.attr('stroke', 'white');

piter.append('circle')
.attr('r', 4)
.attr('cx',12*7+10)
.attr('cy',height/2+10)
.attr('fill','black')
.attr('stroke', 'white');

piter.append('circle')
.attr('r', 7*22)
.attr('cx',10)
.attr('cy',height/2+10)
.attr('fill','transparent')
.attr('stroke', 'white');


piter.append('circle')
.attr('r', 70)
.attr('cx',12*7+10)
.attr('cy',height/2+10)
.attr('fill','transparent')
.attr('stroke', 'white');

piter.append('circle')
.attr('r',7)
.attr('stroke','white')
.attr('cx', 10)
.attr('cy',10)
.attr('fill','transparent');

//adding the corner arc to the bottom left
piter.append('path')
  .attr('d', corner)
  .attr('transform','translate('+ 10 +','+ (10+74*7) + ')')
  .attr('stroke','white')


var vis = d3.select("body").append("svg")


var arc = d3.svg.arc()
    .innerRadius(65)
    .outerRadius(70)
    .startAngle(0 * (pi/180)) //converting from degs to radians
    .endAngle(1.57) //just radians


vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(100,100)")


// starts 110 down line down the middle

// want to make a little scale for this.


/*
piter.append('line')
.attr('x1',5)
.attr('x2',width)
.attr('y1', height/2+10)
.attr('y2',height/2+10)
.attr('stroke','white');
*/
	<!DOCTYPE html>
	<meta charset="utf-8">

	</style>
	<body>






	<p> A handy doodah for svg arc paths with d3 <a href="http://jsfiddle.net/h9XNz">js fiddle example</a>/</p>
	<script src="http://d3js.org/d3.v3.js"></script>

	<script src="simpd3.js"> </script>
	</body>
	// making a football pitch with general dimensions from http://en.wikipedia.org/wiki/Association_football_pitch#Other_markings

	var pi = Math.PI;

	var width = 115*7;
	var height = 74*7;


	var piter = d3.select('body').append('svg').attr('class', 'pitch').attr('height',height+20)
	.attr('width', width+20)
	.style('background','green');


	var corner = d3.svg.arc()
	.innerRadius(6)
	.outerRadius(7)
	.startAngle(0 * (pi/180)) //converting from degs to radians
	.endAngle(90* (pi/180)) //just radians

	var field = piter.append('rect').attr('height',height)
	.attr('width', width)
	.attr('fill', 'transparent')
	.attr('stroke', 'white')
	.attr('x', 10)
	.attr('y',10);


	piter.append('rect')
	.attr('height',44*7)
	.attr('width', 18*7)
	.attr('y',15*7+10)
	.attr('x',10)
	.attr('fill', 'blue')
	.attr('stroke', 'white');

	piter.append('rect')
	.attr('height',20*7)
	.attr('width', 8*7)
	.attr('y',27*7+10)
	.attr('x',10)
	.attr('fill', 'purple')
	.attr('stroke', 'white');


	//centerline of the pitch
	piter.append('line')
	.attr('x1',width/2+10)
	.attr('x2',width/2+10)
	.attr('y1',10)
	.attr('y2',height+10)
	.attr('stroke','white');


	//center circle
	piter.append('circle')
	.attr('r', 70)
	.attr('cx',width/2+10)
	.attr('cy',height/2+10)
	.attr('fill','transparent')
	.attr('stroke', 'white');

	piter.append('circle')
	.attr('r', 4)
	.attr('cx',width/2+10)
	.attr('cy',height/2+10)
	.attr('fill','black')
	.attr('stroke', 'white');

	piter.append('circle')
	.attr('r', 4)
	.attr('cx',12*7+10)
	.attr('cy',height/2+10)
	.attr('fill','black')
	.attr('stroke', 'white');

	piter.append('circle')
	.attr('r', 7*22)
	.attr('cx',10)
	.attr('cy',height/2+10)
	.attr('fill','transparent')
	.attr('stroke', 'white');


	piter.append('circle')
	.attr('r', 70)
	.attr('cx',12*7+10)
	.attr('cy',height/2+10)
	.attr('fill','transparent')
	.attr('stroke', 'white');

	piter.append('circle')
	.attr('r',7)
	.attr('stroke','white')
	.attr('cx', 10)
	.attr('cy',10)
	.attr('fill','transparent');

	//adding the corner arc to the bottom left
	piter.append('path')
	.attr('d', corner)
	.attr('transform','translate('+ 10 +','+ (10+74*7) + ')')
	.attr('stroke','white')






	var vis = d3.select("body").append("svg")



	var arc = d3.svg.arc()
	.innerRadius(65)
	.outerRadius(70)
	.startAngle(0 * (pi/180)) //converting from degs to radians
	.endAngle(1.57) //just radians



	vis.append("path")
	.attr("d", arc)
	.attr("transform", "translate(100,100)")


	// starts 110 down line down the middle

	// want to make a little scale for this.


	/*
	piter.append('line')
	.attr('x1',5)
	.attr('x2',width)
	.attr('y1', height/2+10)
	.attr('y2',height/2+10)
	.attr('stroke','white');
	*/