xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Loading CSV Data with D3</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <style type="text/css"> body { background-color: white; font-family: "Helvetica Neue", Arial, sans-serif; } h1 { font-size: 36px; margin: 0; } p { font-size: 14px; margin: 18px 0 0 0; } svg { background-color: white; } circle:hover { cursor: pointer; } .axis path, .axis line { fill: none; stroke: #545454; shape-rendering: crispEdges; } .axis text { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 10px; } .y.axis text { font-size: 8px; } .label { font-size: 10px; } </style> <h1>Running backs with 420 or more touches in a season</h1> <p>Sixteen running backs have had 420 or more touches in a single season since the NFL/AFL merger in 1970. Below is each season of those players' careers. Blue circles indicate a year before a player reached the 420-touch mark. Green circles are seasons after which a player had 420 touches in a year. Red circles are the first year in which a player reached 420 or more touches.</p> <script type="text/javascript"> var dimensions = { w: 600, h: 400, padding: { t: 25, r: 25, b: 25, l: 50 } } var xScale = d3.scale.linear() .range([dimensions.padding.l, dimensions.w - dimensions.padding.r ]); var yScale = d3.scale.linear() .range([dimensions.padding.t, dimensions.h - dimensions.padding.b -5 ]); var xAxis = d3.svg.axis() .scale(xScale) .orient('bottom'); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); var svg = d3.select("body") .append("svg") .attr("width", dimensions.w) .attr("height", dimensions.h); //Load in contents of CSV file d3.csv("TouchesData.csv", function(data) { xScale.domain([0, d3.max(data, function(d) { return +d.Touches; }) ]); yScale.domain([ d3.max(data, function(d) { return +d.YScm; }), 0 ]); var circles = svg.selectAll("circle") .data(data) .enter() .append("circle"); circles.attr("cx", function(d){ return xScale(d.Touches) }) .attr("cy", function(d) { return yScale(d.YScm); }) .attr("r", .25) .style("fill",function(d) { switch(d.Era){ case "pre": return "#69D2E7"; break; case "current": return "#B11623"; break; case "post": return "#519548"; break; default: alert("Problem picking round"); } }) .append("title") .text(function(d){ return d.Player + ", " + d.Touches + " touches, " + d.YScm + " yards from scrimmage"; }) circles.transition() .duration(2000) .attr("r", 5); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0 ," + (dimensions.h - dimensions.padding.b - 5) +")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + dimensions.padding.l + ",0)") .call(yAxis); svg.append('text') .attr("class", "x axis label") .attr("x", dimensions.padding.l + (dimensions.w /2) ) .attr("y", dimensions.h) .style("text-anchor", "middle") .text("TOUCHES IN A SEASON"); svg.append('text') .attr("class", "y axis label") .attr("transform", "rotate(-90)") .attr("y", 15) .attr("x", ((dimensions.h + dimensions.padding.t) / 2 - 33)* -1) .style("text-anchor", "middle") .text("TOTAL YARDS"); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js