Sparklines

<!DOCTYPE html>
<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>

//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