Sparklines2 by wmerrow

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Sparklines</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
				font-family: sans-serif;
			}

			h1 {
				font-size: 30px;
				margin: 0 0 10px 0;
			}

			p1 {
				font-size: 16px;
				margin: 0 0 20px 0;
                color: #000000;
			}
            
            p2 {
				font-size: 12px;
				margin: 0 4px 5px 4px;
                color: #000000;
			}

			svg {
				background-color: whitesmoke;
                display: block;
                margin-bottom: 5px;
			}
            
            path.line:hover {
                stroke-width: 4;
            }
            circle:hover{
                r: 5;
            }
           
            .pointHR {
                fill: #339933;
            }
            
            .pointWAR {
                fill: #000000;
            }
            
            .pointBA {
                fill: #0066CC;
            }
            
                 

		</style>
	</head>
	<body>

		<h1>Top Career Hitters</h1>
        
		<p1>Yearly <strong style= "color: #000000">Offensive Wins Above Replacement (WAR)</strong>, <strong style= "color: #0066CC">Batting Average</strong>, and <strong style= "color: #339933">Home Runs</strong> (ranked by lifetime Offensive WAR)</p1>
        <br>
        <br>
        <p2><img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Black_dot.png" style="width:8px;height:8px;"> = Led League</p2>
        <p2><img src="//www.clipartbest.com/cliparts/dc6/Mzr/dc6Mzr5Mi.png" style="width:12px;height:12px;"> = Won World Series</p2>
        <p2><img src="//cdn.flaticon.com/png/256/54688.png" style="width:10px;height:10px;"> = All Star</p2>
        <br>
        <br>
            

		<script type="text/javascript">		


			//SVG width and height
			var w = 420;
			var h = 95;
            
            //Padding between SVG edges and chart edges
			var padding = [ 24, 10, 25, 10 ];  //Top, right, bottom, left

			//Scales with range in pixels
			var xScale = d3.scale.linear()
								.range([ padding[3], w - padding[1] ]);
            var xScaleYear = 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 yScaleHR = 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 lineHR = d3.svg.line()
				.x(function(d) {return xScale(d.Age);})
				.y(function(d) {return yScaleHR(d.HR);});
            var areaWAR = d3.svg.area()
				.x(function(d) {return xScale(d.Age);})
                .y0(h-padding[2])
				.y1(function(d) {return yScaleWAR(d.WAR);});
            
            var r = 3  //radius of points
            var imagew = 13  //width and height of icons

//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 and year for 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;}); }); 
            players.forEach(function(s){s.minYear = d3.min(s.values, function(d){ return d.Year;}); });
            players.forEach(function(s){s.maxYear = d3.max(s.values, function(d){ return d.Year;}); }); 
        
            //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
					]);
        
                    yScaleHR.domain([ 
						d3.max(HitterData, function(d) {
							return +d.HR;}),
						0
					]);

            //Configure SVG - creates one svg per player
			var svg = d3.select("body")
                        .selectAll("svg")
                        .data(players)
						.enter()
                        .append("svg")
						.attr("width", w)
						.attr("height", h);
        
            

    //LINES
            //Draw area under WAR lines for all players
                    svg.append("path")
                        .attr("class","area")
                        .attr("d",function(d){return areaWAR(d.values); })
                        .attr("fill", "#CFCFCF");
            //Draw WAR lines for all players
                    svg.append("path")
                        .attr("class","line")
                        .attr("d",function(d){return lineWAR(d.values); })
                   		.attr("fill", "none")
						.attr("stroke", "#000000")
						.attr("stroke-width", 2);
        
            //Draw HR lines for all players
                    svg.append("path")
                        .attr("class","line")
                        .attr("d",function(d){return lineHR(d.values); })
                   		.attr("fill", "none")
						.attr("stroke", "#339933")
						.attr("stroke-width", 2);
        
            //Draw BA lines for all players
                    svg.append("path")
                        .attr("class","line")
                        .attr("d",function(d){return lineBA(d.values); })
                   		.attr("fill", "none")
						.attr("stroke", "#0066CC")
						.attr("stroke-width", 2);
        
        
        
            //Var that creates svg once (not for each player) for axis units in first chart and for drawing points and awards for players individually
             var svg1 = d3.select("body").select("svg")
                .append("svg")
				.attr("width", w)
				.attr("height", h);
        
       
