Fantasy Baseball Dashboard

I created the following visualization using d3.js to analyze the performance of the players on my fantasy baseball team. Hover over a chart to see each players contribution to that statistic. Part of the code for creating the visualization is shown below.

Hitters

Runs

Home Runs

RBI

Stolen Bases

Total Bases

Average

OPS

 

Pitchers

Strikeouts

ERA

WHIP

K/BB

K/9

QS

NSVH

Source Code Snippet

var width = 300,
height = 187.5,
radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
.range([“#4D4D4D”, “#5DA5DA”, “#FAA43A”, “#60BD68”, “#F17CB0”, “#DECF3F”]);

var arc = d3.svg.arc()
.outerRadius(radius – 10)
.innerRadius(radius – 40);

// Runs chart
var rPie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.r; });

var chart1 = d3.select(“#rchart”).append(“svg”)
.attr(“width”, width)
.attr(“height”, height)
.append(“g”)
.attr(“transform”, “translate(” + width / 2 + “,” + height / 2 + “)”);

d3.csv(“hitters.csv”, function(error, data) {

data.forEach(function(d) {
d.r = +d.r,a
});

// r
var g1 = chart1.selectAll(“.arc”)
.data(rPie(data))
.enter().append(“g”)
.attr(“class”, “arc”);

g1.append(“path”)
.attr(“d”, arc)
.style(“fill”, function(d) { return color(d.data.player); })
.on(“mousemove”, function (d) {
g1.append(“text”)
.style(“text-anchor”, “middle”)
.style(“font-size”, “12px”)
.attr(“dy”, -10)
.text(d.data.player)
g1.append(“text”)
.style(“font-size”, “36px”)
.style(“text-anchor”, “middle”)
.attr(“dy”, 30)
.text(d.data.r)
})
.on(“mouseout”, function (d) {
chart1.selectAll(“text”).remove();
});