D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wmerrow
Full window
Github gist
Sparklines2
<!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>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js