D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mhfcb
Full window
Github gist
fresh
Built with
blockbuilder.org
<!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>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js