//POINTS
        
//Draw Babe Ruth WAR points 
svg1.selectAll("pointWAR")
   .data(HitterData)
   .enter()
   .append("circle")
    .attr("class", "pointWAR")
   .attr("cx", function(d) {
        return xScale(d.Age);
   })
   .attr("cy", function(d) {
        return yScaleWAR(d.WARlead);
   })
    //Hides null values by setting radius equal to WARlead then converting WARlead to variable r using math.ceil function:
   .attr("r", function(d) { return Math.ceil((d.WARlead)/10000)*r;});  
        
//Draw Babe Ruth HR points
svg1.selectAll("pointHR")
   .data(HitterData)
   .enter()
   .append("circle")
    .attr("class", "pointHR")
   .attr("cx", function(d) {
        return xScale(d.Age);
   })
   .attr("cy", function(d) {
        return yScaleHR(d.HRlead);
   })
   .attr("r", function(d) { return Math.ceil((d.HRlead)/10000)*r;}); 
        
//Draw Babe Ruth BA points
svg1.selectAll("pointBA")
   .data(HitterData)
   .enter()
   .append("circle")
    .attr("class", "pointBA")
   .attr("cx", function(d) {
        return xScale(d.Age);
   })
   .attr("cy", function(d) {
        return yScaleBA(d.BAlead);
   })
   .attr("r", function(d) { return Math.ceil((d.BAlead)/10000)*r;});    


//AWARDS
        
//Draws AllStar stars for Babe Ruth
svg1.selectAll("pointAS")
   .data(HitterData)
   .enter()
   .append("image")
   .attr("xlink:href", "//cdn.flaticon.com/png/256/54688.png")
   .attr("x", function(d) {
        return xScale(d.Age)-(imagew/2); 
   }) //-(imagew/2) centers the image on the point
   .attr("y", function(d) {
        return yScaleWAR(d.AllStar)+2; 
   }) 
   .attr("width", function(d) { return Math.ceil((d.AllStar)/10000)*(imagew*.8);})
   .attr("height", function(d) { return Math.ceil((d.AllStar)/10000)*(imagew*.8);});  
        
//Draws WorldSeries rings for Babe Ruth
svg1.selectAll("pointWS")
   .data(HitterData)
   .enter()
   .append("image")
   .attr("xlink:href", "//www.clipartbest.com/cliparts/dc6/Mzr/dc6Mzr5Mi.png")
   .attr("x", function(d) {
        return xScale(d.Age)-(imagew/2); 
   }) //-(imagew/2) centers the image on the point
   .attr("y", function(d) {
        return yScaleWAR(d.WorldSeries)-imagew+2; 
   }) 
    .attr("width", function(d) { return Math.ceil((d.WorldSeries)/10000)*imagew;})
   .attr("height", function(d) { return Math.ceil((d.WorldSeries)/10000)*imagew;});  
        
//Draws MVPs for Babe Ruth
svg1.selectAll("pointMVP")
   .data(HitterData)
   .enter()
   .append("text")
    
   .attr("x", function(d) {
        return xScale(d.Age)-(10); 
   }) //-(imagew/2) centers the image on the point
   .attr("y", function(d) {
        return yScaleWAR(d.MVP)+12; 
   }) 
    //Hides null values by setting font size equal to MVP then converting MVP to variable font size using math.ceil function:
   .attr("font-size", function(d) { return Math.ceil((d.MVP)/10000)*10;})
    .text("MVP")
    ;

//Points and awards only work because Babe Ruth is the only player with values filled in for WARlead, HRlead, BAlead, and award columns - otherwise it would display all players on his chart
        
        
//LABELS
            //Write player names (nest 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 player years
                    svg.append("text")
                        .attr("x", 5)
                        .attr("y",27)
                        .attr("font-size",10)
                        .text(function(d){return d.minYear+"-"+d.maxYear;}); 
        
            //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 "years old" in first chart 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>