Skip to content

Instantly share code, notes, and snippets.

@sequentialchaos

sequentialchaos/data.csv

Last active January 1, 2020 08:04
Show Gist options
  • Save sequentialchaos/1ddfcff91d3b5a3f94e6bab25132df82 to your computer and use it in GitHub Desktop.
Save sequentialchaos/1ddfcff91d3b5a3f94e6bab25132df82 to your computer and use it in GitHub Desktop.
Download ZIP
Baseball Hall of Fame Monitor vs. Hall of Fame Standards, active hitters or retired after 2013
Raw
data.csv
Name HoF_Standards HoF_Monitor BlackInk GrayInk
A.J. Ellis 5 4 0 0
A.J. Pierzynski 30 108 0 5
A.J. Pollock 13 11 0 18
Aaron Hicks 6 0 0 2
Aaron Hill 17 18 1 31
Aaron Judge 25 30 9 21
Adam Dunn 32 75 4 87
Adam Duvall 9 11 0 15
Adam Eaton 12 5 2 10
Adam Jones 18 36 1 41
Adam LaRoche 15 16 0 23
Adam Lind 14 12 0 13
Adam Rosales 3 0 0 0
Addison Russell 4 11 0 0
Adeiny Hechavarria 1 0 0 3
Adrian Beltre 55 163 9 98
Adrian Gonzalez 31 90 10 85
Albert Pujols 70 339 45 268
Alberto Callaspo 13 4 0 1
Alcides Escobar 16 17 3 14
Aledmys Diaz 9 6 0 0
Alejandro De Aza 4 0 0 2
Alex Avila 8 14 0 0
Alex Bregman 18 19 2 22
Alex Gonzalez 19 11 0 3
Alex Gordon 15 31 2 21
Alex Presley 3 0 0 0
Alex Rios 15 20 0 35
Alex Rodriguez 77 390 68 214
Alexei Ramirez 18 6 0 10
Alexi Casilla 1 0 0 0
Alfonso Soriano 31 105 10 70
Allen Craig 9 9 0 15
Andre Ethier 18 21 0 12
Andrelton Simmons 4 11 0 4
Andres Blanco 3 0 0 0
Andrew Benintendi 14 7 0 8
Andrew McCutchen 28 43 3 77
Angel Pagan 13 12 1 13
Anthony Gose 1 0 0 3
Anthony Rendon 15 22 5 28
Anthony Rizzo 17 35 1 68
Aramis Ramirez 39 85 2 53
Asdrubal Cabrera 21 13 0 2
Austin Jackson 12 17 2 17
Avisail Garcia 6 6 0 8
Ben Revere 5 7 3 22
Ben Zobrist 23 22 0 25
Billy Butler 14 19 1 32
Billy Hamilton 4 0 0 13
Bobby Abreu 54 95 5 88
Brad Miller 6 2 0 2
Brandon Barnes 2 0 0 0
Brandon Belt 12 6 0 7
Brandon Crawford 18 25 1 2
Brandon Drury 6 1 0 2
Brandon Guyer 3 0 0 0
Brandon Moss 11 5 0 7
Brandon Phillips 28 68 0 33
Brayan Pena 2 0 0 0
Brennan Boesch 5 1 0 0
Brett Gardner 14 13 3 19
Brett Lawrie 5 0 0 0
Brett Wallace 4 0 0 0
Brian Dozier 22 25 0 29
Brian McCann 34 67 0 9
Brian Roberts 24 34 6 45
Brock Holt 5 3 0 0
Bryce Harper 21 58 12 55
Buster Posey 38 72 4 44
C.J. Cron 8 2 0 0
Caleb Joseph 3 0 0 0
Cameron Maybin 8 0 0 8
Cameron Rupp 5 0 0 0
Carl Crawford 22 53 12 48
Carlos Beltran 52 126 1 76
Carlos Correa 16 16 0 6
Carlos Gomez 11 9 0 16
Carlos Gonzalez 24 44 7 47
Carlos Pena 18 25 4 35
Carlos Quentin 12 12 0 7
Carlos Ruiz 26 25 0 0
Carlos Sanchez 2 1 1 3
Carlos Santana 22 5 2 19
Casey McGehee 4 8 0 15
Cesar Hernandez 7 1 1 6
Charlie Blackmon 22 58 14 60
Chase Headley 13 11 4 17
Chase Utley 36 94 3 42
Chone Figgins 19 18 4 36
Chris Carter 9 10 5 11
Chris Coghlan 5 4 0 5
Chris Davis 16 46 12 44
Chris Denorfia 5 0 0 0
Chris Heisey 5 0 0 0
Chris Iannetta 29 2 0 0
Chris Johnson 5 4 0 4
Chris Owings 3 1 1 1
Chris Taylor 8 1 0 1
Chris Young 14 9 0 15
Christian Yelich 20 37 7 44
Cliff Pennington 1 2 0 1
Clint Barmes 16 0 0 0
Coco Crisp 15 13 2 15
Cody Asche 4 0 0 0
Cody Bellinger 16 6 1 9
Cody Ross 11 1 0 0
Colby Rasmus 10 6 0 0
Conor Gillaspie 3 0 0 0
Corey Dickerson 11 11 0 14
Corey Hart 16 17 0 15
Corey Seager 22 29 0 17
Cory Spangenberg 4 0 0 0
Craig Gentry 2 3 0 0
Curtis Granderson 25 61 9 58
Dan Johnson 8 0 0 0
Dan Uggla 24 35 2 32
Daniel Descalso 4 3 0 0
Daniel Murphy 24 32 7 45
Daniel Nava 7 3 0 4
Danny Espinosa 4 5 0 3
Danny Santana 3 3 0 1
Danny Valencia 7 0 0 0
Dansby Swanson 3 2 0 0
Daric Barton 7 0 2 4
Darwin Barney 1 2 0 0
David DeJesus 13 7 0 10
David Freese 14 8 0 0
David Murphy 13 3 0 4
David Ortiz 55 171 25 161
David Peralta 15 6 1 9
David Ross 7 0 0 0
David Wright 36 74 0 88
Dayan Viciedo 5 0 0 0
Dee Gordon 9 42 14 43
Delino DeShields 4 1 0 5
Delmon Young 10 7 1 8
Denard Span 15 14 5 27
Derek Dietrich 5 0 0 0
Derek Jeter 67 337 10 145
Derek Norris 4 5 0 0
Desmond Jennings 6 0 0 4
Devin Mesoraco 5 3 0 4
Devon Travis 6 3 0 0
Dexter Fowler 17 16 1 17
Didi Gregorius 7 0 0 0
Dioner Navarro 21 8 0 0
DJ LeMahieu 14 29 4 28
Domingo Santana 11 2 0 0
Domonic Brown 5 3 0 4
Don Kelly 1 0 0 0
Donovan Solano 1 0 0 0
Drew Stubbs 5 2 0 8
Dustin Ackley 2 0 0 1
Dustin Pedroia 33 94 11 70
Eddie Rosario 10 1 1 1
Eduardo Escobar 5 3 0 3
Eduardo Nunez 6 6 0 2
Edwin Encarnacion 28 53 4 83
Elvis Andrus 22 28 0 41
Emilio Bonifacio 3 0 0 7
Ender Inciarte 10 17 1 14
Endy Chavez 7 3 0 2
Enrique Hernandez 8 0 0 0
Eric Chavez 25 29 2 21
Eric Hosmer 13 17 1 37
Eric Thames 10 2 0 4
Eric Young Jr. 2 2 2 5
Erick Aybar 17 14 0 8
Eugenio Suarez 10 8 0 14
Evan Gattis 10 2 0 1
Evan Longoria 25 39 1 50
Everth Cabrera 3 5 2 7
Ezequiel Carrera 3 0 0 0
Francisco Cervelli 8 0 0 0
Francisco Lindor 17 35 5 32
Franklin Gutierrez 5 2 0 0
Freddie Freeman 22 35 7 71
Freddy Galvis 2 0 2 6
Gaby Sanchez 7 5 0 3
Garrett Jones 7 0 0 4
George Springer 14 22 1 18
Geovany Soto 8 7 0 0
Gerald Laird 2 0 0 0
Gerardo Parra 10 7 0 4
Giancarlo Stanton 26 68 21 70
Gordon Beckham 2 0 0 0
Grady Sizemore 17 34 7 38
Greg Dobbs 3 3 0 0
Gregor Blanco 9 0 0 1
Gregory Polanco 8 1 0 4
Hank Conger 3 0 0 0
Hanley Ramirez 36 64 7 74
Hernan Perez 3 0 0 2
Howie Kendrick 19 10 0 8
Humberto Quintero 1 0 0 0
Hunter Pence 20 24 3 53
Ian Desmond 17 15 0 18
Ian Kinsler 32 52 1 55
Ian Stewart 5 0 0 0
Ichiro Suzuki 44 235 43 142
Ike Davis 8 2 0 4
J.D. Martinez 21 45 4 43
J.J. Hardy 19 18 0 5
J.P. Arencibia 7 0 0 0
J.T. Realmuto 8 6 0 1
Jace Peterson 2 0 0 0
Jack Hannahan 2 0 0 0
Jackie Bradley Jr. 5 11 0 1
Jacoby Ellsbury 16 36 7 47
Jake Lamb 11 8 0 7
Jake Marisnick 3 6 0 2
James Loney 9 2 0 5
James McCann 3 0 0 0
Jarrod Dyson 4 3 0 13
Jarrod Saltalamacchia 5 7 0 2
Jason Bartlett 5 15 0 8
Jason Castro 4 4 0 0
Jason Giambi 44 108 13 115
Jason Heyward 15 12 0 8
Jason Kipnis 20 16 0 14
Jason Kubel 13 9 0 11
Jason Lane 9 1 0 0
Javier Baez 8 16 4 22
Jay Bruce 18 29 0 43
Jayson Nix 2 0 0 0
Jayson Werth 23 19 2 36
Jean Segura 10 25 4 32
Jed Lowrie 18 10 0 12
Jedd Gyorko 6 2 0 0
Jeff Baker 7 0 0 0
Jeff Francoeur 9 10 2 9
Jeff Mathis 1 2 0 0
Jesus Guzman 5 0 0 0
Jhonny Peralta 24 34 0 11
Jimmy Rollins 42 121 14 82
Joaquin Arias 1 0 0 0
Joc Pederson 11 9 0 2
Joe Mauer 41 92 15 43
Joe Panik 6 8 0 1
Joey Gallo 12 8 0 13
Joey Votto 38 88 17 143
John Baker 3 0 0 0
John Buck 24 3 0 0
John Jaso 9 2 0 0
John Mayberry 5 0 0 0
John McDonald 12 0 0 0
Johnny Giavotella 2 0 0 0
Jon Jay 12 12 0 6
Jonathan Herrera 2 0 0 0
Jonathan Lucroy 26 14 2 10
Jonathan Schoop 6 11 1 12
Jonathan Villar 7 3 2 11
Jonny Gomes 11 3 0 1
Jordan Pacheco 2 3 0 4
Jordan Schafer 1 0 0 2
Jordy Mercer 4 0 0 0
Jorge Polanco 7 0 0 0
Jorge Soler 7 0 0 0
Jose Abreu 19 33 3 50
Jose Altuve 35 124 29 68
Jose Bautista 27 78 15 70
Jose Iglesias 2 8 0 0
Jose Molina 1 0 0 0
Jose Peraza 5 0 0 8
Jose Ramirez 15 31 2 43
Jose Reyes 36 76 19 72
Jose Tabata 5 0 0 0
Josh Bell 11 0 0 2
Josh Donaldson 19 48 7 58
Josh Hamilton 24 65 11 46
Josh Harrison 4 10 0 11
Josh Reddick 12 9 0 9
Josh Rutledge 3 0 0 1
Josh Thole 1 0 0 0
Josh Willingham 16 5 0 13
Juan Lagares 2 4 0 0
Juan Uribe 17 17 0 2
Jurickson Profar 5 1 0 1
Justin Bour 13 0 0 0
Justin Maxwell 4 0 0 0
Justin Morneau 20 56 5 40
Justin Ruggiano 7 0 0 0
Justin Smoak 9 5 0 7
Justin Turner 15 15 0 4
Justin Upton 22 41 0 53
Kelly Johnson 16 3 0 3
Kendrys Morales 12 15 0 20
Ketel Marte 5 1 1 1
Kevin Frandsen 1 0 0 0
Kevin Kiermaier 5 2 0 5
Kevin Kouzmanoff 6 0 0 1
Kevin Pillar 3 4 0 3
Khris Davis 14 26 4 27
Kole Calhoun 7 3 0 6
Kolten Wong 4 2 0 1
Kris Bryant 20 35 3 31
Kurt Suzuki 23 21 0 0
Kyle Schwarber 12 3 0 0
Kyle Seager 15 10 0 8
Leonys Martin 3 1 0 8
Logan Forsythe 4 0 0 0
Logan Morrison 7 2 0 7
Lonnie Chisenhall 7 1 0 1
Lorenzo Cain 13 28 0 27
Lucas Duda 10 4 0 12
Luis Valbuena 11 0 0 0
Lyle Overbay 13 12 2 7
Maicer Izturis 4 4 0 0
Maikel Franco 7 0 0 0
Manny Machado 14 37 4 28
Manuel Margot 3 0 0 2
Marcell Ozuna 10 15 0 20
Marco Scutaro 19 11 0 12
Marcus Semien 6 1 0 3
Mark Canha 5 0 0 0
Mark Ellis 16 7 0 4
Mark Reynolds 18 14 0 18
Mark Teixeira 33 109 13 78
Mark Trumbo 12 24 4 24
Marlon Byrd 13 11 0 16
Martin Maldonado 3 2 0 0
Martin Prado 15 21 0 29
Marwin Gonzalez 6 3 0 4
Matt Adams 8 0 0 0
Matt Carpenter 22 40 12 53
Matt Dominguez 3 0 0 0
Matt Duffy 8 0 0 1
Matt Holliday 41 110 13 107
Matt Kemp 26 51 12 67
Matt Wieters 25 18 0 0
Matthew Joyce 13 3 0 0
Max Kepler 5 0 0 0
Melky Cabrera 16 30 0 32
Melvin Upton Jr. 16 10 0 15
Michael A. Taylor 4 1 0 2
Michael Bourn 11 15 7 30
Michael Brantley 20 30 2 28
Michael Conforto 15 3 0 2
Michael Cuddyer 19 26 4 15
Michael Saunders 4 3 0 0
Miguel Cabrera 62 263 43 241
Miguel Montero 28 9 0 4
Miguel Olivo 24 0 0 0
Miguel Rojas 1 0 0 0
Miguel Sano 15 3 0 0
Mike Aviles 3 5 0 0
Mike Morse 9 8 0 17
Mike Moustakas 6 12 0 4
Mike Napoli 25 17 0 11
Mike Trout 41 116 30 119
Mike Zunino 6 0 0 0
Mitch Haniger 14 4 0 9
Mitch Moreland 8 5 0 0
Mookie Betts 26 75 11 65
Nate McLouth 12 10 2 7
Nate Schierholtz 4 2 0 0
Neil Walker 19 1 0 4
Nelson Cruz 24 65 8 64
Nick Ahmed 3 2 0 1
Nick Castellanos 10 8 1 18
Nick Hundley 5 3 0 0
Nick Markakis 25 36 2 76
Nick Punto 13 1 0 1
Nick Swisher 19 14 0 29
Nolan Arenado 20 79 23 89
Nolan Reimold 7 0 0 0
Nomar Mazara 8 4 0 4
Nori Aoki 9 2 0 5
Nyjer Morgan 7 6 0 9
Odubel Herrera 7 4 0 3
Omar Infante 13 17 0 6
Orlando Arcia 2 2 0 0
Pablo Sandoval 17 21 0 13
Paul Goldschmidt 31 71 13 87
Paul Konerko 36 80 0 58
Pedro Alvarez 8 14 4 16
Peter Bourjos 3 3 1 2
Prince Fielder 27 85 14 100
Rafael Furcal 32 54 1 39
Rajai Davis 11 5 2 19
Ramon Santiago 1 0 0 0
Randal Grichuk 9 0 0 1
Raul Ibanez 27 38 1 29
Reed Johnson 9 8 0 5
Rene Rivera 3 0 0 0
Rickie Weeks 20 7 1 12
Robbie Grossman 8 0 0 0
Robinson Cano 48 155 1 138
Robinson Chirinos 7 0 0 0
Roger Bernadina 2 0 0 0
Ronny Cedeno 2 0 0 0
Rougned Odor 6 6 1 3
Ruben Tejada 1 0 0 0
Russell Martin 30 54 0 2
Ryan Braun 36 107 16 117
Ryan Doumit 7 3 0 0
Ryan Flaherty 2 0 0 0
Ryan Goins 1 0 0 0
Ryan Hanigan 4 2 0 0
Ryan Howard 25 99 21 84
Ryan Ludwick 14 13 0 14
Ryan Raburn 7 0 0 0
Ryan Roberts 5 1 0 0
Ryan Sweeney 6 0 0 0
Ryan Zimmerman 25 34 1 47
Ryon Healy 8 0 0 0
Salvador Perez 7 39 0 0
Sam Fuld 1 0 0 0
Scooter Gennett 11 6 0 7
Scott Hairston 6 0 0 0
Scott Schebler 8 2 0 0
Sean Rodriguez 11 1 0 0
Seth Smith 13 0 0 1
Shane Victorino 15 32 2 26
Shin-Soo Choo 21 14 0 18
Skip Schumaker 11 11 0 0
Starlin Castro 19 28 7 24
Starling Marte 12 8 0 17
Stephen Drew 19 11 0 10
Stephen Piscotty 11 2 0 2
Stephen Vogt 5 6 0 0
Steve Pearce 8 0 0 0
Steven Souza Jr. 6 2 0 2
Tim Anderson 6 0 0 3
Tim Beckham 5 0 0 2
Todd Frazier 16 13 1 23
Tommy Pham 15 6 0 6
Torii Hunter 34 58 0 29
Travis d'Arnaud 5 0 0 0
Travis Shaw 12 9 0 8
Travis Snider 4 0 0 0
Trea Turner 16 7 4 16
Trevor Plouffe 5 2 0 2
Trevor Story 16 9 0 18
Trey Mancini 8 0 0 0
Troy Tulowitzki 35 46 0 38
Tucker Barnhart 4 2 0 0
Tyler Colvin 6 0 0 1
Tyler Flowers 4 0 0 0
Victor Martinez 37 63 0 54
Welington Castillo 7 0 0 0
Whit Merrifield 13 10 7 16
Wil Myers 10 6 0 7
Wilin Rosario 8 0 0 0
Will Middlebrooks 4 3 0 0
Will Venable 7 0 0 8
Willie Bloomquist 10 0 0 1
Willson Contreras 9 5 0 0
Wilmer Flores 5 5 0 0
Wilson Ramos 8 15 0 4
Xander Bogaerts 11 25 0 25
Xavier Nady 7 4 0 0
Yadier Molina 31 160 0 20
Yan Gomes 5 7 0 0
Yangervis Solarte 6 0 0 0
Yasiel Puig 13 10 0 8
Yasmani Grandal 11 17 0 0
Yasmany Tomas 8 2 0 4
Yoenis Cespedes 13 23 0 16
Yonder Alonso 8 4 0 2
Yuli Gurriel 10 2 0 2
Yunel Escobar 21 5 0 8
Zack Cozart 6 5 0 1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible">
<title>Baseball Hall of Fame Monitor vs. Hall of Fame Standards</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style type="text/css">
.axis {
font-family: "Calibri";
font-size: 14px;
font-weight: bold;
}
#tooltip {
position: absolute;
width: 160px;
height: auto;
padding: 10px;
background-color: #FBEFEF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
#tooltip p strong {
margin: 0;
font-family: sans-serif;
font-size: 18px;
line-height: 20px;
}
.hidden {
display: none;
}
circle:hover {
fill: #09E6EC;
stroke: black;
}
svg {
background-color: #D0D0D0;
}
.title {
font-family: "Calibri";
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p>
<strong>
<span id="name">Player Name</span>
</strong>
</p>
<p>
HoF Standards:
<span id="hof_standards"> #</span>
</p>
<p>
HoF Monitor:
<span id="hof_monitor"> #</span>
</p>
</div>
<div id="chart">
<svg width="1000" height="800"></svg>
<script type="text/javascript">
// Global variables
let svg = d3.select("div#chart svg"),
margin = { top: 60, right: 25, bottom: 70, left: 75 },
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Define scales with their ranges
let x = d3.scaleLinear()
.range([0, width]);
let y = d3.scaleLinear()
.range([height, 0]);
// Colors
let colors = {
"hof_standards": "#770B0B",
"hof_monitor": "#23424C",
"top_right":"#A0E8A8",
"top_left":"#D2F4BD",
"bottom_left":"#EF8686",
"bottom_right":"#D2F4BD"
}
// CSV
let csvfile = "data.csv";
d3.csv(csvfile, function (d) {
return {
name: d.Name,
hof_monitor: +d.HoF_Monitor,
hof_standards: +d.HoF_Standards,
};
})
.then(function (data) {
let players = data;
console.log(players);
let xMin = d3.min(players, p => p.hof_standards) - 1;
let xMax = d3.max(players, p => p.hof_standards) + 1;
let yDomain = d3.extent(players, p => p.hof_monitor);
// Set domains for the scales based on the data
x.domain([xMin, xMax]);
y.domain(yDomain).nice();
// Draw axes with labels to SVG
// X axis - Hall of Fame Standards
g.append("g")
.attr("class", "axis axis_x")
.attr("transform", "translate(0," + height + ")")
.style("color", colors.hof_standards)
.call(d3.axisBottom(x).ticks(10))//Values([2, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150]))
.append("text")
.attr("x", width / 2)
.attr("y", margin.bottom - 30)
.attr("dy", "0.30em")
.style("font-size", 23)
.style("text-anchor", "middle")
.style("fill", colors.hof_standards)
.style("font-weight", "bold")
.text("Hall of Fame Standards");
// Y axis - Hall of Fame Monitor
g.append("g")
.attr("class", "axis axis_y")
.style("color", colors.hof_monitor)
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", 23 - margin.left)
.attr("dy", "0.30em")
.style("font-size", 23)
.style("text-anchor", "middle")
.style("fill", colors.hof_monitor)
.style("font-weight", "bold")
.text("Hall of Fame Monitor");
// Quadrants
let quadrants = g.append("g")
.attr("class", "quadrant");
// Top-right quadrant
quadrants.append("rect")
.attr("x", x(50))
.attr("y", 0)
.attr("width", width - x(50))
.attr("height", y(100))
.attr("fill", colors.top_right);
// Top-left quadrant
quadrants.append("rect")
.attr("x", 1)
.attr("y", 0)
.attr("width", x(50))
.attr("height", y(100))
.attr("fill", colors.top_left);
// Bottom-left quadrant
quadrants.append("rect")
.attr("x", 1)
.attr("y", y(100))
.attr("width", x(50))
.attr("height", height - y(100))
.attr("fill", colors.bottom_left);
// Bottom-right quadrant
quadrants.append("rect")
.attr("x", x(50))
.attr("y", y(100))
.attr("width", width - x(50))
.attr("height", height - y(100))
.attr("fill", colors.bottom_right);
// Draw quadrant divider lines
// Horizontal - Hall of Fame Monitor
g.append("g")
.attr("class", "median horizontal")
.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", y(100))
.attr("y2", y(100))
.attr("stroke", colors.hof_monitor)
.attr("stroke-width", 3)
.attr("stroke-dasharray", 4);
// Vertical - Hall of Fame Standards
g.append("g")
.attr("class", "median vertical")
.append("line")
.attr("x1", x(50))
.attr("x2", x(50))
.attr("y1", 0)
.attr("y2", height)
.attr("stroke", colors.hof_standards)
.attr("stroke-width", 3)
.attr("stroke-dasharray", 4);
// Draw points
g.append("g")
.attr("class", "point")
.selectAll("circle")
.data(players)
.enter()
.append("circle")
.attr("class", "player")
.attr("cx", p => x(p.hof_standards))
.attr("cy", p => y(p.hof_monitor))
.attr("r", 5)
.attr("fill", "#382828")
.attr("stroke", "black")
.on("mouseover", function (p) {
// Tooltips
var xPosition = x(p.hof_standards) + 90;
var yPosition = y(p.hof_monitor) + 50;
let tooltip = d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
tooltip.select("#hof_standards").text(p.hof_standards);
tooltip.select("#hof_monitor").text(p.hof_monitor);
tooltip.select("span#name").text(p.name);
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function () {
d3.select("#tooltip").classed("hidden", true);
})
// Titles
let title = "Hall of Fame Monitor vs. Hall of Fame Standards",
title_size = 28,
title_y = -30,
sub_title = "Active hitters or retired after 2013",
sub_title_size = 16;
// Main title
g.append("text")
.attr("class", "title")
.attr("x", width / 2)
.attr("y", title_y)
.text(title)
.style("font-size", title_size)
.style("font-weight", "bold")
.style("text-anchor", "middle");
// Sub-title
g.append("text")
.attr("class", "title sub")
.attr("x", width / 2)
.attr("y", title_y + 20)
.text(sub_title)
.style("font-size", sub_title_size)
.style("font-style", "italic")
.style("text-anchor", "middle");
// Sources
let source_text = "Source: baseball-reference.com",
source_size = 14;
g.append("text")
.attr("x", width - (source_text.length * (source_size / 2)))
.attr("y", height - source_size)
.attr("class", "source")
.text(source_text)
.style("font-size", source_size)
.style("font-weight", "bold")
.style("text-anchor", "start");
})
.catch(function (error) {
console.log(error);
});
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment