Skip to content

Instantly share code, notes, and snippets.

@shanecav84

shanecav84/index.html

Last active November 6, 2016 16:34
Show Gist options
  • Save shanecav84/ba7f4473de8839263aa86d4a5d3f12a7 to your computer and use it in GitHub Desktop.
Save shanecav84/ba7f4473de8839263aa86d4a5d3f12a7 to your computer and use it in GitHub Desktop.
Download ZIP
Chicago Cubs Ages
Raw
index.html
<!doctype html>
<html>
<head>
<style>
body {
font-family: Helvetica;
}
h1, h2 {
margin: 0;
}
#chart {
width: 1000px;
margin: auto;
}
.bar {
stroke: white;
stroke_width: 1;
shape-rendering: crispEdges;
}
.labelBackground {
shape-rendering: crispEdges;
}
text {
font-size: 10px;
font-weight: bold;
font-family: Helvetica;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
</head>
<body>
<div id="chart">
<h1>2016 Chicago Cubs Ages</h1>
<h2>40&ndash;man Lineup</h2>
<div class="sort">
<label for="sort">Sort by: </label>
<select name="sort">
<option value="last_name">Last Name</option>
<option value="age">Age</option>
</select>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
WIDTH = 1000
HEIGHT = 300
MARGIN = 20
RED = "#D12325"
BLUE = "#0E3386"
var svg = d3.select("#chart").append("svg")
.attr("width", WIDTH).attr("height", HEIGHT + (MARGIN * 2));
function age(d) {
today = new Date();
dob = new Date(d.dob);
return today.getYear() - dob.getYear();
}
d3.json("players.json", function(error, players) {
BAR_WIDTH = Math.round(WIDTH/players.length)
var xScale = d3.scaleLinear().domain(0, players.length).range(0, players.length);
var yScale = d3.scaleLinear().domain([0, 40]).range([HEIGHT - MARGIN, 0]);
barGroups = svg.append("g").attr("class", "bars")
.selectAll(".barGroup")
.data(players)
.enter()
.append("g")
.attr("class", "barGroup")
bars = barGroups
.append("rect")
.attr("class", "bar")
.attr("x", (d, i) => (WIDTH/players.length) * i)
.attr("width", BAR_WIDTH)
.attr("y", d => yScale(age(d)) + MARGIN)
.attr("data-age", d => (age(d)))
.attr("height", d => yScale(0) - yScale(age(d)) + 2)
.attr("fill", BLUE)
labelsBackground = barGroups.append("rect").attr("class", "labelBackground")
labels = barGroups.append("text").attr("class", "label")
labels
.text(d => age(d))
.attr("x", (d, i) => (WIDTH/players.length) * i + 7)
.attr("y", d => yScale(age(d)) + MARGIN - 5)
.attr("fill", RED)
names = barGroups.append("text").attr("class", "name")
names
.text(d => d.name)
.attr("x", (d, i) => (WIDTH/players.length) * i + (MARGIN))
.attr("y", d => HEIGHT + (MARGIN/2))
.attr("transform", (d, i) => "rotate(270," + ((WIDTH/players.length) * i + 7) + ", " + HEIGHT + ")")
.attr("fill", "#fff")
d3.select("select").on("change", sort);
sortTimeout = setTimeout(function() {
d3.select("select option[name='age']").property("selected", true).each(sort);
}, 2000);
function sort() {
// Based on: https://bl.ocks.org/mbostock/3885705
clearTimeout(sortTimeout);
svg.selectAll(".bar, .label, .name").sort(
this.value == "age" ?
function(a, b) {
a_age = age(a);
b_age = age(b);
if ( a_age > b_age ) { return 1; }
if ( a_age < b_age ) { return -1; }
return 0;
} : function(a, b) {
a_last_name = a.name.split(" ")[1];
b_last_name = b.name.split(" ")[1];
if ( a_last_name > b_last_name ) { return 1; }
if ( a_last_name < b_last_name ) { return -1; }
return 0;
});
var transition = svg.transition().duration(750),
delay = function(d, i) { return i * 50; };
transition
.selectAll(".bar")
.delay(delay)
.attr("x", (d, i) => (WIDTH/players.length) * i);
transition
.selectAll(".label")
.delay(delay)
.attr("x", (d, i) => (WIDTH/players.length) * i + 7);
transition
.selectAll(".name")
.delay(delay)
.attr("transform", (d, i) => "rotate(270," + ((WIDTH/players.length) * i + 7) + ", " + HEIGHT + ")")
.attr("x", (d, i) => (WIDTH/players.length) * i + (MARGIN));
}
})
Raw
players.json
[
{
"name": "Andury Acevedo",
"dob": "1990-08-23",
"position": "P"
},
{
"name": "Jake Arietta",
"dob": "1986-03-06",
"position": "P"
},
{
"name": "Jake Buchanan",
"dob": "1989-09-24",
"position": "P"
},
{
"name": "Trevor Cahill",
"dob": "1988-03-01",
"position": "P"
},
{
"name": "Aroldis Chapman",
"dob": "1988-02-28",
"position": "P"
},
{
"name": "Gerardo Concepcion",
"dob": "1992-02-29",
"position": "P"
},
{
"name": "Carl Edwards Jr.",
"dob": "1991-09-03",
"position": "P"
},
{
"name": "Justin Grimm",
"dob": "1988-08-16",
"position": "P"
},
{
"name": "Jason Hammel",
"dob": "1982-09-02",
"position": "P"
},
{
"name": "Kyle Hendricks",
"dob": "1989-12-07",
"position": "P"
},
{
"name": "Pierce Johnson",
"dob": "1991-05-10",
"position": "P"
},
{
"name": "John Lackey",
"dob": "1978-10-23",
"position": "P"
},
{
"name": "Jon Lester",
"dob": "1984-01-07",
"position": "P"
},
{
"name": "Mike Montgomery",
"dob": "1989-07-01",
"position": "P"
},
{
"name": "Spencer Patton",
"dob": "1988-02-20",
"position": "P"
},
{
"name": "Felix Pena",
"dob": "1990-02-25",
"position": "P"
},
{
"name": "Hector Rondon",
"dob": "1988-02-26",
"position": "P"
},
{
"name": "Joe Smith",
"dob": "1984-03-22",
"position": "P"
},
{
"name": "Pedro Strop",
"dob": "1985-06-13",
"position": "P"
},
{
"name": "Travis Wood",
"dob": "1987-02-06",
"position": "P"
},
{
"name": "Rob Zastrynzy",
"dob": "1992-03-26",
"position": "P"
},
{
"name": "Wilson Contreras",
"dob": "1992-05-13",
"position": "C"
},
{
"name": "Tim Federowicz",
"dob": "1987-08-05",
"position": "C"
},
{
"name": "Miguel Montero",
"dob": "1983-07-09",
"position": "C"
},
{
"name": "David Ross",
"dob": "1977-03-19",
"position": "C"
},
{
"name": "Javier Baez",
"dob": "1992-12-01",
"position": "I"
},
{
"name": "Kris Bryant",
"dob": "1992-01-04",
"position": "I"
},
{
"name": "Jeimer Candelario",
"dob": "1993-11-24",
"position": "I"
},
{
"name": "Munenori Kawasaki",
"dob": "1981-06-03",
"position": "I"
},
{
"name": "Tommy La Stella",
"dob": "1989-01-31",
"position": "I"
},
{
"name": "Anthony Rizzo",
"dob": "1989-08-08",
"position": "I"
},
{
"name": "Addison Russell",
"dob": "1994-01-23",
"position": "I"
},
{
"name": "Ben Zobrist",
"dob": "1981-05-26",
"position": "I"
},
{
"name": "Albert Almora Jr.",
"dob": "1994-04-16",
"position": "O"
},
{
"name": "Chris Coghlan",
"dob": "1985-06-18",
"position": "O"
},
{
"name": "Dexter Fowler",
"dob": "1986-03-22",
"position": "O"
},
{
"name": "Jason Heyward",
"dob": "1989-08-09",
"position": "O"
},
{
"name": "Kyle Schwarber",
"dob": "1993-03-05",
"position": "O"
},
{
"name": "Jorge Soler",
"dob": "1992-02-25",
"position": "O"
},
{
"name": "Matt Szczur",
"dob": "1989-07-20",
"position": "O"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment