D3 Examples - Sparklines2

xxxxxxxxxx
 
<!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 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="https://www.clipartbest.com/cliparts/dc6/Mzr/dc6Mzr5Mi.png" style="width:12px;height:12px;"> = Won World Series</p2>
        <p2><img src="https://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", "https://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", "https://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>
    