Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><div id="shotplotContainerWrapper"> <div id="shotplotContainer"><body> <script> var width = 120 var height = 90 ratio = 6 var holder = d3.select("div") .append("svg") // append an SVG element to the div .attr("width", width*ratio) .attr("height", height*ratio); var pitchcolor = "grey" var linecolor = "white" // draw a rectangle - pitch 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", height * ratio) // set the height .attr("width", width * ratio) // set the width .style("stroke-width", 0) // set the stroke width .style("fill", pitchcolor); // set the fill colour holder.append("rect") // attach a rectangle .attr("x", 135) // position the left of the rectangle .attr("y", 90) // position the top of the rectangle .attr("height", 125) // set the height .attr("width", 480) // set the width .style("stroke-width", 2) // set the stroke width .style("stroke", "white") // set the line colour .style("fill", pitchcolor); // set the fill colour holder.append("rect") // attach a rectangle .attr("x", 252) // position the left of the rectangle .attr("y", 90) // position the top of the rectangle .attr("height", 47) // set the height .attr("width", 246) // set the width .style("stroke-width", 2) // set the stroke width .style("stroke", "white") // set the line colour .style("fill", pitchcolor); // set the fill colour holder.append("circle") // attach a circle .attr("cx", 375) // position the x-centre .attr("cy", 171) // position the y-centre .attr("r", 2) // set the radius .style("fill", "white"); // set the fill colour // // add goal holder.append("rect") // attach a rectangle .attr("x", 333) // position the left of the rectangle .attr("y", 57) // position the top of the rectangle .attr("height", 33) // set the height .attr("width", 84) // set the width .style("stroke-width", 2) // set the stroke width .style("stroke", "#EEEEEE") // set the line colour .style("fill", pitchcolor); // set the fill colour // draw goal line holder.append("line") .attr("x1", 0) .attr("y1", 90) .attr("x2", 750) .attr("y2", 90) .style("stroke-width", 2) // set the stroke width .style("stroke", "white") // set the line colour // draw half way line holder.append("line") .attr("x1", 0) .attr("y1", 465) .attr("x2", 750) .attr("y2", 465) .style("stroke-width", 2) // set the stroke width .style("stroke", "white") // set the line colour d3.csv('Shots.csv', function (data) { console.log(data) holder.append("g") .selectAll("circle") .data(data) .enter() .append("circle") .attr("r", 5) .attr("cx", function(d) { return +d.Xpos*ratio; }) .attr("cy", function(d) { return +d.ypos*ratio; }) .style("stroke-width", 2) // set the stroke width .style("stroke", "black") // set the line colour }) </script></body> https://d3js.org/d3.v4.min.js