Skip to content

Instantly share code, notes, and snippets.

@MikeCostelloe
Last active August 29, 2015 13:57
Show Gist options
  • Save MikeCostelloe/9833585 to your computer and use it in GitHub Desktop.
Save MikeCostelloe/9833585 to your computer and use it in GitHub Desktop.
Crazy Rhythms History
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crazy Rhythms History</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
.axis {
font: 10px sans-serif;
fill: #a0a0a0;
}
.axis path,
.axis line {
fill: none;
stroke: #a0a0a0;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke-width: 2px;
}
#tooltip {
font: 14px sans-serif;
}
</style>
</head>
<body>
<div id="container">
<script type="text/javascript">
//Javascript here
//Conventional Margins start
var margin = {top: 30, right: 160, bottom: 30, left: 40};
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("#container").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Conventional Margins end
var parseDate = d3.time.format("%Y").parse;
//Scales
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
//Color
var color = d3.scale.category10();
//Axes
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
//Lines
var line = d3.svg.line()
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Record); });
//Converts to 3-digit decimal
var converted = d3.format(".3r");
//Data load and two console logs, before and after the data.map
d3.csv('../winPercentage.csv', function(error, data) {
//Check it.
console.log(data)
//Splits into 10 colors by owner
color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'Year'; }));
data.forEach(function(d) {
d.Year = parseDate(d.Year);
});
var owners = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {Year: d.Year, Record: +d[name]};
})
};
});
//Check it.
console.log(owners);
//x-Domain corresponds to Years
x.domain(d3.extent(data, function(d) {return d.Year; }));
//y-Domain to min/max of winPct's
y.domain([
d3.min(owners, function(c) { return d3.min(c.values, function(v) { return v.Record; }); }),
d3.max(owners, function(c) { return d3.max(c.values, function(v) { return v.Record; }); })
])
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
svg.append('g')
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Win Percentage");
//Selects .owner class (none exist at first) and creates them as needed
var owner = svg.selectAll('.owner')
.data(owners)
.enter().append('g')
.attr('class', 'owner');
//Assigns each owner a line and a unique color for it
owner.append('path')
.attr('class', 'line')
.attr('d', function(d) { return line(d.values); })
.style('stroke', function(d) { return color(d.name); });
//Adds a circle to each data node
owner.append('g').selectAll('circle')
.data(function(d) {return d.values; })
.enter().append('circle')
.attr('r', 6)
.attr('cx', function(c) { return x(c.Year); })
.attr('cy', function(c) { return y(c.Record); })
.attr('fill', function(d) { return color(this.parentNode.__data__.name); })
.on('mouseover', function(d) {
var xTip = parseFloat(d3.select(this).attr('cx'));
var yTip = parseFloat(d3.select(this).attr('cy'));
svg.append('text')
.attr('id', 'tooltip')
.attr('x', xTip + 5)
.attr('y', yTip - 10)
.attr('fill', 'black')
.text(converted(d.Record));
})
.on('mouseout', function() {
d3.select('#tooltip').remove()
});
//Adds the names at the end
owner.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.Year) + "," + y(d.value.Record) + ")"; })
.attr('class', 'labels')
.attr("x", 5)
.attr("dy", 15)
.attr('fill', function(d) { return color(this.parentNode.__data__.name); })
.text(function(d) { return d.name; });
});
</script>
</div>
</body>
</html>
Year Lee D. Andrew D. Brad R. Mike M. Sam R. Garrett T. Peter R. Bryan C. Mike C. Christopher M.
2009 0.595170454545 0.548295454545 0.538352272727 0.5625 0.494318181818 0.431818181818 0.515625 0.428977272727 0.492897727273 0.392045454545
2010 0.563988095238 0.525297619048 0.379464285714 0.52380952381 0.52380952381 0.671130952381 0.5 0.35119047619 0.53125 0.43005952381
2011 0.616666666667 0.40625 0.541666666667 0.5 0.364583333333 0.514583333333 0.575 0.53125 0.520833333333 0.429166666667
2012 0.575 0.622916666667 0.429166666667 0.660416666667 0.354166666667 0.333333333333 0.495833333333 0.466666666667 0.564583333333 0.497916666667
2013 0.551587301587 0.646825396825 0.507936507937 0.521825396825 0.424603174603 0.553571428571 0.426587301587 0.438492063492 0.559523809524 0.369047619048
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment