xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Sparklines</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: sans-serif; } h1 { font-size: 30px; margin: 0; } p { font-size: 14px; margin: 0 0 15px 0; color: #000000; } svg { background-color: whitesmoke; display: block; margin-bottom: 5px; } path.line:hover { stroke: #CC0000; stroke-width: 4; } </style> </head> <body> <h1>Top Career Hitters</h1> <p>Yearly <strong style= "color: #000000">Offensive Wins Above Replacement (WAR)</strong>, <strong style= "color: #0066CC">Batting Average</strong>, and <strong style= "color: #339933">Slugging Percentage</strong> (ranked by lifetime Offensive WAR)</p> <script type="text/javascript"> //SVG width and height var w = 400; var h = 60; //Padding between SVG edges and chart edges var padding = [ 19, 10, 15, 10 ]; //Top, right, bottom, left //Scales with range in pixels var xScale = d3.scale.linear() .range([ padding[3], w - padding[1] ]); var yScaleWAR = d3.scale.linear() .range([ padding[0], h - padding[2] ]); var yScaleBA = d3.scale.linear() .range([ padding[0], h - padding[2] ]); var yScaleSLG = d3.scale.linear() .range([ padding[0], h - padding[2] ]); //Configure lines and area var lineWAR = d3.svg.line() .x(function(d) {return xScale(d.Age);}) .y(function(d) {return yScaleWAR(d.WAR);}); var lineBA = d3.svg.line() .x(function(d) {return xScale(d.Age);}) .y(function(d) {return yScaleBA(d.BA);}); var lineSLG = d3.svg.line() .x(function(d) {return xScale(d.Age);}) .y(function(d) {return yScaleSLG(d.SLG);}); var areaWAR = d3.svg.area() .x(function(d) {return xScale(d.Age);}) .y0(h-padding[2]) .y1(function(d) {return yScaleWAR(d.WAR);});//Load data d3.csv("TopTenHittersSmall.csv", function(HitterData) { //Nest data by player var players = d3.nest() .key(function(d){return d.Player;}).entries(HitterData); //Calculate min and max age of each player players.forEach(function(s){s.minAge = d3.min(s.values, function(d){ return d.Age;}); }); players.forEach(function(s){s.maxAge = d3.max(s.values, function(d){ return d.Age;}); }); //Configure scales xScale.domain([ d3.min(HitterData, function(d) { return d.Age; }), d3.max(HitterData, function(d) { return d.Age; }) ]); yScaleWAR.domain([ d3.max(HitterData, function(d) { return +d.WAR; }), 0 ]); yScaleBA.domain([ d3.max(HitterData, function(d) { return +d.BA; }), 0 ]); yScaleSLG.domain([ d3.max(HitterData, function(d) { return +d.SLG; }), 0 ]); //Configure SVG var svg = d3.select("body").selectAll("svg") .data(players) .enter() .append("svg") .attr("width", w) .attr("height", h) ; //Configure SVG for axis units var svg1 = d3.select("body").select("svg") .append("svg") .attr("width", w) .attr("height", h) ; //Draw area under lines svg.append("path") .attr("class","area") .attr("d",function(d){return areaWAR(d.values); }) .attr("fill", "#CFCFCF") ; //Draw lines svg.append("path") .attr("class","line") .attr("d",function(d){return lineWAR(d.values); }) .attr("fill", "none") .attr("stroke", "#000000") .attr("stroke-width", 2); svg.append("path") .attr("class","line") .attr("d",function(d){return lineSLG(d.values); }) .attr("fill", "none") .attr("stroke", "#339933") .attr("stroke-width", 2); svg.append("path") .attr("class","line") .attr("d",function(d){return lineBA(d.values); }) .attr("fill", "none") .attr("stroke", "#0066CC") .attr("stroke-width", 2); //Write player names using key svg.append("text") .attr("x", 5) .attr("y",15) .attr("font-size",14) .attr("font-weight","bold") .text(function(d){return d.key;}); //Write min and max player age using minAge and maxAge svg.append("text") .attr("x", function(d){return xScale(d.minAge)-5;}) .attr("y",h-padding[2]+10) .attr("font-size",10) .text(function(d){return d.minAge;}); svg.append("text") .attr("x", function(d){return xScale(d.maxAge)-5;}) .attr("y",h-padding[2]+10) .attr("font-size",10) .text(function(d){return d.maxAge;}); //Write axis units in svg1 only svg1.append("text") .attr("x", function(d){return xScale(d.minAge)+9;}) .attr("y",h-padding[2]+10) .attr("font-size",10) .text(" years old"); svg1.append("text") .attr("x", function(d){return xScale(d.maxAge)+9;}) .attr("y",h-padding[2]+10) .attr("font-size",10) .text(" years old"); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js